Един от най-често използваните елементи на всеки уебсайт е формата за търсене. Ако искате да увеличите нивото на лекота на използване на вашия сайт и значително да улесните процеса на намиране на правилния материал, тогава трябва сериозно да започнете да разработвате форма за търсене.
И така, днес искаме да ви разкажем за проектирането на формуляр за търсене с помощта на CSS3 свойства.
В миналото вероятно вече сте намирали уроци за това как да проектирате формуляр за търсене в CSS3, но днес искаме да ви предложим малко по-различна опция - формуляр за търсене с 3D ефект, реализиран с помощта на параметъра box-shadow.
Маркиране
По-долу можете да видите HTML кода, използван за разработване на този формуляр. Моля, обърнете внимание, че нашият пълнител е разработен с помощта на HTML5 и използвахме всички необходими атрибути.
Първоначално искахме да използваме type="search", въведен в HTML5, но след това променихме решението си поради несъвместимост с много съвременни браузъри. Сега ще трябва да добавим няколко допълнителни реда CSS код, за да презапишем оригиналните стойности.
CSS код
Нека да разгледаме минималните стилове, използвани за създаване на красив CSS3 формуляр за търсене:
Обвивка на формуляр (
ширина: 450px;
подложка: 8px;
поле: 100px автоматично;
преливане: скрито;
ширина на границата: 1px;
стил на границата: плътен;
цвят на границата: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
кутия-сянка: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
радиус на границата: 10px;
цвят на фона: #f6f6f6;
фоново изображение: -webkit-градиент (линеен, ляво горе, ляво долу, от (#f6f6f6), до (#eae8e8));
фоново изображение: -webkit-линеен градиент (отгоре, #f6f6f6, #eae8e8);
фоново изображение: -moz-линеен градиент (отгоре, #f6f6f6, #eae8e8);
фоново изображение: -ms-линеен градиент (отгоре, #f6f6f6, #eae8e8);
фоново изображение: -o-линеен градиент (отгоре, #f6f6f6, #eae8e8);
фоново изображение: линеен градиент (отгоре, #f6f6f6, #eae8e8);
}
Form-wrapper #search (
ширина: 330px;
височина: 20px;
подложка: 10px 5px;
поплавък: наляво;
шрифт: удебелен 16px "lucida sans", "trebuchet MS", "Tahoma";
рамка: 1px плътен #ccc;
-moz-box-shadow: 0 1px 1px #ddd вмъкване, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
кутия-сянка: 0 1px 1px #ddd вмъкване, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
радиус на границата: 3px;
}
Form-wrapper #search:focus (
контур: 0;
цвят на границата: #aaa;
-moz-box-shadow: 0 1px 1px #bbb вмъкване;
-webkit-box-shadow: 0 1px 1px #bbb вмъкване;
кутия-сянка: 0 1px 1px #bbb вмъкване;
}
Form-wrapper #search::-webkit-input-placeholder (
цвят: #999;
тегло на шрифта: нормално;
}
Form-wrapper #search:-moz-placeholder (
цвят: #999;
тегло на шрифта: нормално;
}
Form-wrapper #search:-ms-input-placeholder (
цвят: #999;
тегло на шрифта: нормално;
}
Обвивка на формуляр #изпращане (
плаващ: надясно;
рамка: 1px плътен #00748f;
височина: 42px;
ширина: 100px;
подложка: 0;
курсор: показалец;
шрифт: удебелен 15px Arial, Helvetica;
цвят: #fafafa;
преобразуване на текст: главни букви;
цвят на фона: #0483a0;
фоново изображение: -webkit-градиент (линеен, ляво горе, ляво долу, от (#31b2c3), до (#0483a0));
фоново изображение: -webkit-линеен градиент (отгоре, #31b2c3, #0483a0);
фоново изображение: -moz-линеен градиент (отгоре, #31b2c3, #0483a0);
фоново изображение: -ms-линеен градиент (отгоре, #31b2c3, #0483a0);
фоново изображение: -o-линеен градиент (отгоре, #31b2c3, #0483a0);
фоново изображение: линеен градиент (отгоре, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
радиус на границата: 3px;
текстова сянка: 0 1px 0 rgba(0, 0,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) вмъкване, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) вмъкване, 0 1px 0 #fff;
кутия-сянка: 0 1px 0 rgba(255, 255, 255, 0.3) вмъкване, 0 1px 0 #fff;
}
Обвивка на формуляр #submit:hover,
.form-wrapper #submit:focus (
цвят на фона: #31b2c3;
фоново изображение: -webkit-градиент (линеен, ляво горе, ляво долу, от (#0483a0), до (#31b2c3));
фоново изображение: -webkit-линеен градиент (отгоре, #0483a0, #31b2c3);
фоново изображение: -moz-линеен градиент (отгоре, #0483a0, #31b2c3);
фоново изображение: -ms-линеен градиент (отгоре, #0483a0, #31b2c3);
фоново изображение: -o-линеен градиент (отгоре, #0483a0, #31b2c3);
фоново изображение: линеен градиент (отгоре, #0483a0, #31b2c3);
}
Form-wrapper #submit:active (
контур: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) вмъкване;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) вмъкване;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) вмъкване;
}
Form-wrapper #submit::-moz-focus-inner (
граница: 0;
}
Поддръжка на браузър
По-долу можете да видите някои екранни снимки, показващи нашата форма за търсене. Трябва да имате предвид, че също се държи добре, ако страницата е отворена в по-стара версия на браузъра. Бих искал също да добавя, че тази CSS3 форма за търсене е напълно готова за използване.
Съвременни браузъри Chrome, Firefox, Safari, Opera, IE10:
Моля, обърнете внимание, че в момента Opera поддържа атрибута placeholder в HTML5, но не може да бъде стилизиран.
Добрата новина е, че IE10 поддържа и HTML5 filler.
Предишни версии на IE (6/7/8):
*
В заключение
Ако сте чели предишните ни статии, вероятно знаете, че тук разработваме работещи приложения (със и без версии за връщане назад) за всички браузъри. И този пример не прави изключение.
В допълнение към използването на CSS3 формуляр за създаване на блок за търсене, можете лесно да го адаптирате, за да създадете формуляр за оторизация или формуляр за абонамент.
Полето за търсене вероятно е един от най-често срещаните елементи на потребителския интерфейс. Когато работите върху нивото на удобство на интерфейса, много често има желание да добавите стилно поле за търсене. В този урок ще създадем такъв популярен елемент, използвайки псевдоелементи.
HTML маркиране
За да подготвите такова поле, маркирането ще бъде минимално.
Специалният HTML5 контейнер и задължителните атрибути се използват тук:
- контейнер- този атрибут указва, че текстът се показва в полето, преди полето да получи фокус за въвеждане, след което текстът се скрива.
- изисква се- този атрибут задава задължително условие за наличие на информация в полето за въвеждане преди подаване на формуляра.
HTML5 също има ново значение за атрибута type: type="search" . Но той се поддържа слабо в браузърите, така че засега няма да го използваме.
HTML елементи като img и input нямат съдържание. Следователно псевдоелемент като:before няма да показва никакви стрелки за бутона.
Решението на този проблем в нашия случай е да се използва бутон type="submit" вместо input type="submit". По този начин запазваме формата с помощта на клавиша ENTER.
CSS
По-долу са стиловете, необходими за нашата демонстрация:
Отмяна на обвиването на текст
Cf:before, .cf:after( content:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )
Елементи на формата
Префиксите на браузъра не са показани в кода за по-голяма яснота. Можете да видите пълния код в изходния текст.
/* Стилове за контейнера на формуляр */ .form-wrapper (ширина: 450px; подложка: 15px; поле: 150px автоматично 50px автоматично; фон: #444; фон: rgba(0,0,0,.2); border- радиус: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2) /* Стилове за въвеждане на текст */ .form-wrapper вход (ширина: 330px ; padding: 15px; border-radius: 3px; .form-wrapper input: 0; background: #fff; 0 0 2px rgba(0,0,0,.8) inset; .form-wrapper input::-webkit -input-placeholder ( цвят: #999; тегло на шрифта: нормален; стил на шрифта: курсив; ). form-wrapper input:-moz-placeholder (цвят: #999; font-weight: нормален; font-style: italic;) .form-wrapper input:-ms-input-placeholder (цвят: #999; font-weight: нормален; font-style: italic) /* Бутон за подаване на формуляр */ .form-wrapper button (overflow: visible; position: relative float: right; граница: 0; подложка: 0; курсор: показалец; височина: 40px; ширина: 110px; шрифт: получер 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; цвят: #fff; преобразуване на текст: главни букви; фон: #d83c3c; радиус на границата: 0 3px 3px 0; текстова сянка: 0 -1px 0 rgba(0, 0,0, .3); ) .form-wrapper бутон: hover( фон: #e54040; ) .form-wrapper бутон: активен, .form-wrapper бутон: фокус ( фон: #c42f2f; контур: 0; ) .form-wrapper бутон: преди ( / * стрелка наляво: ""; border-width: 8px border-style: solid none; transparent-form-wrapper button:border( border-right-color: #e54040;) .form-wrapper button:focus:before, .form-wrapper button:active:before(border-wrapper button::-moz- focus-inner ( /* Премахване на допълнително пространство до бутон в Mozilla Firefox */ border: 0; padding: 0; )
Поле за търсене на сайтае един от най-важните елементи на потребителския интерфейс на уеб страница. С негова помощ потребителят може да намери желаното съдържание на вашия сайт.
В този урок ще научите как да създавате маркиране на полето за търсене с помощта на HTML5, както и как да стилизирате елементи на формуляр, използвайки силата на CSS3, без да използвате скриптове.
1. HTML маркиране
елемент
