Ahojte, dnes vytvoríme tlačidlo prepínania motívu. Prepínač sa používa na zobrazenie stavu zapnutia alebo vypnutia. Prepínacie tlačidlo umožňuje užívateľovi meniť nastavenie medzi dvoma stavmi. Tu sa naše prepínacie tlačidlo použije na zmenu témy v tmavom alebo svetlom režime. Na vytvorenie tohto tlačidla tu používame základné HTML a CSS. Môžeme začať. Tlačidlo prepínania motívu Ako som už spomenul, budeme používať základné HTML & CSS, takže tu vytvoríme dva súbory s názvom index.html a súbor style.css. Začnime s naším súborom index.html. index.html <!DOCTYPE html> <head> <title>Theme Toggle Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <label class="theme"> <span class="theme_toggle-wrap"> <input class="theme_toggle" type="checkbox" role="switch" name="theme" value="dark"> <span class="theme_fill"></span> <span class="theme_icon"> <span class="theme_icon-part"></span> <span class="theme_icon-part"></span> <span class="theme_icon-part"></span> <span class="theme_icon-part"></span> <span class="theme_icon-part"></span> <span class="theme_icon-part"></span> <span class="theme_icon-part"></span> <span class="theme_icon-part"></span> <span class="theme_icon-part"></span> </span> </span> </label> </body> </html> Vytvorili sme vstupné pole s typom začiarkavacieho políčka, pretože tu potrebujeme iba dva stavy zapnuté alebo vypnuté. Začiarkavacie políčko môže zobraziť iba tieto dva stavy, takže je to najlepšie pre náš návrh. Trieda „theme_fill“ sa používa na vytvorenie tvaru tlačidla. Trieda „theme_icon“ sa používa na vytvorenie našej ikony v nej. V ďalšom prvom poli sa značka používa na vytvorenie čierneho kruhu nášho slnka a ďalšie rozpätie sa používa na zobrazenie vonkajších pruhov slnka. style.css Tento náš kód style.css dlhý na vysvetlenie, takže vysvetlíme len dôležité časti nášho štýlu. * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bgWhite: #FFFFFF; --bgBlack: #000000; --transDur: 0.5s; --buttonBackColor1: #000000; --buttonBackColor2: #FFFFFF; --circleBlack: #000000; --circleWhite: #FFFFFF; --sunBlack: #000000; --moonWhite: #FFFFFF; font-size:5px; } html, body { } body, input { font: 5px Fredoka, sans-serif; } body { color: var(--bgWhite); height: 100vh; display: grid; place-items: center; } /* Default */ .theme { display: flex; align-items: center; -webkit-tap-highlight-color: transparent; } .theme_fill, .theme_icon { transition: transform var(--transDur) ease-in-out; } .theme_fill { background-color: var(--bgBlack); display: block; mix-blend-mode: difference; position: fixed; inset: 0; height: 100%; transform: translateX(-100%); } .theme_icon, .theme_toggle { z-index: 1; } .theme_icon, .theme_icon-part { position: absolute; } .theme_icon { display: block; top: 0.75em; left: 0.75em; width: 1.5em; height: 1.5em; } .theme_icon-part { border-radius: 50%; box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset; top: calc(50% - 0.5em); left: calc(50% - 0.5em); width: 1em; height: 1em; transition: box-shadow var(--transDur) ease-in-out, opacity var(--transDur) ease-in-out, transform var(--transDur) ease-in-out; transform: scale(0.5); } .theme_icon-part ~ .theme_icon-part { background-color: var(--sunBlack); border-radius: 0.05em; box-shadow: none; top: 50%; left: calc(50% - 0.05em); transform: rotate(0deg) translateY(0.5em); transform-origin: 50% 0; width: 0.1em; height: 0.2em; } .theme_icon-part:nth-child(1) { background-color: var(--sunBlack); box-shadow: inset 0px 0px 1px var(--sunBlack); } .theme_icon-part:nth-child(2) { transform: rotate(0deg) translateY(0.5em); } .theme_icon-part:nth-child(3) { transform: rotate(45deg) translateY(0.5em); } .theme_icon-part:nth-child(4) { transform: rotate(90deg) translateY(0.5em); } .theme_icon-part:nth-child(5) { transform: rotate(135deg) translateY(0.5em); } .theme_icon-part:nth-child(6) { transform: rotate(180deg) translateY(0.5em); } .theme_icon-part:nth-child(7) { transform: rotate(225deg) translateY(0.5em); } .theme_icon-part:nth-child(8) { transform: rotate(270deg) translateY(0.5em); } .theme_icon-part:nth-child(9) { transform: rotate(315deg) translateY(0.5em); } .theme_label, .theme_toggle, .theme_toggle-wrap { position: relative; } .theme_toggle, .theme_toggle:before { display: block; } .theme_toggle { background-color: var(--buttonBackColor1); border-radius: 25% / 50%; box-shadow: 0 0 0 0.125em var(--primaryT); padding: 0.25em; width: 6em; height: 3em; -webkit-appearance: none; appearance: none; transition: background-color var(--transDur) ease-in-out, box-shadow 0.15s ease-in-out, transform var(--transDur) ease-in-out; } .theme_toggle:before { background-color: var(--circleWhite); border-radius: 50%; content: ""; width: 2.5em; height: 2.5em; transition: background-color var(--transDur) ease-in-out, transform var(--transDur) ease-in-out; } .theme_toggle:focus { box-shadow: 0 0 0 0.125em var(--primary); outline: transparent; } /* Checked */ .theme_toggle:checked { background-color: var(--buttonBackColor2); } .theme_toggle:checked:before, .theme_toggle:checked ~ .theme_icon { transform: translateX(3em); } .theme_toggle:checked:before { background-color: var(--circleBlack); } .theme_toggle:checked ~ .theme_fill { transform: translateX(0); } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(1) { box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset; transform: scale(1); } .theme_toggle:checked ~ .theme_icon .theme_icon-part ~ .theme_icon-part { opacity: 0; } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(2) { transform: rotate(45deg) translateY(0.8em); } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(3) { transform: rotate(90deg) translateY(0.8em); } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(4) { transform: rotate(135deg) translateY(0.8em); } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(5) { transform: rotate(180deg) translateY(0.8em); } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(6) { transform: rotate(225deg) translateY(0.8em); } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(7) { transform: rotate(270deg) translateY(0.8em); } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(8) { transform: rotate(315deg) translateY(0.8em); } .theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(9) { transform: rotate(360deg) translateY(0.8em); } .theme_toggle-wrap { margin: 0 0.75em; } –bgWhite sa používa pre svetlú farbu pozadia témy a –bgBlack sa používa pre tmavú farbu pozadia témy. –transDur sa používa pre všetky doby prechodu. –buttonBackColor1 a –buttonBackColor2 sa používajú pre náš tvar tlačidla s rôznymi motívmi. –circleBlack a –circleWhite sa používa pre naše pozadie kontajnera ikon. –sunBlack sa používa na farbu slnka a –moonWhite sa používa na farbu mesiaca. .theme_icon-part:nth-child(2) { transform: rotate(0deg) translateY(0.5em); } .theme_icon-part:nth-child(3) { transform: rotate(45deg) translateY(0.5em); } .theme_icon-part:nth-child(4) { transform: rotate(90deg) translateY(0.5em); } .theme_icon-part:nth-child(5) { transform: rotate(135deg) translateY(0.5em); } .theme_icon-part:nth-child(6) { transform: rotate(180deg) translateY(0.5em); } .theme_icon-part:nth-child(7) { transform: rotate(225deg) translateY(0.5em); } .theme_icon-part:nth-child(8) { transform: rotate(270deg) translateY(0.5em); } .theme_icon-part:nth-child(9) { transform: rotate(315deg) translateY(0.5em); } Tento kód sa používa na vytvorenie prerušovaných čiar pre slnko. Dúfam, že sa vám tento návod páčil a naučili ste sa niečo nové. The post Tlačidlo prepínania motívu first appeared on Tvorba a správa webových stránok | Frontprog.sk.
Možno ste už v marketingovom žargóne zachytili spojenia ako CTA button, či výzva k akcii. Ide o jedno a to isté. Spravidla sa jedná o tlačidlo, prípadne obrázok, ktorý vyzýva návštevníka webu ku konkrétnemu kroku. Taký CTA button – tlačidlo - je mimoriadn
prejsť na článokExistujú viaceré spôsoby, ako aktualizovať Microsoft Office na počítači Mac. Ak máte povolené automatické aktualizácie, pravdepodobne balík nebudete musieť aktualizovať ručne. Ak si však chcete spravovať aktualizácie sami, prinášame vám kompletný návod, a
prejsť na článokKedže hudba má silu spojiť ľudí, Facebook s potešením oznamuje rozšírenie partnerstva so spoločnosťou Spotify. Vďaka tomuto kroku budeme odteraz zdieľať a počúvať hudobné skladby a epizódy podcastov už priamo na Facebooku. Nová funkcia uľahčí prepojenie z
prejsť na článokPredstavte si, že máte svoju zasadačku vybavenú Poly video konferenčným zariadením a počas nečinnosti systému (neprebieha žiaden video konferenčný hovor) sú štandardne obrazovky zatmavené, alebo ukazujú „No signal“ informáciu. Nebolo by zaujímavejšie púšť
prejsť na článokAhojte priatelia, v tomto návode vytvoríme animované tlačidlo ponuky. Tlačidlo ponuky je najdôležitejším prvkom webovej stránky a aplikácie. Tlačidlo Menu sa používa na zobrazenie navigačných odkazov. V našom dizajne, keď používateľ umiestni kurzor myš
prejsť na článok