Домашня » Веб дизайн » Створення качающегося вікна пошуку CSS3

    Створення качающегося вікна пошуку CSS3

    Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / CSS3" - присвячений допомозі зробити вас кращим дизайнером та / або розробником. Натисніть тут щоб побачити більше статей з тієї ж серії.

    CSS3 є мовою таблиць стилів наступного покоління. Вона пропонує багато нових і захоплюючих функцій, таких як тіні, анімація, переходи, радіус кордону і т. Д. Хоча технічні характеристики ще не завершені, багато виробників браузерів вже почали підтримувати багато нових функцій..

    У цьому підручнику ми розглянемо деякі з таких функцій, як text-shadow, кордон-радіус, тіні і переходи для створення гойдального поля пошуку.

    Версія фотошопа цього поля пошуку була створена компанією Alvin Thong і її можна завантажити тут. Я намагався відтворити це поле пошуку за допомогою чистого CSS3. Слід зазначити, що не всі браузери підтримують функції CSS3 і пробувати цей підручник, вам слід скористатися одним із сучасних браузерів, які підтримують функції CSS 3..

    Готові? Давайте розпочнемо!

    1. HTML5 Doctype

    Почнемо з розмітки HTML. Це дуже просто, після Документ HTML5 і декларація, ми маємо a

    з ідентифікатором ID #wrapper всередині . Це робиться просто, щоб визначити ширину поля вмісту та вирівняти його з центром сторінки.

    Далі йде a

    з ідентифікатором ID #main. Цей ідентифікатор містить стилі, які визначають велике біле поле навколо поля введення та кнопку пошуку. Це
    має
    оголошений всередині нього. Форма має форму поля введення тексту і search кнопки. Ось як виглядає форма без застосування стилів:

    Ось як виглядає код:

       Поле пошуку CSS3   

    Поле пошуку 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; 

    Пояснення: Тут ключове слово inset вказує, чи буде тінь у вікні. Перші два нуля вказують x-offset і y-offset, а 3px - розмиття. Далі йде оголошення кольору. Тут я використовував значення rgba; rgba означає червоний зелений синій і альфа (непрозорість). Таким чином, 4 значення в дужках вказують на кількість червоного, зеленого, синього та його альфа (непрозорість). Ви помітите, що 5 наборів тіньових декларацій були зібрані разом. Це можна зробити, розділивши їх комою. Перші дві тіні визначають білий ефект "внутрішнього світіння", а наступні там декларації надають коробці твердий / короткий вигляд.

    Грайте з цими значеннями, щоб зрозуміти, як це працює.

    Попередній перегляд

    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; 

    Пояснення: Ви помітите, що на цей раз тіньове розмиття зберігається на рівні 0, щоб отримати різку тінь, і використовується вертикальне зміщення 5px. У послідовних деклараціях розмиття зберігається в 0px, але колір і y-offset були змінені. Знову ж таки, грайте з цими значеннями, щоб отримати різні результати.

    Попередній перегляд

    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. Це робиться, щоб надати тексту а “внутрішня тінь” ефекту. Стан наведення / фокусування кнопки представлення має різні значення кольору тла та тіней.

    Попередній перегляд

    Стан "Активний" для кнопки

    Активний стан кнопки має трохи більше змін. У цьому я надав кнопці позицію абсолютного і верхнього значення 5px. Це було зроблено, щоб дати йому більш природний вигляд, так що він відчуває, що кнопка насправді була висунута вниз на 5 пікселів. Інші зміни до активного стану - це колір фону і тіні. Зверніть увагу, що я зменшив y-offset тіней, щоб надати йому «притиснутий» погляд. Ось код активного стану кнопки "Надіслати":

     твердо: активний фон: # 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) код

    Це завершує наше поле пошуку. Ми використовували чимало нових функцій CSS3. Ось повний CSS і HTML цього поля пошуку.

     #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;  

    Сподіваюся, вам сподобався цей підручник. Не соромтеся експериментувати з цими функціями і не забувайте ділитися своїми думками.

    Примітка редактора: Цей пост написано Бхарані М для Hongkiat.com. Bharani є дизайнером / розробником з Нью-Делі, Індія.

    © Savtec
    Корисна інформація та поради по веб-розробці. Програмування, веб-дизайн, CSS, HTML, JAVASCRIPT. Налагодження та перевстановлення WINDOWS. Створення сайтів і додатків з нуля.