Тег input используется для создания строк для ввода. То есть, все вы видели поисковые строки в яндекс поисковике, google, youtube и так далее. Все они создаются тегом input.
В браузере на нашем сайте появилось поле, с которым можно воспользоваться обычному пользователю (что-то написать). Но это выглядит не совсем интересно или красиво. Мы попробуем сверстать поисковую строку как в Яндексе и Google.
Поисковая строка Яндекс
Выглядит он примерно так:
Для создания поисковой строки "Яндекс" я положил тег input и текст h3 в контейнер с уникальным именем search. В <input> добавил код, позволяющий добавить вспомогательный текст placeholder='сюда пишите любой текст который хотите'. Перешел в CSS и для контейнера search задал значения высоту (height), длину (width), цвет контейнера (background-color), закругление углов (border-radius) и display:flex; , что означает расположение всех объектов, находящихся в этом контейнере, в ряд.
После задаем значения для нашего с вами тега input. Для него я задал значения высоты (height), длины (width), отступа сверху (margin-top), отступа слева (margin-left), закругление углов (border-radius), рамки (border), шрифта(font-family), размера шрифта (font-size), отступа текста в поисковике с лева (padding-left) и outline: none; , он нужен для того, чтобы не было рамки, которая появляется при нажатии на поисковую строку пользователем.
И задаем значения для текста h3. Изменение курсора при наведении на текст (cursor: pointer;), длинна (width), высота (height), отступ со всех сторон от контейнера, в котором находится текст (margin), отступ текста слева от конца контейнера в котором находится этот текст (padding-left), отступ текста сверху от конца контейнера, в котором находится этот текст (padding-top), отступ текста снизу от конца контейнера в котором находится этот текст (padding-bottom), цвет текста (color) и шрифт (font-family).
Итог: (я конечно мог зайти в "Исследовать элемент", но я захотел не "читерить" и разобраться сам. Так же можно было импортировать шрифт в CSS и в дальнейшем использовать его)
Поисковая строка Google
Как мы видим здесь присутствует контейнер с серой рамкой в котором есть png-картинка поиска, поисковая строка и png-картинка микрофона. Так же на этой странице есть текст "Google", 2 кнопки с текстом и текст "Google offered in: русский". Ну что приступаем?
Код в HTML:
Здесь я создал текст h1 с классом title_google, контейнер div с классом search, контейнер div с классом container и текст h2,в котором будет ссылка. В контейнер search добавили изображение img лупы (поиск) с классом photo_search, поисковую строку input и еще одну картинку img микрофона с классом photo_micro. В контейнер с классом container добавил два контейнера (button1 , button2), которые будут иметь вид кнопок.
Код в CSS:
Да, довольно большой.
body изменил фон страницы (background-color).
.title_google изменил цвет текста (color), размер текста (font-size), шрифт (font-family) и установил текст по центру (texy-align).
.search изменил цвет контейнера (background-color), длину (width), высоту (height), закругление углов (border-radius), цвет и размер рамки (border), установили его по центру страницы (margin:0 auto;) и записали display: flex; , позволяющий устанавливать объекты, которые находятся в это м контейнере в ряд.
.photo_search В этой картинке я понял следующие параметры: высоту, вместе с высотой изменяется и длинна (height) , отступ слева (margin-left), отступ сверху (margin-top) и код cursor: pointer; , позволяющий изменить курсор при наведении.
input Изменил цвет строки (background-color), убрал появление рамки при наведении на строку (outline: none;), убрал рамку (border: 0px;), изменил размеры строки (width и height), отступ слева (margin-left), цвет текста (color), размер текста (font-size), и шрифт (font-family).
.photo_micro изменяем так же ка и изменяли картинку img с классом photo_search.
.container Добавил display: flex; , позволяющий устанавливать объекты, которые находятся в это м контейнере в ряд, отступ слева (margin-left), отступ сверху (margin-top), цвет текста (color), размер текста (font-size) и шрифт (font-family).
.button1 и .button2 Так как это кнопки мы должны сделать анимацию при наведении, но это пока попозже, когда мы поработаем над стилизацией кнопок. Размеры кнопок (width и height), цвет кнопки (background-color), закругление углов (border-radius), отступ слева (margin-left), отступ справа для .button1 - это нужно для того, чтобы при наведении на кнопку анимация не сбивала месторасположение второй кнопки .button2, т.к. будет появляться рамка которая тоже имеет размер и она будет отталкивать вторую кнопку .button2 правее , а ток мы можем потом уменьшить этот отступ (margin-right), расположили текст по центру (text-align: center;) и написали cursor: pointer; , чтобы при наведении на эту кнопку, курсор менял свой вид.
.button1: hover и .button2:hover. Как мы знаем тег hover нужно, чтобы при наведении на объект, менялись какие-то значения, которые можно задать. Создаем рамку и меняем цвет (border), уменьшаем отступ снизу, чтобы текст, который будет располагаться снизу имел статичное положение и не менял своего месторасположения (margin-bottom) и то, что я вам говорил, мы уменьшаем отступ справа первой кнопки .button1, чтобы не двигалась вторая кнопка .button2 (margin-right) - это мы пишем только в первой кнопке .button:over.
a Тег ссылки. Здесь мы убираем прочерк снизу текста (text-decoration: none;) и меняем цвет текста(color).
h2 Здесь мы меняем расположение текст, чтобы он находился ровно по центру (text-align: center;), цвет текста (color), размер текста (font-size), шрифт (font-family) и еще раз размер текста (font-size: small;).
И вот конечный результат. Если вы хотите сделать более похоже, то можете импортировать шрифты из сайта (Google Fonts). И просто скопировать картинку большой надписи "Google", просто надо навести на картинку, зажать и перетащить на рабочий стол, дальше вставьте картинку img в HTML, поменяйте размер в CSS.