Создание потрясающего поля поиска CSS3
CSS3 - это язык таблиц стилей следующего поколения. Он вводит много новых и интересных функций, таких как тени, анимация, переходы, границы границ и т. Д. Хотя спецификации еще не определены, многие производители браузеров уже начали поддерживать многие из новых функций..
В этом уроке мы рассмотрим некоторые из этих функций, такие как текст-тень, граница радиуса, коробчатая тень и переходы для создания качающегося поля поиска.
Версия этого поискового поля для фотошопа была создана Элвином Тонгом и может быть загружена отсюда. Я попытался воссоздать это поле поиска, используя чистый CSS3. Следует отметить, что не все браузеры поддерживают функции CSS3 и чтобы попробовать этот учебник, вы должны использовать один из современных браузеров, которые поддерживают функции CSS 3.
Готовы? Давайте начнем!
1. HTML5 Doctype
Начнем с разметки HTML. Это очень просто, после Тип документа HTML5 и декларация, у нас есть с идентификатором называется #wrapper внутри . Это делается просто для определения ширины поля содержимого и выравнивания по центру страницы..
Затем следует Вот как выглядит код: Чтобы создать большую рамку вокруг формы, мы добавим стили к Важный кусок кода здесь Объяснение: Здесь ключевое слово inset указывает, будет ли тень находиться внутри поля. Первые два нуля обозначают смещение по оси x и смещение по оси y, а 3 пикселя - размытие. Далее идет объявление цвета. Я использовал значения RGBA здесь; RGBA означает красный зеленый синий и альфа (непрозрачность). Таким образом, 4 значения в скобках указывают количество красного, зеленого, синего и его альфа (непрозрачность). Вы заметите, что 5 комплектов теневых объявлений были забиты вместе. Это можно сделать, разделив их запятой. Первые две тени определяют белый эффект "внутреннего свечения", а следующие там объявления придают коробке вид сплошного / объемного. Поиграйте с этими значениями, чтобы понять, как это работает. Теперь, когда окно заполнено, давайте перейдем к стилю поля ввода. Стили, объявленные для поля ввода, очень похожи на стили, описанные для большой коробки. Объяснение: Вы заметите, что на этот раз теневое размытие было сохранено на 0, чтобы получить резкую тень, и используется вертикальное смещение 5 пикселей. В последующих объявлениях размытие сохранялось на уровне 0px, но цвет и смещение по оси y были изменены. Опять же, поиграйте с этими значениями, чтобы получить разные результаты. Давайте стилизовать кнопку поиска. Помимо цветов, кнопка поиска имеет в основном те же стили, что и внешний блок. Подобные границы и радиус рамки были использованы на кнопке. Новая функция, представленная Объяснение: в Активное состояние кнопки имеет немного больше изменений. В данном случае я присвоил кнопке абсолютную позицию и верхнее значение 5 пикселей. Это было сделано, чтобы придать ему более естественный вид, чтобы было ощущение, что кнопка фактически нажата на 5 пикселей. Другие изменения в активном состоянии - это изменение цвета фона и теней. Обратите внимание, что я уменьшил смещение y теней, чтобы придать ему «прижатый» вид. Вот код для активного состояния кнопки отправки: Это завершает наше поле поиска. Мы использовали немало новых функций CSS3. Вот полный CSS и HTML этого поля поиска. Надеюсь, вам понравился этот урок. Не стесняйтесь экспериментировать с этими функциями и не забудьте поделиться своими мыслями. Примечание редактора: Этот пост написан Бхарани М для Hongkiat.com. Бхарани - дизайнер / разработчик из Нью-Дели, Индия.#главный. Этот идентификатор содержит стили, которые определяют большое белое поле вокруг поля ввода и кнопку поиска. это объявлено внутри. Форма имеет поле ввода текста и скнопка earch. Вот как выглядит форма без примененных к ней стилей: 
Поле поиска CSS3
2. Создание ограничительной рамки
#главный. Из приведенного ниже кода вы заметите, что поле имеет ширину 400 пикселей и высоту 50 пикселей. #main width: 400px; высота: 50 пикселей; фон: # f2f2f2; обивка: 6px 10px; граница: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; радиус границы: 5 пикселей; -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;
граница радиуса декларация и коробчатого тень декларация. Для создания закругленных углов мы использовали объявление CSS3 border-radius, префиксы браузеров "-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; ширина: 230 пикселей; отступы: 15px 5px 5px 5px; margin-top: 5px; поле слева: 3 пикселя; граница: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; радиус границы: 5 пикселей; -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;
#главный. Мы использовали один и тот же радиус границы (5 пикселей). Опять же, несколько теней были забиты. box-shadow: вставка 0 5px 0 #ccc, вставка 0 6px 0 # 989898, вставка 0 13px 0 #dfdede;
предварительный просмотр
4. Стилизация кнопки отправки
input [type = "submit"]. solid float: left; курсор: указатель; ширина: 130 пикселей; обивка: 8px 6px; поле слева: 20 пикселей; цвет фона: # f8b838; цвет: rgba (134, 79, 11, 0,8); преобразование текста: заглавные буквы; вес шрифта: полужирный; граница: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; радиус границы: 5 пикселей; тень для текста: 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), вставка 0 1px 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 # ссс; -webkit-transition: фоновый режим 0.2s;
текст-тень. тень для текста: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
текст-тень Декларация, первые три числовых значения - смещение по оси x, смещение по оси y и размытие соответственно. Значения rgba указывают цвет тени. В следующем наборе объявлений (через запятую) смещению по оси Y присваивается значение -1. Это сделано, чтобы дать тексту “внутренняя тень” эффект. Состояние наведения / фокуса кнопки отправки имеет разные значения цвета фона и теней. предварительный просмотр
«Активное» состояние для кнопки
input [type = "submit"]. solid: active background: # f6a000; положение: относительное; верх: 5 пикселей; граница: 1px solid # 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 # ссс;
Полный (CSS) код
#main width: 400px; высота: 50 пикселей; фон: # f2f2f2; обивка: 6px 10px; граница: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; радиус границы: 5 пикселей; -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; ширина: 230 пикселей; отступы: 15px 5px 5px 5px; margin-top: 5px; поле слева: 3 пикселя; граница: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; радиус границы: 5 пикселей; -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; курсор: указатель; ширина: 130 пикселей; обивка: 8px 6px; поле слева: 20 пикселей; цвет фона: # f8b838; цвет: rgba (134, 79, 11, 0,8); преобразование текста: заглавные буквы; вес шрифта: полужирный; граница: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; радиус границы: 5 пикселей; тень для текста: 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), вставка 0 1px 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 # ссс; -webkit-transition: фоновый режим 0.2s; input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus background: # 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 # ссс; input [type = "submit"]. solid: active background: # f6a000; положение: относительное; верх: 5 пикселей; граница: 1px solid # 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 # ссс;
