CSS3 apmācība Izveidojiet gludu ieslēgšanas / izslēgšanas pogu
Pogas izmantošana līdz šim ir labākais veids, kā sazināties ar elektroniskām precēm; piemēram, radio, TV, mūzikas atskaņotājs un pat viedtālrunis, kuram ir balss komanda, vēl ir vismaz viena vai divas fiziskas pogas.
Turklāt šajā digitālajā laikmetā poga tā ir attīstījusies arī digitālajā formā, kas padara to par interaktīvāku, dinamiskāku un reālāku, salīdzinot ar fizisko pogu.
Tāpēc šoreiz mēs izveidosim slidens un interaktīvu pogu, kas balstās uz šo lielisko dizainu, izmantojot Dribbble, izmantojot tikai CSS.
Nu, pieņemsim tikai sākt.
HTML
Mēs sāksim pogu, ievietojot šādu HTML uzlīmi. Tas ir patiešām vienkāršs, poga būtu balstīta uz enkura tagu, mums ir arī span blakus tam, lai izveidotu indikatora gaismu, un tad tie tiek iesaiņoti HTML5 ietvaros sadaļā tag.
& # xF011;
Lūk, kā mūsu poga sākotnēji izskatās.
Pamatveidošana
Šajā sadaļā mēs sāksim strādāt pie Stili.
Vispirms mēs izmantojam šo tumšo fonu no smalka parauga uz ķermeņa dokumenta un centrējam sadaļā. Tad mēs arī noņemsim punktētu izklāsts uz : fokuss un : aktīvs saite.
ķermenis fons: url ('images / micro_carbon.png'); sadaļa margin: 150px auto 0; platums: 75px; augstums: 95px; pozīcija: relatīvais; teksta saskaņošana: centrs; : aktīvs,: fokuss kontūra: 0; Izmantojot pielāgoto fontu
Pogas ikonai mēs izmantosim pielāgotus fontus no Font Awesome, nevis attēlu. Tādā veidā ikona būs viegli stilīga un spējīga ar stilu.
Lejupielādējiet fontu, saglabājiet fontu failus (eot, woff, ttf un svg) fonti mapi, un pēc tam ievietojiet šādu kodu savā stillapā, lai definētu jaunu fontu grupu.
@ font-face font-family: "FontAwesome"; src: url ("fonti / fontawesome-webfont.eot"); src: url ("fonti / fontawesome-webfont.eot? #iefix") formāts ("eot"), url ("fonts / fontawesome-webfont.woff") formāts ("woff"), URL ("fonti / fontawesome- webfont.ttf ") formāts (" truetype "), url (" fonts / fontawesome-webfont.svg # FontAwesome ") formāts (" svg "); fontu svars: normāls; fonta stils: normāls; 
The jaudas ikona kas mums vajadzīgs šai pogai, ir attēlots Unicode numurā F011; ja jūs uzmanīgi paskatīsieties uz iepriekš redzamo HTML atzīmi, mēs esam šo skaitlisko rakstzīmi & # xF011; enkura tagā, bet tā kā mēs neesam definējuši pasūtījumu font-family pogas stilā ikona vēl ir jāpadara pareizi.
Papildu lasījums: Unikoda un HTML: dokumentu rakstzīmes
Pogas noformēšana
Pirmkārt, mums ir jādefinē ieradums font-family taustiņam.
Mūsu poga būs aplis, mēs varam sasniegt apļa efektu, izmantojot robežu rādiuss īpašumu un iestatiet vērtību vismaz pusi no pogas platums.
Tā kā mēs izmantojam ikonu, mēs varam viegli iestatīt krāsa un pievienot teksta ēna arī par ikonu stillapā.
Tālāk mēs arī izveidosim taustiņu, kas parādīs taustiņu. Šis efekts ir diezgan sarežģīts. Pirmkārt, mums ir jāpiemēro fona krāsa: rgb (83,87,93); pogas krāsu pamatam, tad mēs pievienojam līdz četriem slāņiem kastes ēnas.
font-family: "FontAwesome"; krāsa: rgb (37,37,37); teksta ēna: 0px 1px 1px rgba (250,250,250,0.1); fonta lielums: 32pt; displejs: bloks; pozīcija: relatīvais; teksta apdare: nav; fona krāsa: rgb (83,87,93); kastes ēna: 0px 3px 0px 0px rgb (34,34,34), / * 1. ēna * / 0px 7px 10px 0px rgb (17,17,17), / * 1. ēna * / ieliktnis 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3. ēna * / ieliktnis 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. ēna * / platums: 70px; augstums: 70px; robeža: 0; robežu rādiuss: 35px; teksta saskaņošana: centrs; līnijas augstums: 79px;
Pogas ārpusē ir arī lielāks aplis, un mēs to izmantosim : pirms pseidoelements tā vietā, lai pievienotu papildu atzīmi.
a: pirms saturs: "; platums: 80px; augstums: 80px; displejs: bloks; z-indekss: -2; pozīcija: absolūta; fona krāsa: rgb (26,27,29); pa kreisi: -5px; tops: -2px; robežu rādiuss: 40px; kastes ēna: 0px 1px 0px 0px rgba (250,250,250,0.1), ieliktnis 0px 1px 2px rgba (0, 0, 0, 0,5);
Papildu lasījums: CSS: pirms un pēc pseidoelementi (Hongkiat.com)
Indikatora gaisma
Zem pogas ir neliela gaisma, lai norādītu ieslēgšanas un izslēgšanas statusu. Zemāk mēs izmantojam sarkano krāsu, jo jauda sākotnēji ir izslēgta, mēs arī pievienojam kastes ēna atdarināt gaismas spīduma efektu.
a + span displejs: bloks; platums: 8px; augstums: 8px; fona krāsa: rgb (226,0,0); box-shadow: ieliktnis 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); robežu rādiuss: 4px; skaidrs: abi; pozīcija: absolūta; apakšā: 0; pa kreisi: 42%;
Efekts
Šajā brīdī mūsu poga sāk izskatīties labi, un mums tikai jāpievieno dažas sekas, piemēram, ja poga ir “noklikšķināta uz”, mēs vēlamies, lai poga izskatītos tā, ka tā tiek nospiesta un turēta.
Lai sasniegtu efektu, pirmais kastes ēna pogas tiks nulles un pozīcija tiks samazināta. Mums ir arī jāpielāgo pārējās trīs ēnu intensitātes, lai tās atbilstu pogas pozīcijai.
a: aktīvs box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1. ēna * / 0px 3px 7px 0px rgb (17,17,17), / * 2. ēna * / ieliktnis 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. ēna * / ieliktnis 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. ēna * / fona krāsa: rgb (83,87,93); tops: 3px;
Turklāt, tiklīdz poga ir noklikšķināta, tai jāturpina nospiest un ikonas "spīdēt", lai norādītu, ka barošana ir ieslēgta.
Lai sasniegtu šādu efektu, mēs mērķēsim pogu, izmantojot : Mērķis pseido klase, pēc tam nomainiet ikonas krāsu uz baltu un pievienojiet a teksta ēna ar baltu krāsu.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), ieliktnis 0px 1px 1px 0px rgba (250, 250, 250, .2) , ielikt 0px -10px 35px 5px rgba (0, 0, 0, .5); fona krāsa: rgb (83,87,93); tops: 3px; krāsa: #fff; teksta ēna: 0px 0px 3px rgb (250 250 250);
Papildu lasījums: Izmantojot: mērķi pseido klase
Mums ir arī jāpielāgo kastes ēna aplis, kas atrodas ārpus pogas, šādi.
a: aktīvs: pirms, a: mērķis: pirms augšā: -5px; fona krāsa: rgb (26,27,29); kastes ēna: 0px 1px 0px 0px rgba (250,250,250,0.1), ieliktnis 0px 1px 2px rgba (0, 0, 0, 0,5);
Gaismas indikators no noklusējuma sarkanās uz zaļu krāsu pagriezīsies, lai uzsvērtu, ka strāva jau ir ieslēgta.
a: target + span box-shadow: ieliktnis 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); fona krāsa: rgb (135,187,83);
Pārejas efekts
Visbeidzot, lai padarītu pogas efektu nevainojamu, mēs piemērosim arī šādu pārejas efektu.
Šis tālāk minētais fragments īpaši pievienos pāreju uz krāsa īpašums un teksta ēna par 350ms enkura elementā.
a pāreja: krāsa 350ms, teksta ēna 350ms; -o-pāreja: krāsa 350ms, teksta ēna 350ms; -moz-pāreja: krāsa 350ms, teksta ēna 350ms; -webkit pāreja: krāsa 350ms, teksta ēna 350ms;
Šajā otrajā fragmentā tiks pievienota pāreja uz fona krāsa un kastes ēna gaismas indikators.
a: mērķa + span pāreja: fona krāsa 350ms, kastes ēna 700ms; -o-pāreja: fona krāsa 350ms, kastes ēna 700ms; -moz-pāreja: fona krāsa 350ms, kastes ēna 700ms; -webkit pāreja: fona krāsa 350ms, kastes ēna 700ms;
Galīgais rezultāts
Mēs esam nonākuši cauri visiem nepieciešamajiem stiliem, tagad jūs varat redzēt tiešo rezultātu, kā arī lejupielādēt avota failu no tālāk norādītajām saitēm.
- Demo
- Lejupielādēt avotu
Bonuss: kā to izslēgt
Šeit nāk prēmija. Ja esat mēģinājis pogu no iepriekšminētās demonstrācijas, esat pamanījis, ka pogu var noklikšķināt tikai vienu reizi, lai to ieslēgtu, tāpēc kā to izslēgt?.
Diemžēl mums tas jādara ar jQuery, bet tas ir patiešām vienkāršs. Zemāk ir viss nepieciešamais jQuery kods.
$ (dokuments). jau (funkcija () $ ('# poga').) noklikšķiniet uz (funkcija () $ (this) .toggleClass ('on'););); Iepriekš minētajā fragmentā enkurā tiks pievienota klase ON, un mēs to izmantojām toggleClass funkcija no jQuery, lai to pievienotu. Tātad, kad # poga uzklikšķina uz, jQuery pārbaudīs, vai klase ON ir pievienota vai nav: kad tā nav, jQuery pievienos klasi, un, ja tas ir pievienots, jQuery noņems klasi.
Piezīme: Neaizmirstiet iekļaut jQuery bibliotēku.
Tagad mums nedaudz jāmaina stils. Vienkārši nomainiet visus : Mērķis pseidoelements Ar .ieslēgts klases selektoru:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), ieliktnis 0px 1px 1px 0px rgba (250, 250, 250, .2) , ielikt 0px -10px 35px 5px rgba (0, 0, 0, .5); fona krāsa: rgb (83,87,93); tops: 3px; krāsa: #fff; teksta ēna: 0px 0px 3px rgb (250 250 250); a: aktīvs: pirms, a.on: pirms top: -5px; fona krāsa: rgb (26,27,29); kastes ēna: 0px 1px 0px 0px rgba (250,250,250,0.1), ieliktnis 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: ieliktnis 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); fona krāsa: rgb (135,187,83);
Visbeidzot, mēģināsim to pārlūkprogrammā.
- Demo
- Lejupielādēt avotu
