CSS3 pamoka Sukurkite „Sleek“ įjungimo / išjungimo mygtuką
Mygtuko naudojimas iki šiol yra tinkamiausias būdas bendrauti su elektronine medžiaga; pvz., radijas, televizorius, muzikos grotuvas ir net išmanusis telefonas, turintis balso komandų funkciją, vis tiek turi bent vieną ar du fizinius mygtukus.
Be to, šiame skaitmeniniame amžiuje mygtukas taip pat pasikeitė savo skaitmenine forma, todėl jis yra interaktyvesnis, dinamiškesnis ir realesnis, palyginti su fiziniu mygtuku.
Taigi, šį kartą ketiname sukurti slidų ir interaktyvų mygtuką, kuris grindžiamas puikiu Dribbble dizainu, naudojant tik CSS.
Na, pradėkime.
HTML
Pradėsime mygtuką paspaudę šį žymėjimą ant HTML dokumento. Tai tikrai paprasta, mygtukas būtų pagrįstas ankeriniu žyma, taip pat turime span šalia jo sukurti indikatoriaus lemputę ir tada jie yra suvynioti į HTML5 skyrius žyma.
& # xF011;
Štai kaip iš pradžių atrodo mūsų mygtukas.
Pagrindinis stilius
Šiame skyriuje pradėsime darbą Stiliai.
Pirmiausia taikome šį tamsią foną iš subtilaus modelio ant kūno dokumento ir centruokite skyrius. Tada taip pat pašalinsime punktyrą kontūras ant : dėmesys ir : aktyvus nuorodą.
kūnas fonas: url ('images / micro_carbon.png'); sekcija margin: 150px auto 0; plotis: 75px; aukštis: 95px; pozicija: santykinis; teksto derinimas: centras; : aktyvus,: fokusavimas kontūras: 0; Naudojant pasirinktinį šriftą
Mygtuko piktogramai naudosime pasirinktinį šriftą iš „Font Awesome“, o ne vaizdą. Tokiu būdu piktograma bus lengvai stiliaus ir gali būti pritaikyta stiliaus lape.
Atsisiųskite šriftą, išsaugokite šriftų failus (eot, woff, ttf ir svg) šriftai tada įdėkite šį kodą į stilių lentelę, kad nustatytumėte naują šriftų šeimą.
@ šrifto-veido font-family: „FontAwesome“; src: url („šriftai / fontawesome-webfont.eot“); src: URL („šriftai / fontawesome-webfont.eot? #iefix“) formatas („eot“), URL („šriftai / fontawesome-webfont.woff“) formatas („Woff“), URL („šriftai / fontawesome- webfont.ttf ") formatas (" truetype "), URL (" fonts / fontawesome-webfont.svg # FontAwesome ") formatas (" svg "); šrifto svoris: normalus; šrifto stilius: normalus; 
The maitinimo piktograma kad mums reikia šio mygtuko, yra rodomas Unicode numeriu F011; jei atidžiai matote aukščiau esantį HTML žymėjimą, šį skaitinį simbolį įdėjome & # xF011; ankerinio žyma, bet kadangi mes nenustatėme papročio šrifto šeima mygtuko stiliaus piktograma dar turi būti pateikta teisingai.
Papildoma literatūra: Unikodas ir HTML: dokumento simboliai
Mygtuko stilius
Visų pirma turime apibrėžti papročius šrifto šeima mygtuką.
Mūsų mygtukas bus apskritimas, mes galime pasiekti apskritimo efektą naudojant pasienio spindulys nuosavybės ir nustatykite bent pusę mygtuko vertės plotis.
Kadangi mes naudojame piktogramos šriftą, mes galime lengvai nustatyti spalva ir pridėkite teksto šešėlis taip pat piktogramą stiliaus lape.
Be to, mygtukui taip pat bus sukurtas išlenktas efektas. Šis poveikis yra gana sudėtingas. Pirma, turime kreiptis fono spalva: rgb (83,87,93); mygtuko spalvos pagrindui, tada mes pridedame iki keturių sluoksnių dėžutės šešėliai.
font-family: „FontAwesome“; spalva: rgb (37,37,37); teksto šešėlis: 0px 1px 1px rgba (250,250,250,0.1); šrifto dydis: 32pt; ekranas: blokas; pozicija: santykinis; teksto apdaila: nėra; fono spalva: rgb (83,87,93); dėžutės šešėlis: 0px 3px 0px 0px rgb (34,34,34), / * 1 šešėlis * / 0px 7px 10px 0px rgb (17,17,17), / * 1-as šešėlis * / įdėklas 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3. šešėlis * / įdėklas 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. šešėlis * / plotis: 70px; aukštis: 70px; siena: 0; pasienio spindulys: 35px; teksto derinimas: centras; linijos aukštis: 79px;
Be to, mygtuko išorėje yra didesnis apskritimas ir mes naudosime : anksčiau pseudo elementas už jį, o ne pridėti papildomą žymę.
a: prieš content: ""; plotis: 80px; aukštis: 80 pikselių; ekranas: blokas; z-indeksas: -2; pozicija: absoliutus; fono spalva: rgb (26,27,29); kairėje: -5px; viršuje: -2px; pasienio spindulys: 40px; dėžutės šešėlis: 0px 1px 0px 0px rgba (250,250,250,0.1), įdėklas 0px 1px 2px rgba (0, 0, 0, 0,5);
Papildoma literatūra: CSS: prieš ir: po pseudo elementai (Hongkiat.com)
Indikatoriaus lemputė
Po mygtuku yra maža šviesa, skirta „Power On“ ir „Off“ būsenai nustatyti. Žemiau pateikiame raudonos spalvos šviesos spalvą, nes galia yra išjungta, taip pat pridedame langelis-šešėlis imituoti šviesos šviesos efektą.
a + span ekranas: blokas; plotis: 8px; aukštis: 8px; fono spalva: rgb (226,0,0); dėžutės šešėlis: įdėklas 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); pasienio spindulys: 4px; aišku: abu; pozicija: absoliutus; apačioje: 0; kairėje: 42%;
Efektas
Šiuo metu mūsų mygtukas pradeda ieškoti gerai ir mums reikia tik šiek tiek padidinti jo poveikį, pvz., Kai mygtukas paspaudžiamas, norime, kad mygtukas atrodytų, kaip jis nuspaudžiamas ir laikomas.
Kad pasiektumėte efektą, pirmoji langelis-šešėlis mygtuke bus nulinis, o padėtis bus šiek tiek sumažinta. Mes taip pat turime šiek tiek sureguliuoti kitus tris šešėlių intensyvumus, kad atitiktų mygtuko padėtį.
a: active box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1 šešėlis * / 0px 3px 7px 0px rgb (17,17,17), / * 2 šešėlis * / intarpas 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3 šešėlis * / įdėklas 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. šešėlis * / fono spalva: rgb (83,87,93); viršuje: 3px;
Be to, kai paspaudžiamas mygtukas, jis turėtų likti nuspaustas ir piktograma turėtų „švyti“, kad būtų nurodyta, kad maitinimas įjungtas.
Kad pasiektume tokį efektą, taikysime mygtuką mygtuku : tikslas pseudo klasė, tada pakeiskite piktogramos spalvą į baltą ir pridėkite a teksto šešėlis su balta spalva.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), įdėjimas 0px 1px 1px 0px rgba (250, 250, 250, .2) , įterpti 0px -10px 35px 5px rgba (0, 0, 0, .5); fono spalva: rgb (83,87,93); viršuje: 3px; spalva: #fff; teksto šešėlis: 0px 0px 3px rgb (250,250,250);
Papildoma literatūra: Naudojant: taikinį pseudo klasė
Taip pat turime koreguoti langelis-šešėlis apačioje esančiame apskritime, kaip nurodyta toliau.
a: aktyvus: prieš: a: taikinys: prieš viršus: -5px; fono spalva: rgb (26,27,29); dėžutės šešėlis: 0px 1px 0px 0px rgba (250,250,250,0.1), įdėklas 0px 1px 2px rgba (0, 0, 0, 0,5);
Šviesos indikatorius pasuks nuo numatytojo raudonos spalvos iki žalios spalvos, kad pabrėžtumėte, jog maitinimas jau įjungtas.
a: target + span box-shadow: įdėklas 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); fono spalva: rgb (135,187,83);
Pereinamasis poveikis
Galiausiai, norint, kad mygtuko efektas būtų sklandus, taip pat taikysime šį pereinamąjį efektą.
Toliau pateikiamas fragmentas konkrečiai prideda perėjimą prie spalva nuosavybė ir teksto šešėlis dėl 350ms į inkarų elementą.
a perėjimas: spalva 350ms, teksto šešėlis 350ms; -o-perėjimas: spalva 350ms, teksto šešėlis 350ms; -moz-perėjimas: spalva 350ms, teksto šešėlis 350ms; -webkit perėjimas: spalva 350ms, teksto šešėlis 350ms;
Šis antrasis fragmentas, kuris bus pridėtas, bus pridėtas fono spalva ir langelis-šešėlis šviesos indikatoriuje.
a: taikinys + span perėjimas: fono spalva 350ms, dėžutės šešėlis 700ms; -o-perėjimas: fono spalva 350ms, dėžutės šešėlis 700ms; -moz-perėjimas: fono spalva 350ms, dėžutės šešėlis 700ms; -webkit perėjimas: fono spalva 350ms, dėžutės šešėlis 700ms;
Galutinis rezultatas
Mes pasiekėme visus reikiamus stilius, dabar jūs galite pamatyti galutinį rezultatą ir atsisiųsti šaltinio failą iš toliau pateiktų nuorodų.
- Demo
- Atsisiųsti šaltinį
Premija: kaip jį išjungti
Čia ateina premija. Jei bandėte mygtuką iš aukščiau pateikto demonstravimo, pastebėjote, kad mygtuką galima spustelėti tik vieną kartą, kad jį įjungtumėte, taigi kaip jį išjungti?.
Deja, mes turime tai padaryti su jQuery, bet tai taip pat labai paprasta. Žemiau yra visi mums reikalingi jQuery kodai.
$ (dokumentas). jau (funkcija () $ („# mygtukas“).) spustelėkite (funkcija () $ (tai) .toggleClass („įjungta“);););
Pirmiau pateiktame fragmente pridedama inkaro klasė, ir mes naudojome toggleClass jQuery funkcija ją pridėti. Taigi, kai # mygtukas spustelėję, jQuery patikrins, ar įjungta klasė ON, ar ne: kai tai nėra, jQuery prideda klasę ir, jei ji bus pridėta, jQuery pašalins klasę.
Pastaba: Nepamirškite įtraukti jQuery bibliotekos.
Dabar turime šiek tiek pakeisti stilių. Tiesiog pakeiskite visus : tikslas pseudo elementas su .įjungta klasės selektorius:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), įdėklas 0px 1px 1px 0px rgba (250, 250, 250, .2) , įterpti 0px -10px 35px 5px rgba (0, 0, 0, .5); fono spalva: rgb (83,87,93); viršuje: 3px; spalva: #fff; teksto šešėlis: 0px 0px 3px rgb (250,250,250); a: aktyvus: prieš, a.on: prieš top: -5px; fono spalva: rgb (26,27,29); dėžutės šešėlis: 0px 1px 0px 0px rgba (250,250,250,0.1), įdėklas 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: įdėklas 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); fono spalva: rgb (135,187,83);
Galiausiai, išbandykime naršyklę.
- Demo
- Atsisiųsti šaltinį
