CSS3 õpetus Loo klanitud sisse / välja nupule
Nupu kasutamine on siiani eelistatud viis elektrooniliste asjadega suhelda; nagu raadio, TV, muusikapleier ja isegi nutitelefon, millel on häälkäskluse funktsioon, vajavad veel vähemalt ühte või kahte füüsilist nuppu.
Lisaks sellele digitaalsel ajastul on nuppu on arenenud ka oma digitaalsel kujul, mis muudab selle füüsilise nupuga võrreldes interaktiivsemaks, dünaamilisemaks ja reaalsemaks.
Niisiis, seekord loome me slicki ja interaktiivse nupu, mis põhineb Dribbble'i suurepärasel disainil, kasutades ainult CSS-i.
Noh, alustame lihtsalt.
HTML
Alustame nuppu, asetades HTML-dokumendile järgmise märgistuse. See on tõesti lihtne, nupp põhineks ankrumärgil, meil on ka a span selle kõrval, et luua indikaatortuli, ja seejärel pakitakse need HTML5-sse lõik silt.
& # xF011;
Siin on, kuidas meie nupp algselt välja näeb.
Põhiline stiil
Selles osas alustame tööd Stiilid.
Kõigepealt rakendame seda pimedat tausta keha dokumendil peenest mustrist ja keskele lõik. Seejärel eemaldame ka punktiir ülevaade peale : fookus ja : aktiivne link.
keha taust: url ('images / micro_carbon.png'); sektsioon marginaal: 150px auto 0; laius: 75px; kõrgus: 95x; positsioon: suhteline; teksti joondamine: keskus; : aktiivne:: fookus kontuur: 0; Kohandatud fondi kasutamine
Nupu ikooni puhul kasutame fonti Awesome'st kohandatud pildi asemel kujutist. Sel moel on ikoon lihtsalt stiilivõimeline ja stiilitabeli kaudu võimeline.
Laadige font alla, salvestage fondifailid (eot, woff, ttf ja svg) fonte seejärel asetage oma stiilile järgmine kood uue fontide perekonna määratlemiseks.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") vorming ('eot'), url ("fonts / fontawesome-webfont.woff") formaat ('woff'), url ("fonts / fontawesome- webfont.ttf ") formaadis ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") formaat ('svg'); fondi kaal: normaalne; font-style: normaalne; 
The võimsuse ikoon seda nuppu vajame Unicode'i numbris F011; kui vaatate ülaltoodud HTML-märgistust tähelepanelikult, oleme selle numbrimärgi sisestanud & # xF011; ankurmärgis, kuid kuna me pole kohandatud font-pere nupu stiilis on ikoon ikka veel korrektselt muudetud.
Lisalugemist: Unicode ja HTML: dokumendimärgid
Nupu kujundamine
Kõigepealt peame määratlema tava font-pere nupule.
Meie nupp on ring, me saame ringi efekti saavutada kasutades raadius omadus ja määrake väärtus vähemalt poolele nupule laius.
Kuna kasutame ikooni jaoks fonti, siis saame selle lihtsalt seadistada värv ja lisa teksti vari ka stiililehel olevale ikoonile.
Seejärel luuakse nupule ka kaldjooneline efekt. See efekt on üsna keeruline. Esiteks peame rakendama taustavärv: rgb (83,87,93); nupu värvibaasi jaoks lisame kuni neli kihti kasti varjud.
font-family: "FontAwesome"; värv: rgb (37,37,37); teksti-vari: 0px 1px 1px rgba (250,250,250,0.1); fondi suurus: 32pt; kuva: plokk; positsioon: suhteline; teksti kaunistus: mitte; taustavärv: rgb (83,87,93); karp-vari: 0px 3px 0px 0px rgb (34,34,34), / * 1. vari * / 0px 7px 10px 0px rgb (17,17,17), / * 1. vari * / sisend 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3. vari * / sisestus 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. vari * / laius: 70px; kõrgus: 70px; piir: 0; raadius: 35x; teksti joondamine: keskus; rea kõrgus: 79px;
Nupu välisküljel on ka suurem ring ja me kasutame seda : enne pseudoelement selle asemel, et lisada täiendavat märgistust.
a: enne sisu: "; laius: 80 px; kõrgus: 80 px; kuva: plokk; z-indeks: -2; positsioon: absoluutne; taustavärv: rgb (26,27,29); vasakule: -5px; top: -2px; raadius: 40px; karp-vari: 0px 1px 0px 0px rgba (250,250,250,0.1), sisend 0px 1px 2px rgba (0, 0, 0, 0,5);
Lisalugemist: CSS: enne ja pärast pseudoelemendid (Hongkiat.com)
Suunatuli
Nupu all on väike valgus, mis tähistab toite ja väljalülitamise olekut. Allpool rakendame valguse värvi jaoks punast värvi, sest võimsus on esialgu välja lülitatud, lisame ka kast-vari imiteerida valgustugevuse mõju.
a + span kuva: plokk; laius: 8x; kõrgus: 8x; taustavärv: rgb (226,0,0); karp-vari: sisend 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); raadius: 4x; selge: mõlemad; positsioon: absoluutne; põhja: 0; vasakule: 42%;
Mõju
Sel hetkel hakkab meie nupp hästi nägema ja me peame sellele lisama mõningaid mõjusid, näiteks kui klõpsatakse nupul, siis tahame, et see nupp näeks välja nagu seda vajutatakse ja hoitakse all.
Efekti saavutamiseks, esimene kast-vari nupp nullitakse ja positsioon langetatakse natuke. Samuti peame kohandama ülejäänud kolm varju intensiivsust veidi, et see vastaks nupu positsioonile.
a: aktiivne box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1. vari * / 0px 3px 7px 0px rgb (17,17,17), / * 2. vari * / sisend 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. vari * / sisestus 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. vari * / taustavärv: rgb (83,87,93); top: 3px;
Peale selle, kui nupp on klõpsatud, peaks see jääma allapoole ja ikoon peaks „paistma”, et näidata, et toide on sisse lülitatud.
Sellise efekti saavutamiseks suuname nupu : sihtmärk pseudo-klass, seejärel muutke ikooni värvi valge ja lisage a teksti vari ka valge värviga.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), sisend 0px 1px 1px 0px rgba (250, 250, 250, .2) , sisestage 0px -10px 35px 5px rgba (0, 0, 0, .5); taustavärv: rgb (83,87,93); top: 3px; värv: #fff; teksti-vari: 0px 0px 3px rgb (250,250,250);
Lisalugemist: Kasutades: sihtmärki pseudo-klass
Samuti peame seda kohandama kast-vari ringist väljaspool nuppu, järgmiselt.
a: aktiivne: enne, a: sihtmärk: enne top: -5px; taustavärv: rgb (26,27,29); karp-vari: 0px 1px 0px 0px rgba (250,250,250,0.1), sisend 0px 1px 2px rgba (0, 0, 0, 0,5);
Valgusindikaator lülitub vaikevärvilt roheliseks, et rõhutada, et toide on juba sisse lülitatud.
a: target + span box-shadow: sisend 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); taustavärv: rgb (135,187,83);
Ülemineku efekt
Lõpuks rakendame nupu efekti sujuvaks muutmiseks ka järgmist üleminekuefekti.
See allpool olev väljavõte lisab konkreetselt ülemineku värv vara ja teksti vari jaoks 350 ms ankurelemendis.
a üleminek: värvus 350ms, teksti vari 350ms; -o-üleminek: värvi 350ms, teksti varju 350ms; -moz-üleminek: värvi 350ms, teksti varju 350ms; -webkit-üleminek: värvus 350ms, teksti vari 350ms;
Järgmine allpool olev väljaanne lisab ülemineku taustavärv ja kast-vari valguse indikaator.
a: sihtmärk + span üleminek: taustavärv 350ms, kasti vari 700ms; -o-üleminek: taustavärv 350ms, box-shadow 700ms; -moz-üleminek: taustavärv 350ms, box-shadow 700ms; -webkit-üleminek: taustavärv 350ms, box-shadow 700ms;
Lõplik tulemus
Oleme jõudnud läbi kõigi vajalike stiilide, nüüd saate näha lõpptulemust ning allalaadida allikafaili allolevatest linkidest.
- Demo
- Allalaadimise allikas
Boonus: kuidas seda välja lülitada
Siin tuleb boonus. Kui olete proovinud ülaltoodud demo nupust, olete märganud, et nuppu saab klõpsata ainult üks kord, see on sisse lülitatud, nii et kuidas see välja lülitada?.
Kahjuks peame seda tegema jQueryga, kuid see on ka väga lihtne. Allpool on kõik vajalikud jQuery koodid.
$ (dokument). jau (funktsioon () $ ('# nupp'). Klõpsake (funktsioon () $ (see) .toggleClass ('on'););); Ülaltoodud väljavõte lisab ankrusse klassi ON ja me kasutasime seda toggleClass funktsiooni lisamiseks. Niisiis, millal # nupp klõpsatakse, jQuery kontrollib, kas klass ON on lisatud või mitte: kui see ei ole, lisab jQuery klassi ja kui see on lisatud, eemaldab jQuery klassi.
Märge: Ärge unustage lisada jQuery raamatukogu.
Nüüd peame stiili veidi muutma. Lihtsalt asenda kõik : sihtmärk pseudoelement koos .edasi klassi valija:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), sisend 0px 1px 1px 0px rgba (250, 250, 250, .2) , sisestage 0px -10px 35px 5px rgba (0, 0, 0, .5); taustavärv: rgb (83,87,93); top: 3px; värv: #fff; teksti-vari: 0px 0px 3px rgb (250,250,250); a: aktiivne: enne, a.on: enne top: -5px; taustavärv: rgb (26,27,29); karp-vari: 0px 1px 0px 0px rgba (250,250,250,0.1), sisend 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: sisend 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); taustavärv: rgb (135,187,83);
Lõpuks proovige seda brauseris.
- Demo
- Allalaadimise allikas
