Створення качающегося вікна пошуку CSS3
CSS3 є мовою таблиць стилів наступного покоління. Вона пропонує багато нових і захоплюючих функцій, таких як тіні, анімація, переходи, радіус кордону і т. Д. Хоча технічні характеристики ще не завершені, багато виробників браузерів вже почали підтримувати багато нових функцій..
У цьому підручнику ми розглянемо деякі з таких функцій, як text-shadow, кордон-радіус, тіні і переходи для створення гойдального поля пошуку.
Версія фотошопа цього поля пошуку була створена компанією Alvin Thong і її можна завантажити тут. Я намагався відтворити це поле пошуку за допомогою чистого CSS3. Слід зазначити, що не всі браузери підтримують функції CSS3 і пробувати цей підручник, вам слід скористатися одним із сучасних браузерів, які підтримують функції CSS 3..
Готові? Давайте розпочнемо!
1. HTML5 Doctype
Почнемо з розмітки HTML. Це дуже просто, після Документ HTML5 і декларація, ми маємо a з ідентифікатором ID #wrapper всередині . Це робиться просто, щоб визначити ширину поля вмісту та вирівняти його з центром сторінки.
Далі йде a Ось як виглядає код: Щоб створити велике поле навколо форми, ми додамо стилі до Важливою частиною коду тут є Пояснення: Тут ключове слово inset вказує, чи буде тінь у вікні. Перші два нуля вказують x-offset і y-offset, а 3px - розмиття. Далі йде оголошення кольору. Тут я використовував значення rgba; rgba означає червоний зелений синій і альфа (непрозорість). Таким чином, 4 значення в дужках вказують на кількість червоного, зеленого, синього та його альфа (непрозорість). Ви помітите, що 5 наборів тіньових декларацій були зібрані разом. Це можна зробити, розділивши їх комою. Перші дві тіні визначають білий ефект "внутрішнього світіння", а наступні там декларації надають коробці твердий / короткий вигляд. Грайте з цими значеннями, щоб зрозуміти, як це працює. Тепер, коли вікно завершено, можна перейти до стилізації поля введення. Стилі, оголошені для поля введення, дуже схожі на ті, що не використовуються для великого вікна Пояснення: Ви помітите, що на цей раз тіньове розмиття зберігається на рівні 0, щоб отримати різку тінь, і використовується вертикальне зміщення 5px. У послідовних деклараціях розмиття зберігається в 0px, але колір і y-offset були змінені. Знову ж таки, грайте з цими значеннями, щоб отримати різні результати. Давайте налаштувати кнопку пошуку. Крім кольорів, кнопка пошуку має в основному ті ж стилі, що і зовнішня коробка. Подібні кордоні радіусу і тіні були використані на кнопці. Нова функція введена Пояснення: В Активний стан кнопки має трохи більше змін. У цьому я надав кнопці позицію абсолютного і верхнього значення 5px. Це було зроблено, щоб дати йому більш природний вигляд, так що він відчуває, що кнопка насправді була висунута вниз на 5 пікселів. Інші зміни до активного стану - це колір фону і тіні. Зверніть увагу, що я зменшив y-offset тіней, щоб надати йому «притиснутий» погляд. Ось код активного стану кнопки "Надіслати": Це завершує наше поле пошуку. Ми використовували чимало нових функцій CSS3. Ось повний CSS і HTML цього поля пошуку. Сподіваюся, вам сподобався цей підручник. Не соромтеся експериментувати з цими функціями і не забувайте ділитися своїми думками. Примітка редактора: Цей пост написано Бхарані М для Hongkiat.com. Bharani є дизайнером / розробником з Нью-Делі, Індія.#main. Цей ідентифікатор містить стилі, які визначають велике біле поле навколо поля введення та кнопку пошуку. Це оголошений всередині нього. Форма має форму поля введення тексту і search кнопки. Ось як виглядає форма без застосування стилів: 
Поле пошуку CSS3
2. Створення обмежувального поля
#main. З коду, показаного нижче, ви помітите, що коробці було надано ширину 400px і висоту 50px. #main width: 400px; висота: 50px; фон: # f2f2f2; оббивка: 6px 10px; кордон: 1px твердий # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; кордон-радіус: 5px; -moz-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.8), вставка 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.8), вставка 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.8), вставка 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
кордон-радіус декларації та box-shadow декларації. Для створення округлих кутів ми використовували декларацію кордону CSS3, "-moz-" і "-webkit-" префікси браузера, щоб гарантувати, що це працює в gecko і webkit браузерах. Декларація тіньового вікна може виглядати трохи заплутаною, але вона насправді дуже проста. box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.8), вставка 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Попередній перегляд
3. Стилізація поля введення
input [type = "text"] float: left; ширина: 230px; оббивка: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; кордон: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; кордон-радіус: 5px; -moz-box-shadow: вставка 0 5px 0 #ccc, вставка 0 6px 0 # 989898, вставка 0 13px 0 #dfdede; -webkit-box-shadow: вставка 0 5px 0 #ccc, вставка 0 6px 0 # 989898, вставка 0 13px 0 #dfdede; box-shadow: вставка 0 5px 0 #ccc, вставка 0 6px 0 # 989898, вставка 0 13px 0 #dfdede;
#main. Ми використали той же радіус кордону (5px). Знову ж таки, було забито багато тіньових тіней. box-shadow: вставка 0 5px 0 #ccc, вставка 0 6px 0 # 989898, вставка 0 13px 0 #dfdede;
Попередній перегляд
4. Створення стилю кнопки надсилання
solid [float: left; курсор: покажчик; ширина: 130px; заповнення: 8px 6px; margin-left: 20px; background-color: # f8b838; колір: rgba (134, 79, 11, 0.8); text-transform: верхній регістр; font-weight: bold; кордон: 1px твердий # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; кордон-радіус: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-перемикання: фон 0.2s полегшується;
text-shadow. text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
text-shadow перші три числові значення являють собою x-offset, y-offset та blur відповідно. Значення rgba вказують колір тіні. У наступному наборі декларації (відокремленому комою), зміщення y-задається значенням -1. Це робиться, щоб надати тексту а “внутрішня тінь” ефекту. Стан наведення / фокусування кнопки представлення має різні значення кольору тла та тіней. Попередній перегляд
Стан "Активний" для кнопки
твердо: активний фон: # f6a000; позиція: відносна; зверху: 5px; кордон: 1px твердий # 702d00; -moz-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Повний (CSS) код
#main width: 400px; висота: 50px; фон: # f2f2f2; оббивка: 6px 10px; кордон: 1px твердий # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; кордон-радіус: 5px; -moz-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.8), вставка 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.8), вставка 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.8), вставка 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; ширина: 230px; оббивка: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; кордон: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; кордон-радіус: 5px; -moz-box-shadow: вставка 0 5px 0 #ccc, вставка 0 6px 0 # 989898, вставка 0 13px 0 #dfdede; -webkit-box-shadow: вставка 0 5px 0 #ccc, вставка 0 6px 0 # 989898, вставка 0 13px 0 #dfdede; box-shadow: вставка 0 5px 0 #ccc, вставка 0 6px 0 # 989898, вставка 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; курсор: покажчик; ширина: 130px; заповнення: 8px 6px; margin-left: 20px; background-color: # f8b838; колір: rgba (134, 79, 11, 0.8); text-transform: верхній регістр; font-weight: bold; кордон: 1px твердий # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; кордон-радіус: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-перемикання: фон 0.2s полегшується; input [type = "submit"] твердий: hover, input [type = "submit"] твердий: фокус фон: # ffd842; -moz-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.9), вставка 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.9), вставка 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.9), вставка 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"] твердий: активний фон: # f6a000; позиція: відносна; зверху: 5px; кордон: 1px твердий # 702d00; -moz-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: вставка 0 0 3px rgba (255, 255, 255, 0.6), вставка 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
