HTML/CSS - Панель поиска

HTML/CSS - Панель поиска

Коллеги всем привет.

В сегодняшней статье я вам покажу как создать окно поиска с помощью HTML и CSS. Анимация использует чистый CSS. Как мы видим, когда мы нажимаем на значок поиска, он расширяется, образуя панель поиска. Если мы щелкнем за пределами панели, она рухнет, чтобы сформировать панель поиска. Эта панель не с хлопнется, если введен поисковый запрос.

 

HTML Код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search bar css</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flexbox">
    <div class="search">
        <div>
            <input type="text" placeholder="Search . . ." required>
        </div>
    </div>
</div>
</body>
</html>

 

CSS Код.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

* {
    font-family: Roboto, sans-serif;
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

.flexbox {
    background-color: #2ecc71;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search {
    margin: 20px;
}

.search > h3 {
    font-weight: normal;
}

.search > h1,
.search > h3 {
    color: white;
    margin-bottom: 15px;
    text-shadow: 0 1px #27ae60;
}

.search > div {
    display: inline-block;
    position: relative;
    filter: drop-shadow(0 1px #27ae60);
}

.search > div:after {
    content: "";
    background: white;
    width: 4px;
    height: 20px;
    position: absolute;
    top: 40px;
    right: 2px;
    transform: rotate(135deg);
}

.search > div > input {
    color: white;
    font-size: 16px;
    background: transparent;
    width: 25px;
    height: 25px;
    padding: 10px;
    border: solid 3px white;
    outline: none;
    border-radius: 35px;
    transition: width 0.5s;
}

.search > div > input::placeholder {
    color: #efefef;
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.search > div > input:focus::placeholder {
    opacity: 1;
}

.search > div > input:focus,
.search > div > input:not(:placeholder-shown) {
    width: 250px;
}

 

Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.

 

ПОХОЖИЕ СТАТЬИ

jQuery карусель с эффектом увеличительного стекла
jQuery карусель с эффектом увеличительного стекла
WEB
JQuery плагин для увеличения изображения с увеличительным стеклом
JQuery плагин для увеличения изображения с увеличительным стеклом
WEB
JQuery - Галерея изображений с увеличением при наведении
JQuery - Галерея изображений с увеличением при наведении
WEB