Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как сверстать input без картинок (https://javascript.ru/forum/xhtml-html-css/24725-kak-sverstat-input-bez-kartinok.html)

greatilya 11.01.2012 20:48

Как сверстать input без картинок
 
Вложений: 1
Подскажите, как можно сверстать подобный input type="text" не используя картинок. Как видно из картинки сложность в том, что элемент помимо однопиксельной границы (тут всё понятно, border:#999 1px solid), имеет закругленную обводку толщиной 4 пикселя. Как сделать такую обводку не используя картинок?

melky 11.01.2012 20:49

обернуть его во что-нибудь. дать инпуту border, и его wrapper тоже border, но уже с border-radius.

greatilya 11.01.2012 20:52

Цитата:

Сообщение от melky
обернуть его во что-нибудь

а без обертки на CSS3 ничего не вымутить?

melky 11.01.2012 21:05

если просто <input> хотите, то никак.

Seva1986 11.01.2012 21:45

Цитата:

Сообщение от greatilya
а без обертки на CSS3 ничего не вымутить?


можно, но только для нормальных браузеров, через градиент, background-size и множественные фоновые изображения.

melky 11.01.2012 22:09

Цитата:

Сообщение от Seva1986 (Сообщение 149705)
можно, но только для нормальных браузеров, через градиент, background-size и множественные фоновые изображения.

можно пример?

Seva1986 11.01.2012 22:52

Цитата:

Сообщение от melky
можно пример?

Вот.

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="UTF-8"/>
    <title>Тест</title>
    <style>
        input {
            border: 4px solid #999;
            border-radius: 4px;
            height: 50px;
            width: 300px;

            background-color: #fff;
            background-image: -moz-linear-gradient(#f00, #fff 1px), -moz-linear-gradient(#f00, #fff 1px), -moz-linear-gradient(0deg, #f00, #fff 1px), -moz-linear-gradient(0deg, #f00, #fff 1px);
            background-image: -webkit-linear-gradient(#f00, #fff 1px), -webkit-linear-gradient(#f00, #fff 1px), -webkit-linear-gradient(0deg, #f00, #fff 1px), -webkit-linear-gradient(0deg, #f00, #fff 1px);
            background-image: -o-linear-gradient(#f00, #fff 1px), -o-linear-gradient(#f00, #fff 1px), -o-linear-gradient(0deg, #f00, #fff 1px), -o-linear-gradient(0deg, #f00, #fff 1px);
            background-image: -ms-linear-gradient(#f00, #fff 1px), -ms-linear-gradient(#f00, #fff 1px), -ms-linear-gradient(0deg, #f00, #fff 1px), -ms-linear-gradient(0deg, #f00, #fff 1px);
            background-image: linear-gradient(#f00, #fff 1px), linear-gradient(#f00, #fff 1px), linear-gradient(0deg, #f00, #fff 1px), linear-gradient(0deg, #f00, #fff 1px);
            background-size: auto 1px, auto 1px, 1px auto, 1px auto;
            background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
            background-position: 0 0, 0 100%, 0 0, 100% 0;

        }
    </style>
</head>
<body>

<input/>

<script>

</script>

</body>
</html>

melky 11.01.2012 23:01

хм. интересное применение!

Seva1986 11.01.2012 23:07

Цитата:

Сообщение от melky
хм. интересное применение!

тут вообще взрыв мозга http://lea.verou.me/css3patterns/

а когда это начнёт работать то вообще красота будет!

рони 12.01.2012 02:10

greatilya,
Вариант...jQuery Corner
http://code.google.com/p/jquerycurvycorners/


Часовой пояс GMT +3, время: 11:35.