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