Кнопка внутри поля поиска — как создать с помощью CSS
Интересный вопрос создания поля поиска с кнопкой внутри.
Сейчас такой прием очень популярен в дизайне и используется повсеместно на сайтах. Почему популярен — просто очень красив такой способ передачи поля ввода в веб-приложении. Чтобы было более понятно, о чем идет речь, давайте посмотрим пример макета с подобной формой поиска:
Дизайн нарисован таким образом, что видим следующее. Поле ввода текста с текстом-заглушкой , справа внутри поля находиться кнопка отправки запроса в виде текста “Send”.
Все вроде так и в чем же проблема? Трудность заключается в том, что на сегодняшний день возможности CSS не позволяют поместить кнопку внутри элемента . Поэтому в данном случае выход один — разместить рядом два элемента: и кнопку ( или ).
Оба эти элемента обернуть в родительский элемент (благо он является блочным) которому придать внешние свойства поля ввода — фоновую заливку, границу, внутренние отступы . А у настоящих элементов или убрать все визуальные признаки их присутствия внутри .
На авторитетном для меня сайте htmlbook есть статья, посвященная подобному вопросу. Но в ней описывается способ, когда внутрь элемента форм вставляется дополнительный блок . Которому назначаются все внешние атрибуты поля ввода.
Мне такой подход не совсем понятен — зачем плодить лишнюю разметку, когда с подобной задачей прекрасно справляется сам элемент .
Мне более нравиться способ, представленный на сайте Speckyboy.com автором Catalin Rosu, в котором как раз и используются только три элемента: , , . В самом конце статьи я приведу код этого примера также, ибо он мне понравился.
Приступаем к первому примеру и начнем создавать поле поиска с кнопкой, как на картинке. Для начала придадим элементу внешние признаки поля ввода: зададим границу с радиусом скругления, фоновую заливку и внутренние поля отступа .
Помимо этого, явно установим ширину и высоту нашего будущего “поля” ввода и немного приукрасим ее, анимировав цвет границы при наведении :
Теперь уберем все, что делает таковым в нашем случае — обнулим границу, переопределим и установим в ноль .
Это основные свойства элемента , назначаемые ему по умолчанию браузером. Затем немного поборемся с браузерами на WebKit (Chrome\Safari), которые создаются эффект свечения вокруг поля ввода при получении фокуса и рисуют тонкую линию-границу несмотря на то, что мы убрали ее, обнулив .
Фоновый цвет сделаем одинаковым с элементом , чтобы создавалась иллюзия однородности. Все остальные свойства можно не упоминать — они очевидны (кегль, цвет текста, высота и так далее).
Практически также поступим для элемента , за исключением характерных нюансов типа или .
Кстати, у Catalin Rosu я перенял “фишку”, когда он применяет вместо . Это делается для дополнительной функциональности кнопки, так как может перехватывать событие Enter (нажатие этой клавиши на клавиатуре) + событие мыши. А вот — только нажатие мыши на самом себе:
Ну и в конце приукрасим текст-заглушку . Здесь придется использовать браузерные префиксы, так как данное свойство не поддерживается в полной мере браузерами на сегодня:
Совсем забыл привести HTML-код, на основе которого создавались все вышеприведенные стили:
Результат создания поля поиска показан ниже:
Поле ввода и кнопка со стрелкой (псевдо-элемент) внутри.
На закуску привожу полный код (почти без объяснений — чего там объяснять) от Catalin Rosu, как и обещал.
Здесь есть интересный атрибут , который делает значение в поле ввода обязательным. Если оно будет пустым и нажать кнопку отправки, то появиться сообщение о необходимости сначала ввести данные.
Также автором статьи намеренно используется элемент вместо нового элемента , который еще не до конца поддерживается всеми браузерами:
Довольно объемный, но это связано с теми эффектами, которые применены к данной форме:
И результат этого кода — красивое поле ввода с не менее красивой кнопкой отправки данных на сервер:
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading
Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.
Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал «по-старому».
В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.
Пример того, что получится в результате, можно увидеть здесь.
Что мы теряем при верстке данной формы с помощью HTML5 и CSS3
- IE9 и ниже — не увидим текст по умолчанию (атрибут placeholder ).
- IE8 и ниже — не увидим закругленных углов и внутренних теней.
- IE7 — для него приходится указать другую ширину формы, т.к. он не поддерживает свойство box-sizing .
- IE6 — а его вообще в расчет не берем =)
В остальных современных браузерах все замечательно. Я считаю, что вышеуказанные недостатки не критичны, поэтому для своего сайта я бы смело использовал форму, сверстанную по последним технологиям.
HTML-код формы поиска
Выглядит он вот так:
По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией HTML5:
CSS эксперименты с формой поиска
Paula Borowska Last updated Sep 8, 2014
В этом руководстве я хотела бы рассказать, как вы можете украсить вашу форму поиска. Мы не будем делать ничего супер-сложного. Вместо этого рассмотрим четыре способа, как вы можете украсить форму поиска с помощью CSS transitions
Ниже приведен код обычного бокса для поиска.
Для начала в вашем HTML файле создайте элемент input с атрибутом type=search. Если посмотрите на код, приведенный ниже, увидите 4 разных элемента: элемент div с классом .box , элемент div с классом .container-1 , .icon и саму строку поиска.
Все четыре примера будут иметь, естесственно, строку поиска и иконку поиска. Каждый из четырех примеров будет находиться в отдельном контейнере, чтобы мы могли изменять их независимо друг от друга. Наконец, блок div ответственный за то, чтобы держать наш контейнер по центру.
Добавление Font Awesome
Font Awesome — это библиотека иконок. Больше об этой библиотеке можно узнать на их сайте.
Кусок кода выше показывает один из примеров, как можно включить иконку в вашу разметку. Однако, чтобы иконка заработала, вам так же необходимо указать ссылку на библиотеку Font Awesome, как написано ниже. Добавьте эту ссылку в head тэг вашего документа.
Начальные стили
Сейчас мы добавим немного стилей в отдельный файл (который вам так же придется добавить в head тэг вашего документа).
В приведенном выше фрагменте кода CSS мы добавили некоторые базовые стили для страницы. Стиль полей поиска будет окрашен в тёмно-синий цвет, поэтому фон body не должен быть абсолютно белым. Класс box также центрируется на странице урока.
Отделка Search Box
Этот урок посвящён изучению того, как отделать окна поиска. На первом примере я объясню происходящее более подробно; убедимся, что вы точно знаете, что происходит. В остальных трёх примерах я просто покажу вам варианты переходов.
#1. Осветление фона
Первый пример, который мы собираемся решить, это изменение фона ввода поиска при зависании. Мы будем добавлять переход, чтобы изменение не было резким.
Вы уже видели код HTML базовой разметки. Это будет один фрагмент на все примеры.
Чтобы назначить стиль, нам нужно определить стиль CSS самого окна поиска. Давайте добавим все правила CSS один за другим, чтобы вы точно знали, что происходит.
Сначала оформим класс контейнера. Наиболее важное свойство, возможно, position: relative . Это специально, чтобы значок можно было поместить поверх ввода, как вы увидите.
Input
Затем мы назначим стиль input. Все вышеизложенное является украшательством, поскольку радиус границы или цвет фона не влияют на функциональность input. Обратите внимание на свойства левого отступа. Это, чтобы освободить место для значка, чтобы он не находился буквально над текстом внутри input.
Ниже у нас четыре различных правила для цвета заполнителя текста нашего примера Search. К сожалению, правила должны быть отдельными для отдельных префиксов поставщиков и не могут быть объединены в сокращенное письменное правило. Это немного раздражает и будет повторяться в каждом примере!
Наконец, стиль иконки. Главное, чтобы она оказалась поверх ввода, поэтому назначаем ей position: absolute . Поля помогают расположить значок в верхней позиции на 50% .
Добавление эффектов Hover
Следующий набор правил определяет то, что происходит с полем поиска при наведении. В этом примере мы хотим изменить цвет фона. Чтобы избавиться от жёлтого или синего свечения вокруг входа (который иногда добавляют браузеры), установите outline: none .
В приведённом выше фрагменте мы добавили два дополнительных состояния — focus и active . Таким образом, эффект не исчезает при задержке на input. Что ещё более важно, эффект проявляется также при input.
Создание перехода
Чтобы осуществить переход, нам необходимо добавить несколько строк кода. Вернемся назад к правилу, в котором мы определили стиль ввода .container-1 input#search . Перед закрывающими скобками добавьте следующий фрагмент:
Мы определяем сокращение свойства перехода, но можем и определить эти три параметра индивидуально. Во-первых, мы говорим, что переход должен влиять только на свойство фона. Далее мы говорим, что переход займёт чуть больше половины секунды. Наконец, мы определяем смягчение эффекта перехода. ease не единственный эффект, который мог бы работать здесь, мы могли бы использовать linear или ease-in , например. Это выглядело бы немного иначе. Попробуйте, чтобы увидеть, что вам больше нравится.
Стиль input теперь должен выглядеть, как код ниже.
Как работают переходы CSS?
Если вы ничего не знаете о CSS transitions, позвольте мне дать вам краткий обзор. Во-первых, для перехода свойство должно быть определено в состоянии default, а не при hover, или active или focus.
Переходы CSS позволяют постепенно изменять эффект и определить параметры контроля, такие как свойство, продолжительность перехода и вид перехода. Вы можете установить несколько переходов для одного элемента. Главное, вы всегда должны включать префиксы поставщиков для различных браузеров, поскольку поддержка этого свойства еще не является универсальной.
#2. Развернуть ввод при наведении
В этом примере поиск начнётся по иконке смотрового стекла. При наведении курсора на значок поиск развернётся, после чего вы можете ввести свой запрос. Большая часть кода в этом примере будет очень похожа на предыдущий.
Стиль ввода для этого перехода отличается. Вход значительно меньше, так что значок может оказаться за квадратом. Все остальные свойства, такие как фон или цвет шрифта, останутся, мы не хотим полностью изменить стиль поиска.
Как видите, я переопределила свойство перехода, чтобы влиять только на ширину. Я сохранила то же время, потому что это достаточно быстро, чтобы не раздражать пользователей, но и достаточно долго, чтобы создать приятный эффект.
Ниже приведен код для перекраски placeholder текста.
И снова у нас есть стиль CSS иконки. Он остался таким же, как в предыдущем примере.
Добавление эффектов Hover
Самое последнее, что нам нужно сделать, — это определить, как будет выглядеть поиск при ожидании. В следующем фрагменте кода первое правило гарантирует, что в форме нет вызванного браузером свечения, и что при вводе — при наборе текста — окно поиска остается расширенным. Среднее правило просто увеличивает ввод до полной ширины при наведении.
Самым последним, что происходит в приведённом коде, является то, что при наведении значок меняет свой цвет. Это всего лишь деталь, чтобы быстро показать пользователю, что окно поиска активно, а не бездействует. Это изменение не реализовано для перехода.
#3. Увеличение размера значка при наведении
Из всех четырёх примеров этот является самым тонким, как с точки зрения кода, так и с визуальной. В этом случае значок смотрового окна будет слегка выплывать и увеличиваться в размере.
Снова HTML разметка значка и окна поиска такая же, как в предыдущих двух примерах. Конечно, за исключением .container-3 .
В стиле CSS для этого примера ничего особенного. По большей части в начале очень похоже на первые примеры, когда состояние default ничем не отличается. Ниже приведен код для контейнера и input. Обратите внимание, что на этот раз переход на input отсутствует.
Еще раз у нас есть правила placeholder.
По внешнему виду, значок для этого примера такой же. Та же позиция, тот же цвет и прочее. Однако, я добавила к нему переход. Эти переходы назначены всем свойствам, что более коротко, чем их индивидуальное изложение.
Добавление эффектов Hover
В приведенном выше коде есть несколько вещей. Во-первых, мы поменяли цвет значка при наведении и переместили немного выше, чтобы он центрировался по вертикали, когда увеличится. Во-вторых, мы добавили трансформацию иконке при наведении так, чтобы она становилась в 1,5 раза больше первоначального размера. Поскольку ранее определённый переход был настроен для воздействия на все свойства, кажется, что значок растёт при наведении.
Еще раз взглянем на CSS3 Transitions And Transforms From Scratch, чтобы узнать больше о трансформации.
#4. Кнопка при наведении
В отличие от последних трёх примеров, этот будет более сложным. При наведении курсора на верхнюю часть ввода будет нажата кнопка, позволяющая вам продолжить — вроде Send или Go. Внутри кнопки есть значок увеличительного стекла.
Этот HTML немного отличается. Вход всё ещё там, конечно, но значок теперь внутри элемента кнопки, который идёт после input. Важно, что button идёт после input, поскольку это связано с тем, как эффект ожидания будет создан в CSS.
CSS в этом примере отличается, обратите внимание! Ниже приведен фрагмент стиля контейнера. Во-первых, position: relative отсутствует; Это больше не важно, так как иконка не полагается на него, чтобы помещаться поверх ввода. Однако у нас есть overflow:hidden . Это не позволяет отображать кнопку, когда она не в ожидании. Технически кнопка, которая появляется, находится справа от входа, но благодаря overflow:hidden она не отображается, когда выходит за пределы ширины контейнера — container и input имеют одинаковую ширину.
Ниже input не имеет перехода, потому что теперь это больше не элемент.
Следующий фрагмент для изменения цвета placeholders.
Ниже приведён код стиля кнопки при наведении. Для трюка его захода со стороны надо разместить его прямо за input и спрятать до наведения. Кнопка — элемент, который изменяется — он перемещается — поэтому именно он определяет переход. Чтобы упростить задачу, я определила переход для воздействия на все свойства.
Добавление эффектов Hover
Для затухания, button необходимо разместить поверх input. Это делается через отрицательную margin. Ранее мы установили непрозрачность кнопки в 0 , поэтому мы должны сбросить ее до 1 , чтобы кнопка также была видна.
Последнее правило изменяет фон button только при наведении курсора на кнопку. Хорошо дать знать пользователю, что кнопка активна и он может нажать на неё, чтобы отправить запрос; нет смысла иметь кнопку, если она кажется неактивной.
Заключение
Что ж, мы подошли к концу наших экспериментов CSS! Мы взяли основную форму input поиска и использовали небольшой набор эффектов, чтобы изменить её поведение. Как ещё можно было бы изменить input? Какие другие аспекты вы бы применили к CSS-переходам или трансформации? Дайте нам знать об этом в комментариях!
Эффект светящейся лампы на HTML и CSS
В заданном эффекте, где включаем и отключаем свет не нужны скрипты и библиотеки, все создано на чистом CSS, что означает, здесь задействовано только HTML и CSS для создания данного эффекта свечения, который происходит по клику. Чтобы создать этот эффект, нам нужно выставить два изображения, виде лампочки, с последующей заменой их местами при нажатии кнопки. Так как одна картинка идет уже с включенным светом, вторая представлена простой лампочкой. И они выставляются ссылками в самом HTML, а в стилистике CSS уже сами можете что-то настроить.
.nuladnik span <
background: #fff;
color: #111;
>
.nuladnik span:before <
content: «выключить»;
>
#nuladnik:checked
img#bulb-on <
animation: none;
>
#nuladnik:checked
.nuladnik span:before <
content: «включить»;
>
.lampochka input <
display: none;
>
Для того, чтоб создать эту кнопку интерактивной, где будет кардинально изменена состояние лампочки, что произойдет при нажатии, здесь задействовано HTML input type = «checkbox» где идет комбинация с меткой.
Это о том, что вы также можете использовать JavaScript, который может кардинально изменить состояния лампочки. Или пойти по простому, это найти данные по размеру изображение на 2 элемента , включен свет и выключен, где самостоятельно поменять, что в дальнейшем установить по месту.
PS — Рекомендую скачать файл, где находятся изображение, чтоб поставить на свои ссылки.