CSS3 Tutorial Ustvarite eleganten gumb za vklop / izklop
Uporaba gumba je zaenkrat najprimernejši način za interakcijo z elektronskimi stvarmi; kot so radio, televizija, predvajalnik glasbe in celo pametni telefon, ki ima funkcijo glasovnega ukaza, še vedno potrebuje vsaj en ali dva fizična gumba.
Poleg tega v tej digitalni dobi gumb se je razvila tudi v digitalni obliki, zaradi česar je bolj interaktivna, dinamična in resnično enostavna za ustvarjanje, v primerjavi s fizičnim gumbom.
Torej, tokrat bomo ustvarili gladko in interaktivno tipko, ki temelji na tem odličnem oblikovanju v Dribbbleju, ki uporablja samo CSS.
No, začnimo.
HTML
Gumb bomo začeli s tem, da v HTML-dokument postavimo naslednjo oznako. To je res preprosto, gumb bi temeljil na sidrni oznaki, imamo tudi a razpon poleg njega ustvarite indikatorsko lučko, nato pa se zavijejo v HTML5 oddelek oznaka.
& # xF011;
Tukaj je, kako izgleda naš gumb na začetku.
Osnovno oblikovanje
V tem razdelku bomo začeli delati na Slogi.
Najprej nanesemo temno ozadje iz Subtilnega vzorca na dokument telesa in centriramo oddelek. Nato bomo odstranili tudi pikčasto oris na : fokus in : aktivno povezavo.
telo ozadje: url ('images / micro_carbon.png'); odsek margin: 150px auto 0; širina: 75px; višina: 95px; položaj: relativna; text-align: center; : aktivno,: izostritev oris: 0; Uporaba pisave po meri
Za ikono gumba bomo uporabili pisavo po meri iz programa Font Awesome in ne slike. Na ta način bo ikona zlahka oblikovana za slog in bo sposobna spreminjati velikost prek slogov.
Prenesite pisavo, shranite datoteke pisav (eot, woff, ttf in svg) v pisave nato vstavite naslednjo kodo v slogovno datoteko, da določite novo družino pisav.
@ font-face družina pisav: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); format src: url ("fonts / fontawesome-webfont.eot? #iefix") format ('eot'), format url ("fonts / fontawesome-webfont.woff") ("woff"), url ("pisave / fontawesome- webfont.ttf ") format (" truetype "), url (" fonts / fontawesome-webfont.svg # FontAwesome ") format ('svg'); font-weight: normalna; slog pisave: normalno; 
The ikona moči za ta gumb potrebujemo številko Unicode F011; če pozorno pogledate zgornji HTML označevalnik, smo vnesli ta numerični znak & # xF011; znotraj oznake sidra, vendar ker nismo definirali po meri družina pisav v slogu gumbov ikona še ni pravilno upodobljena.
Nadaljnje branje: Unicode in HTML: znaki dokumentov
Oblikovanje gumba
Najprej moramo opredeliti običaj družina pisav za gumb.
Naš gumb bo krog, lahko dosežemo učinek kroga z uporabo polmer meje in nastavite vrednost na vsaj polovico gumbov premer.
Ker uporabljamo pisavo za ikono, jo lahko enostavno nastavimo barve in dodajte text-shadow tudi za ikono na slogovni strani.
Nato bomo ustvarili tudi poševni učinek za gumb. Ta učinek je precej zapleten. Najprej moramo zaprositi barva ozadja: rgb (83,87,93); za barvo osnove gumba, nato dodamo do štiri plasti sence.
a družina pisav: "FontAwesome"; barva: rgb (37,37,37); text-shadow: 0px 1px 1px rgba (250.250.250,0,1); velikost pisave: 32pt; prikaz: blok; položaj: relativna; dekoracija besedila: nobena; barva ozadja: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1. senca * / 0px 7px 10px 0px rgb (17,17,17), / * 1. senca * / inset 0px 1px 1px 0px rgba (250) , 250, 250, .2), / * 3. senca * / vložek 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. senca * / širina: 70px; višina: 70px; meja: 0; obmejni polmer: 35px; text-align: center; line-height: 79px;
Na zunanji strani gumba je tudi večji krog in uporabljali bomo : prej psevdoelement namesto dodatnega dodatka.
a: pred vsebina: ""; širina: 80px; višina: 80px; prikaz: blok; z-indeks: -2; položaj: absolutno; barva ozadja: rgb (26,27,29); levo: -5px; vrh: -2px; obrobni polmer: 40px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5);
Nadaljnje branje: CSS: pred in po psevdoelementi (Hongkiat.com)
Indikatorska luč
Pod gumbom je majhna svetilka, ki označuje stanje vklopa in izklopa. Spodaj je za barvo svetlobe uporabljena rdeča barva, ker je moč prvotno izklopljena, dodamo pa tudi box-shadow posnemati svetlobni učinek svetlobe.
a + razpon prikaz: blok; širina: 8px; višina: 8px; barva ozadja: rgb (226,0,0); box-shadow: vložek 0px 1px 0px 0px rgba (250.250.250,0.5), 0px 0px 3px 2px rgba (226,0,0,0.5); obrobni polmer: 4px; jasno: oboje; položaj: absolutno; spodaj: 0; levo: 42%;
Učinek
V tem trenutku naš gumb začne izgledati dobro in samo moramo dodati nekaj učinkov, na primer, ko se gumb pritisne, želimo, da gumb izgleda, kot da je pritisnjen in zadržan.
Da bi dosegli učinek, prvi box-shadow v gumbu bo nastavljen na ničlo in položaj bo nekoliko zmanjšan. Tudi druge tri sence moramo prilagoditi intenzivnosti, da se ujemajo s položajem gumba.
a: aktivno box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1. senca * / 0px 3px 7px 0px rgb (17,17,17), / * 2. senca * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. senca * / inset 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. senca * / barva ozadja: rgb (83,87,93); vrh: 3px;
Poleg tega, ko je gumb kliknjen, mora ostati pritisnjen, ikona pa mora "zasvetiti", kar pomeni, da je napajanje vklopljeno..
Za dosego takšnega učinka bomo ciljali gumb z uporabo : target psevdo-razred, nato spremenite barvo ikone na belo in dodajte a text-shadow tudi z belo barvo.
a: tarča box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , inset 0px -10px 35px 5px rgba (0, 0, 0, .5); barva ozadja: rgb (83,87,93); vrh: 3px; barva: #fff; text-shadow: 0px 0px 3px rgb (250.250.250);
Nadaljnje branje: Uporaba: cilj psevdo-razred
Prav tako moramo prilagoditi box-shadow v krogu zunaj gumba, kot sledi.
a: aktivno: prej, a: cilj: pred top: -5px; barva ozadja: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5);
Svetlobni indikator se bo spremenil iz privzete rdeče v zeleno, da bi poudaril, da je napajanje že vklopljeno.
a: target + span box-shadow: inset 0px 1px 0px 0px rgba (250.250.250,0,5), 0px 0px 3px 2px rgba (135,187,83,0.5); barva ozadja: rgb (135,187,83);
Učinek prehoda
Nazadnje, da bi učinek gumba potekal gladko, bomo uporabili tudi naslednji prehodni učinek.
Ta odrezek bo izrecno dodal prehod na barve premoženje in text-shadow za 350ms v sidrnem elementu.
a prehod: barva 350ms, besedilna senca 350ms; -o-prehod: barva 350ms, text-shadow 350ms; -moz-prehod: barva 350ms, text-shadow 350ms; -webkit-prehod: barva 350ms, text-shadow 350ms;
Ta drugi del spodaj bo dodal prehod za Barva ozadja in box-shadow v svetlobnem indikatorju.
a: target + span prehod: barva ozadja 350ms, box-shadow 700ms; -o-prehod: barva ozadja 350ms, box-shadow 700ms; -moz-prehod: ozadje-350ms, box-shadow 700ms; -webkit-prehod: barva ozadja 350ms, box-shadow 700ms;
Končni rezultat
Prišli smo skozi vse sloge, ki jih potrebujemo, zdaj pa lahko vidite končni rezultat v živo in prenesete izvorno datoteko iz spodnjih povezav..
- Demo
- Prenesi vir
Bonus: Kako ga izklopiti
Prihaja bonus. Če ste preizkusili gumb iz zgornjega prikaza, ste opazili, da je gumb mogoče klikniti le enkrat, to pa je, da ga vklopite, tako da ga izklopimo?.
Na žalost moramo to storiti z jQuery, vendar je tudi zelo preprosto. Spodaj je celotna koda jQuery, ki jo potrebujemo.
$ (document) .ready (funkcija () $ ('# gumb')) kliknite (funkcija () $ (this) .toggleClass ('on'););); Zgornji odrezek bo dodal razred ON v sidro in uporabili smo toggleClass iz jQuery, da jo dodate. Torej, ko # gumb jQuery bo preveril, ali je bil razred dodan ali ne: če ni, bo jQuery dodal razred, in če je bil dodan, bo jQuery odstranil razred..
Opomba: Ne pozabite vključiti knjižnice jQuery.
Zdaj moramo malo spremeniti slog. Preprosto zamenjajte vse : target psevdoelement z .na izbirnik razreda, kot sledi:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , inset 0px -10px 35px 5px rgba (0, 0, 0, .5); barva ozadja: rgb (83,87,93); vrh: 3px; barva: #fff; text-shadow: 0px 0px 3px rgb (250.250.250); a: aktivno: pred, a.on: pred top: -5px; barva ozadja: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5); a.on + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); barva ozadja: rgb (135,187,83);
Nazadnje poskusimo v brskalniku.
- Demo
- Prenesi vir
