CSS3 Tutorial Vytvořte tlačítko Sleek On / Off
Použití tlačítka je doposud preferovaným způsobem interakce s elektronickým materiálem; rádia, televize, hudebního přehrávače a dokonce i smartphonu, který má funkci hlasového příkazu, stále potřebuje alespoň jedno nebo dvě fyzická tlačítka.
Kromě toho v tomto digitálním věku tlačítko také se vyvinula ve své digitální podobě, díky čemuž je ve srovnání s fyzickým tlačítkem interaktivnější, dynamičtější a reálnější.
Tentokrát tedy vytvoříme hladké a interaktivní tlačítko, které je založeno na tomto vynikajícím designu v aplikaci Dribbble pomocí pouze CSS.
Začněme.
HTML
Tlačítko začneme kliknutím na následující HTML kód. Je to opravdu jednoduché, tlačítko by bylo založeno na kotevním štítku, máme také rozpětí vedle něj vytvořit indikátorové světlo, a pak se zabalí do HTML5 sekce štítek.
& # xF011;
Zde je, jak naše tlačítko zpočátku vypadá.
Základní styling
V této sekci začneme pracovat na Styly.
Nejprve aplikujeme toto tmavé pozadí z jemného vzoru na dokument těla a vycentrujeme sekce. Pak také odstraníme tečkované obrys na :soustředit se a :aktivní odkaz.
body background: url ('images / micro_carbon.png'); sekce margin: 150px auto 0; šířka: 75px; výška: 95px; poloha: relativní; zarovnání textu: střed; : active,: focus obrys: 0; Použití vlastního písma
Pro ikonu tlačítka budeme používat vlastní písmo z písmo Awesome spíše než obrázek. Tímto způsobem bude ikona snadno styl-schopný a škálovatelný prostřednictvím šablony stylů.
Stáhněte si font, uložte soubory písem (eot, woff, ttf a svg) do fonty a poté umístěte následující kód do šablony stylů, abyste definovali novou rodinu písem.
@ font-face rodina fontů: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") formát ('eot'), url ("fonts / fontawesome-webfont.woff") formát ('woff'), url ("fonty / fontawesome- webfont.ttf ") format ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") formát ('svg'); font-weight: normální; styl písma: normální; 
ikona napájení které potřebujeme pro toto tlačítko je reprezentováno v Unicode čísle F011; Pokud se podíváte pozorně na značení HTML, dáme tento číselný znak & # xF011; uvnitř kotevního štítku, ale protože jsme nedefinovali zvyk font-family ve stylu tlačítka se ikona ještě nevykreslí správně.
Další čtení: Unicode a HTML: Znaky dokumentu
Styling tlačítka
Nejprve musíme definovat zvyk font-family pro tlačítko.
Naše tlačítko bude kruh, můžeme dosáhnout efektu kruhu pomocí poloměr ohraničení a nastavte hodnotu alespoň na polovině tlačítka šířka.
Vzhledem k tomu, že používáme písmo pro ikonu, můžeme snadno nastavit barva a přidejte textového stínu pro ikonu v šabloně stylů.
Dále vytvoříme zkosený efekt pro tlačítko. Tento efekt je poměrně složitý. Zaprvé, musíme použít barva pozadí: rgb (83,87,93); pro barevnou základnu tlačítka přidáme až čtyři vrstvy box-stíny.
a font-family: "FontAwesome"; barva: rgb (37,37,37); text-shadow: 0px 1px 1px rgba (250,250,250,0,1); velikost písma: 32pt; zobrazení: blok; poloha: relativní; text-decoration: žádný; barva pozadí: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd Shadow * / inset 0px 1px 1px 0px rgba (250 , 250, 250, 2), / * třetí stín * / vložený 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. Shadow * / width: 70px; výška: 70px; ohraničení: 0; hraniční hrana: 35px; zarovnání textu: střed; line-height: 79px;
Vnějšku tlačítka je také větší kruh a my budeme používat :před pseudo-element místo přidávání dalších značek.
a: before content: ""; šířka: 80px; výška: 80px; zobrazení: blok; z-index: -2; pozice: absolutní; barva pozadí: rgb (26,27,29); vlevo: -5px; top: -2px; hraniční rádius: 40px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), vloženo 0px 1px 2px rgba (0, 0, 0, 0,5);
Další čtení: CSS: před a po pseudo-elementy (Hongkiat.com)
Indikátor světla
Pod tlačítkem je malé světlo, které označuje stav Zapnuto a Vypnuto. Níže aplikujeme červenou barvu světla, protože výkon je zpočátku VYPNUTÝ, přidáváme také box-stín napodobit zábleskový efekt světla.
a + span display: block; šířka: 8px; výška: 8px; barva pozadí: rgb (226,0,0); box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); hraniční rádius: 4px; jasné: oba; pozice: absolutní; dole: 0; vlevo: 42%;
Efekt
V tomto okamžiku naše tlačítko začne vypadat dobře a my na něj stačí přidat jen některé efekty, například když na tlačítko kliknete, chceme, aby tlačítko vypadalo, že je stisknuto a podrženo..
K dosažení tohoto efektu první box-stín Tlačítko se vynuluje a pozice se trochu sníží. Také musíme upravit intenzitu ostatních tří stínů trochu tak, aby odpovídala pozici tlačítka.
a: active box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 3px 7px 0px rgb (17,17,17), / * druhý stín * / vložený 0px 1px 1px 0px rgba (250, 250, 250, 2), / * třetí stín * / vložený 0px -10px 35px 5px rgba (0, 0, 0, 0,5); / * 4. Shadow * / background-color: rgb (83,87,93); top: 3px;
Po klepnutí na tlačítko by mělo tlačítko zůstat stisknuté a ikona by měla svítit, což znamená, že napájení je zapnuto..
Pro dosažení takového efektu se zaměříme na tlačítko pomocí :cílová pseudo-třída, poté změňte barvu ikony na bílou a přidejte textového stínu s bílou barvou.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), vložka 0px 1px 1px 0px rgba (250, 250, 250, .2) , vložka 0px -10px 35px 5px rgba (0, 0, 0, .5); barva pozadí: rgb (83,87,93); top: 3px; barva: #ff; text-shadow: 0px 0px 3px rgb (250,250,250);
Další čtení: Použití: cíl pseudo-třída
Také musíme upravit box-stín v kruhu mimo tlačítko, následovně.
a: active: before, a: target: before top: -5px; barva pozadí: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), vloženo 0px 1px 2px rgba (0, 0, 0, 0,5);
Světelný indikátor se změní z výchozí červené na zelenou, aby se zdůraznilo, že napájení je již zapnuto.
a: cíl + rozpětí box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); barva pozadí: rgb (135,187,83);
Efekt přechodu
Nakonec, aby efekt tlačítka proběhl hladce, aplikujeme také následující přechodový efekt.
Tento úryvek níže bude specificky přidávat přechod na barva vlastnictví a textového stínu pro 350ms v kotevním prvku.
a přechod: barva 350ms, textový stín 350ms; -o-přechod: barva 350ms, textový stín 350ms; -moz-transition: barva 350ms, textový stín 350ms; -webkit-transition: barva 350ms, textový stín 350ms;
Níže uvedený druhý úryvek přidá přechod pro barva pozadí a box-stín vlastnost ve světelném indikátoru.
a: target + span transition: background-color 350ms, box-shadow 700ms; -o-přechod: barva pozadí 350ms, box-shadow 700ms; -moz-přechod: barva pozadí 350ms, box-shadow 700ms; -webkit-transition: barva pozadí 350ms, box-shadow 700ms;
Konečný výsledek
Prošli jsme všemi styly, které potřebujeme, nyní můžete vidět konečný výsledek a stáhnout zdrojový soubor z níže uvedených odkazů..
- Demo
- Stáhněte si zdroj
Bonus: Jak to vypnout
Zde přichází bonus. Pokud jste vyzkoušeli tlačítko z výše uvedeného dema, všimli jste si, že na toto tlačítko lze kliknout pouze jednou, což je zapnuto, takže jak ho vypneme?.
Bohužel to musíme udělat s jQuery, ale je to také velmi jednoduché. Níže je uveden veškerý kód jQuery, který potřebujeme.
$ (document) .ready (function () $ ('# button'). Klepněte na (function () $ (this) .toggleClass ('on'););); Výše uvedený úryvek přidá třídu ON do kotvy a my jsme použili toggleClass funkce z jQuery přidat. Takže, když #tlačítko je na něj kliknuto, jQuery zkontroluje, zda byla přidána třída ON nebo ne: když to není, jQuery přidá třídu a pokud byla přidána, jQuery tuto třídu odstraní.
Poznámka: Nezapomeňte zahrnout knihovnu jQuery.
Teď musíme trochu změnit Styl. Stačí nahradit všechny :cílová pseudo-element s .na přepínač třídy:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), vložka 0px 1px 1px 0px rgba (250, 250, 250, .2) , vložka 0px -10px 35px 5px rgba (0, 0, 0, .5); barva pozadí: rgb (83,87,93); top: 3px; barva: #ff; text-shadow: 0px 0px 3px rgb (250,250,250); a: active: before, a.on: before top: -5px; barva pozadí: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), vloženo 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + rozpětí box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); barva pozadí: rgb (135,187,83);
Nakonec to zkusíme v prohlížeči.
- Demo
- Stáhněte si zdroj
