Javascript.RU

Создать новую тему Закрытая тема
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.01.2012, 20:48
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Как сверстать input без картинок
Подскажите, как можно сверстать подобный input type="text" не используя картинок. Как видно из картинки сложность в том, что элемент помимо однопиксельной границы (тут всё понятно, border:#999 1px solid), имеет закругленную обводку толщиной 4 пикселя. Как сделать такую обводку не используя картинок?
Изображения:
Тип файла: png ef.png (3.2 Кб, 32 просмотров)
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
  #2 (permalink)  
Старый 11.01.2012, 20:49
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

обернуть его во что-нибудь. дать инпуту border, и его wrapper тоже border, но уже с border-radius.
  #3 (permalink)  
Старый 11.01.2012, 20:52
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Сообщение от melky
обернуть его во что-нибудь
а без обертки на CSS3 ничего не вымутить?
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
  #4 (permalink)  
Старый 11.01.2012, 21:05
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

если просто <input> хотите, то никак.
  #5 (permalink)  
Старый 11.01.2012, 21:45
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

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

можно, но только для нормальных браузеров, через градиент, background-size и множественные фоновые изображения.
  #6 (permalink)  
Старый 11.01.2012, 22:09
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Seva1986 Посмотреть сообщение
можно, но только для нормальных браузеров, через градиент, background-size и множественные фоновые изображения.
можно пример?
  #7 (permalink)  
Старый 11.01.2012, 22:52
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от 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>
  #8 (permalink)  
Старый 11.01.2012, 23:01
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

хм. интересное применение!
  #9 (permalink)  
Старый 11.01.2012, 23:07
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от melky
хм. интересное применение!
тут вообще взрыв мозга http://lea.verou.me/css3patterns/

а когда это начнёт работать то вообще красота будет!
  #10 (permalink)  
Старый 12.01.2012, 02:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

greatilya,
Вариант...jQuery Corner
http://code.google.com/p/jquerycurvycorners/
Закрытая тема



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как форматировать в input ценовую информацию? mistermandarin Элементы интерфейса 24 04.05.2015 16:23
Как сделать,чтобы при наведении фокуса на input менять value? Anastasiya Общие вопросы Javascript 8 28.10.2011 06:44
Как подключить XML к слайдеру картинок. Mexxman jQuery 0 12.08.2010 15:34
Как зациклить показ картинок в галерее? greysells jQuery 3 01.02.2010 11:56
Как сделать прокрутку картинок Lugan Элементы интерфейса 1 26.06.2009 12:52