V tomto článku vytvoríme cool animovaný vyhľadávací panel v CSS. Panel vyhľadávania je užitočný na jednoduchý prístup k akémukoľvek obsahu. Vyhľadávací panel sa vytvorí iba pomocou HTML a CSS. Existuje mnoho typov vyhľadávacích panelov. Môžeme vytvoriť vyhľadávací panel s vyskakovacím, pevným, posuvným a v niektorých prípadoch je pridaná animácia na efekty vznášania. V tomto návode však vytvoríme vyhľadávací panel, ktorý bude mať aj animáciu. Naša ikona vyhľadávania sa zobrazí na webovej stránke, ale keď na ňu používateľ umiestni kurzor myši, zobrazí sa na vstupe panela vyhľadávania s ikonou vyhľadávania. Ako som povedal, vytvoríme ho iba pomocou HTML a CSS. Potrebujeme teda vytvoriť dva súbory s názvom index.html a style.css. Začnime s naším index.html kódom. index.html <!DOCTYPE html> <head> <title>Animovaný panel vyhľadávania</title> <link rel="stylesheet" href="style.css"> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="searchBox"> <input class="searchInput"type="text" name="" placeholder="Vyhľadať..."> <button class="searchButton" href="#"> <i class="material-icons"> search </i> </button> </div> </body> </html> V tomto súbore sme prepojili ikonu CDN, pretože použijeme ikonu vyhľadávania.Potom sme vytvorili základnú štruktúru pre náš vyhľadávací panel ako rodičovský „searchBox“, ktorý bude obsahovať všetky vyhľadávacie čiarové kódy. Vstupná značka sa používa na prevzatie vstupu od používateľa, je tiež pridané tlačidlo, v tlačidle používame ikonu používateľského rozhrania. Ako predvolený text sa na tlačidle zobrazí „Vyhľadávanie“. Náš HTML kód je hotový! Teraz vytvorte kód pre style.css. style.css :root{ --bgColor: #FFFFFF; --primaryColor: #2A3640; --secondaryColor: #FFFFFF; --txtColor: #2F3640; } V root sme definovali niektoré premenné na jednoduchú zmenu našich údajov,–bgColor: #FFFFFF; sa používa na nastavenie farby pozadia na bielu.–primaryColor: #2A3640; sa používa na nastavenie sivej farby vo vstupnom prvku a tlačidle.–secondaryColor: #FFFFFF; sa používa na nastavenie farby ikony vyhľadávania materiálu a po umiestnení kurzora myši ako pozadie tlačidla vyhľadávania.–txtColor: #2F3640; sa používa na nastavenie farby ikony vyhľadávania materiálu po umiestnení kurzora myši. body { background: var(--bgColor); } Nastavte farbu pozadia z premennej. .searchBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%,50%); background: #2f3640; height: 40px; border-radius: 40px; padding: 10px; } Pre zarovnanie na stred je position nastavená na absolute, top: 50 %;left: 50 %;transform: translate(-50%,50%); Tieto tri vlastnosti zarovnajú panel vyhľadávania na stred. .searchBox:hover{ box-shadow: 0px 0px 6px var(--primaryColor); } Tieň sa pridá aj vtedy, keď používateľ prejde myšou na panel vyhľadávania. .searchBox:hover > .searchInput { width: 240px; padding: 0 6px; } .searchBox:hover > .searchButton { background: var(--secondaryColor); color : var(--txtColor); } Pre zobrazenie vstupnej lišty po umiestnení kurzora myši na tlačidlo nastavíme šírku na 240px. A tiež zmeniť farbu tlačidla vyhľadávania po umiestnení kurzora myši, takže sme pridali vlastnosti pozadia a farby. .searchButton { color: var(--secondaryColor); float: right; width: 40px; height: 40px; border-radius: 50%; background: var(--primaryColor); display: flex; justify-content: center; align-items: center; transition: 0.4s; } secondaryColor sa pridá pre text a ikonu tlačidla vyhľadávania. Obsah je zarovnaný na stred, čas prechodu je nastavený na 0,4 s. .searchInput { border:none; background: none; outline:none; float:left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 40px; width: 0px; } Veľkosť písma je nastavená pre vstupné pole a prechod je tiež nastavený na 0,4 s. Výška riadku je nastavená na 40 pixelov, takže môže zobraziť medzeru. @media screen and (max-width: 620px) { .searchBox:hover > .searchInput { width: 150px; padding: 0 6px; } } Dúfam, že Vám tento článok pomohol a niečo nové ste sa naučili.The post Animované vyhľadávanie first appeared on Tvorba a správa webových stránok | Frontprog.sk.
Blog typ webovej stránky alebo on line časopisu , ktorý vám umožní publikovať články a rôzne aktuálne články, ktoré si návštevníci môžu prečítať a komentovať . Zobrazenie reklamy reklamy zobrazené na webových stránkach . Grafické reklamy môžu byť stati
prejsť na článokNovinky v B2B Rezerváku v administrácii vašeho CeSYSu 1) Vyhľadávanie zájazdov s priamymi letmi do destinácií Zásadné vylepšenie otvárajúce možnosť vyhľadávať v produktoch nemeckých a rakúskych…
prejsť na článokV poslednej dobe sa na webových stránkach začalo objavovať dynamické a animované menu, ktoré zmení veľkosť pri posúvaní obsahu nadol minimalizácia hlavnej navigácie, aby zostalo viac miesta pre samotný obsah. V tomto príklade si ukážeme, ako si môžete vy
Dôležitý výber slovíčok a plánovanie vhodných kľúčových slov Nájsť správne a vhodné kľúčové slová by mala byť jednou z priorít pri vytváraní online marketingovej stratégie. Optimalizovaná webová stránka s obsahom ktorý zodpovedá vašim kľúčovým slovám V
prejsť na článokBez preháňania sa dá povedať, že internetový svet je bannerovou reklamou doslova presýtený. Azda neexistuje ani jedna webová stránka, na ktorej by sa nenachádzali reklamné bannery. No ako je to s nimi v skutočnosti? Sú reklamné bannery naozaj účinné? Aké