Вашему вниманию небольшая статья, то теме как создать анимированную форму поиска для сайта, так, чтоб можно было установить на разный фон оттенка. А точнее здесь уже представленная форма, где по клику на кнопку она раскрывается, и можно с ней работать. Такой стиль отлично подойдет на современный дизайн, где нужно создать отдельную страницу, так как по форме она больше стандартной формы.
Само окно является для поиска, что сказать, это основной компонент интернет ресурса, которые определяют и улучшают пользовательский стиль дизайна. Несомненно, форма поиска является очень необходимым компонентом хорошо структурированного портала для повышения удобства использования среди пользователей.
Безусловно, его можно считать базовым элементом для пользовательского интерфейса, который послужит разнообразным целям, помогая гостям и посетителям легко отыскать нужный материал на сайте.
Приступаем к установке:
HTML
Код
<div id="topaseb-tamilab">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="Что искать будем?"><input id="search_submit" value="Rechercher" type="submit">
</form>
</div>
CSS
Код
#topaseb-tamilab {
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: right;
background: url(Ссылка на изображение) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}
Демонстрация
