CSS3 Tutorial Vytvorenie elegantného tlačidla On / Off
Použitie tlačidla je doposiaľ preferovaným spôsobom interakcie s elektronickým materiálom; ako je rozhlas, televízia, hudobný prehrávač a dokonca aj smartphone, ktorý má funkciu hlasových povelov, stále potrebuje aspoň jedno alebo dve fyzické tlačidlá.
Okrem toho v tomto digitálnom veku gombík sa vyvinulo aj vo svojej digitálnej podobe, čo je viac interaktívne, dynamické a reálne ľahké, v porovnaní s fyzickým tlačidlom.
Takže tentokrát budeme vytvárať hladké a interaktívne tlačidlo, ktoré je založené na tomto vynikajúcom dizajne v Dribbble pomocou len CSS.
No, poďme začať.
HTML
Toto tlačidlo začneme umiestnením nasledujúceho označenia do nášho dokumentu HTML. Je to naozaj jednoduché, tlačidlo by malo byť založené na kotevnej značke, ale aj rozpätie vedľa neho vytvoriť indikátor a potom sú zabalené do HTML5 časť štítok.
& # XF011;
Tu je spôsob, ako pôvodne vyzerá naše tlačidlo.
Základný štýl
V tejto časti začneme pracovať na štýly.
Najprv aplikujeme toto tmavé pozadie z jemného vzoru na dokument v tele a centráme časť. Taktiež odstránime bodkované obrys po : focus a : aktívny odkaz.
telo background: url ('images / micro_carbon.png'); sekcia margin: 150px auto 0; šírka: 75px; výška: 95px; pozícia: relatívna; text-align: center; : aktívny,: zaostrenie outline: 0; Použitie vlastného písma
Pre ikonu tlačidla budeme používať vlastné písmo z písma Awesome a nie obrázok. Týmto spôsobom bude ikona ľahko štýlovo prispôsobená a prispôsobiteľná prostredníctvom štýlu šablón.
Stiahnite si písmo, ukladajte súbory písiem (eot, woff, ttf a svg) do súboru fonty a potom zadajte nasledujúci kód do štýlu šablón, aby ste definovali novú rodinu písma.
@ písmo-tvár font-family: "FontAwesome"; src: url ("fonty / fontawesome-webfont.eot"); src: url ("fonty / fontawesome-webfont.eot? #iefix") formát ('eot'), url ("fonts / fontawesome-webfont.woff" webfont.ttf "formát (" truetype "), url (" fonty / fontawesome-webfont.svg # FontAwesome ") formát ('svg'); veľkosť písma: normálna; štýl písma: normálny; 
ikona napájania , ktoré potrebujeme pre toto tlačidlo, je zobrazené v čísle Unicode F011; ak sa pozriete pozorne na značku HTML vyššie, vložili sme tento číselný znak & # XF011; v rámci značky kotvy, ale keďže sme nezadefinovali vlastné font-family v štýle tlačidla sa ikona ešte má vykresliť správne.
Ďalšie čítanie: Unicode a HTML: znaky dokumentu
Stylovanie tlačidla
Najprv musíme definovať zvyk font-family pre tlačidlo.
Naše tlačidlo bude kruh, pomocou kružnice môžeme dosiahnuť efekt kruhu border-radius Vlastnosť a nastavte hodnotu aspoň na polovicu tlačidiel šírka.
Pretože používame písmo pre ikonu, môžeme ľahko nastaviť farba a pridajte text-shadow pre ikonu v šablóne so štýlmi.
Ďalej vytvoríme skosený efekt pre tlačidlo. Tento účinok je dosť zložitý. Po prvé, musíme požiadať farba pozadia: rgb (83,87,93); pre farebnú základňu tlačidla, pridáme až štyri vrstvy box tiene.
font-family: "FontAwesome"; farba: rgb (37,37,37); text-tieň: 0px 1px 1px rgba (250,250,250,0.1); veľkosť písma: 32pt; zobrazenie: blok; pozícia: relatívna; textová výzdoba: žiadne; farba pozadia: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1. Shadow * / 0px 7px 10px 0px rgb (17,17,17), / * 1.stránka * / inset 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3. Shadow * / vložiť 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. stín * / šírka: 70px; výška: 70px; hranica: 0; okraj: 35px; text-align: center; line-height: 79px;
Na vonkajšej strane tlačidla je tiež väčší okruh a budeme používať : before pseudo-prvok skôr ako pridaním ďalších značiek.
a: pred obsah: ""; šírka: 80px; výška: 80px; zobrazenie: blok; z-index: -2; poloha: absolútna; farba pozadia: rgb (26,27,29); vľavo: -5px; top: -2px; okraj polomeru: 40px; box-tieň: 0px 1px 0px 0px rgba (250,250,250,0,1), vložiť 0px 1px 2px rgba (0, 0, 0, 0,5);
Ďalšie čítanie: CSS: pred a po pseudo-elementy (Hongkiat.com)
Kontrolka
Pod tlačidlom je malé svetlo na označenie stavu zapnutia a vypnutia. Nižšie uvádzame červenú farbu svetla, pretože napájanie je pôvodne vypnuté, pridáme tiež box-shadow napodobniť žiarivý efekt svetla.
a + span zobrazenie: blok; šírka: 8px; výška: 8px; farba pozadia: rgb (226,0,0); box-shadow: vložiť 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0,5); polomer okrajov: 4px; jasné: obe; poloha: absolútna; dno: 0; vľavo: 42%;
Efekt
V tomto okamihu sa náš gombík začne dobre pozerať a potrebujeme na ňu pridávať iba niektoré efekty, napríklad keď kliknete na tlačidlo, chceme, aby toto tlačidlo vyzeralo ako stlačené a podržané.
Ak chcete dosiahnuť účinok, prvý box-shadow v tlačidle sa vynuluje a pozícia sa zníži trochu. Tiež je potrebné trochu upraviť intenzity troch tieňov tak, aby zodpovedali pozícii tlačidiel.
a: aktívny box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1. Shadow * / 0px 3px 7px 0px rgb (17,17,17), / * 2. Shadow * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. Shadow * / vložiť 0px-10px 35px 5px rgba (0, 0, 0, .5); / * 4. štýl * / farba pozadia: rgb (83,87,93); top: 3px;
Okrem toho po kliknutí na tlačidlo by malo ostať stlačené a ikona by mala "svietiť", aby signalizovala, že je napájanie zapnuté.
Aby sme dosiahli takýto efekt, budeme zacieliť na tlačidlo pomocou tlačidla : cieľová pseudo-class, potom zmeňte farbu ikony na bielu a pridajte ju text-shadow s bielou farbou.
a: cieľ 0 0px 0px 0px rpx (34,34,34), 0px 3px 7px 0px rgb (17,17,17), vložiť 0px 1px 1px 0px rgba (250, 250, 250, , vložiť 0px-10px 35px 5px rgba (0, 0, 0, .5); farba pozadia: rgb (83,87,93); top: 3px; farba: #fff; text-tieň: 0px 0px 3px rgb (250,250,250);
Ďalšie čítanie: Použitie: cieľ pseudo-class
Musíme tiež upraviť box-shadow v kruhu mimo tlačidla, ako je uvedené nižšie.
a: aktívna: pred, a: cieľ: pred top: -5px; farba pozadia: rgb (26,27,29); box-tieň: 0px 1px 0px 0px rgba (250,250,250,0,1), vložiť 0px 1px 2px rgba (0, 0, 0, 0,5);
Indikátor svetla sa zmení z predvolenej červenej na zelenú farbu, aby zdôraznil, že je napájanie už zapnuté.
a: cieľ + rozpätie box-shadow: vložiť 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); farba pozadia: rgb (135,187,83);
Prechodový efekt
A nakoniec, aby sa efekt tlačidla spustil hladko, použijeme aj nasledujúci prechodový efekt.
Tento úryvok nižšie špeciálne pridá prechod na farba majetok a text-shadow pre 350MS v prvku kotvy.
a prechod: farba 350 ms, textový tieň 350 ms; -o-prechod: farba 350 ms, textový tieň 350 ms; -moz-transition: farba 350ms, textový tieň 350ms; -webkit-transition: farba 350ms, textový tieň 350ms;
Tento druhý úryvok nižšie pridá prechod pre farba pozadia a box-shadow Vlastnosti v indikátore svetla.
a: cieľ + span prechod: farba pozadia 350 ms, box-tieň 700 ms; -o-prechod: farba pozadia 350 ms, box-tieň 700 ms; -moz-transition: farba pozadia 350 ms, box-tieň 700 ms; -webkit-transition: farba pozadia 350 ms, box-tieň 700 ms;
Konečný výsledok
Prišli sme cez všetky štýly, ktoré potrebujeme, teraz môžete vidieť konečný výsledok naživo, rovnako ako stiahnuť zdrojový súbor z nižšie uvedených odkazov.
- demonštrácie
- Stiahnuť zdroj
Bonus: Ako ho vypnúť
Tu prichádza bonus. Ak ste vyskúšali tlačidlo z vyššie uvedenej demo, všimli ste si, že tlačidlo je možné kliknúť iba raz, a to, aby ste ho zapli, tak ako to vypneme?.
Bohužiaľ to musíme urobiť s jQuery, ale je to taktiež jednoduché. Nižšie je uvedený celý kód jQuery, ktorý potrebujeme.
$ (dokument) .ready (funkcia () $ ('# tlačidlo'). Fragment uvedený vyššie pridá triedy ON do kotvy a použili sme ju toggleClass z jQuery ju pridajte. Takže, keď #button po kliknutí na tlačidlo jQuery skontroluje, či bola pridaná trieda ON alebo nie: ak to nie je, jQuery pridá triedu a ak bola pridaná, jQuery odstráni triedu.
Poznámka: Nezabudnite zahrnúť knižnicu jQuery.
Teraz musíme štýl trochu zmeniť. Jednoducho nahraďte všetky : cieľová pseudo-prvok s .na triedy selektora:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), vložiť 0px 1px 1px 0px rgba (250, 250, 250, .2) , vložiť 0px-10px 35px 5px rgba (0, 0, 0, .5); farba pozadia: rgb (83,87,93); top: 3px; farba: #fff; text-tieň: 0px 0px 3px rgb (250,250,250); a: aktívna: pred, a.on: pred top: -5px; farba pozadia: rgb (26,27,29); box-tieň: 0px 1px 0px 0px rgba (250,250,250,0,1), vložiť 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: vložiť 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); farba pozadia: rgb (135,187,83);
Nakoniec, skúsme to v prehliadači.
- demonštrácie
- Stiahnuť zdroj
