наверх





Поиск - это одна из важных частей сайта, необходима для того, чтобы пользователь мог спокойно ориентироваться по вашему сайту и искать информацию. Но чтобы было приятно использовать поиск - его нужно сделать красивым, чем и займемся.


Поиск у нас будет простой, но элегантный и красивый. Кнопка поиска будет рядом вместе со строкой поиска, то есть как-будто это будет одним целым. При клике на строку поиска - она увеличивается. Все довольно таки просто, однако, это еще надо сделать.

HTML


<div class="search">
<input type="text" placeholder="Поиск на BlueCode.ru..."><input type="button" value="Поиск">
</div>


Если у вас на странице не будет никаких других текстовых полей и кнопок, то класс search можно смело убрать.

CSS



Начнем с оформления самого текстового поля. Что у него будет: другой цвет границы, внешняя тень, округление, ширина, цвет текста и другое по мелочам.

.search input[type="text"] {

    /* Округления старт */
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    /* Округления конец */
    
    /* Плавность старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    /* Плавность конец */
    
    /* Тень старт */
    -webkit-box-shadow: 0px 0px 2px 1px #8FB8FC;
    -moz-box-shadow: 0px 0px 2px  1px #8FB8FC;
    box-shadow: 0px 0px 2px 1px #8FB8FC;
    /* Тень конец */
    
    
    outline:0; /* Отключаем внешнюю линию */
    border-left:3px solid #72A7FB; /* Изменяем ширину, тип и цвет левой границы */
    border-bottom:3px solid #72A7FB; /* Изменяем ширину, тип и цвет нижней границы */
    border-top:3px solid #72A7FB; /* Изменяем ширину, тип и цвет верхней границы */
    border-right:0; /* Отключаем правую границу */
    
    padding:2px 0 2px 5px; /* Внутренние отступы: сверху 2, справа 0, снизу 2, слева 5 */
    color:#A4A5A4; /* Цвет текста */
    font: bold 10pt "Trebuchet MS"; /* Толщина, размер, семейство шрифта */
    margin:0; /* Внешние отступы */
    width:160px; /* Ширина */
}


В принципе, здесь особо что-то объяснять нет смысла, так как сверх нового здесь нечего нет.

Так же, теперь необходимо сделать так, чтобы при клике на текстовую область она увеличилась. Это делается обычным изменением ширины:

.search input[type="text"]:focus {
    width:200px; /* Ширина */
}


Наша поисковая строка готова. Осталась кнопка поиска. Здесь тоже не все так сложно.

.search input[type="button"] {

    /* Округление старт */
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    /* Округление конец */
    
    outline:0; /* Отключаем внешнюю линию */
    border-right:3px solid #72A7FB; /* Изменяем ширину, тип и цвет правой границы */
    border-bottom:3px solid #72A7FB; /* Изменяем ширину, тип и цвет нижней границы */
    border-top:3px solid #72A7FB; /* Изменяем ширину, тип и цвет верхней границы */
    border-left:0; /* Отключаем левую границу */

    
    /* Плавность старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    /* Плавность конец  */
    
    
    /* Тень старт */
    -webkit-box-shadow: 0px 0px 2px 1px #8FB8FC;
    -moz-box-shadow: 0px 0px 2px  1px #8FB8FC;
    box-shadow: 0px 0px 2px 1px #8FB8FC;
    /* Тень конец */
    
    padding:1px; /* Внутрення обводка */
    color:#fff; /* Цвет текста */
    background-color:#72A7FB; /* Фон */
    font: bold 10pt "Trebuchet MS"; /* Толщина, размер, семейство шрифта */
    margin-left:-1px; /* Отступ слева */
    cursor:pointer; /* тип курсора */
}


Тут стоит лишь обратить внимание на то, что надо учесть все границы и им всем задать свойства, иначе браузер вставит свои свойства к границам и вид уже будет совсем другой.

Осталось лишь сделать вид при наведении. Здесь просто заменим фон на более темный, вместе с цветом границ:

.search input[type="button"]:hover {
    background-color:#5E99FB; /* Фон */
    border-right:3px solid #5E99FB; /* Изменяем ширину, тип и цвет правой границы */
    border-bottom:3px solid #5E99FB; /* Изменяем ширину, тип и цвет нижней границы */
    border-top:3px solid #5E99FB; /* Изменяем ширину, тип и цвет верхней границы */
}





Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.