CSS3-opetusohjelma Luo tyylikäs päälle / pois-painike
Painikkeen käyttäminen on toistaiseksi suosittu tapa olla yhteydessä sähköiseen tavaraan; kuten radio, TV, musiikkisoitin ja jopa älypuhelin, jossa on äänikomentotoiminto, tarvitsevat vielä vähintään yhden tai kaksi fyysistä painiketta.
Lisäksi tässä digitaalisessa aikakaudessa nappi on kehittynyt myös digitaalisessa muodossaan, mikä tekee siitä interaktiivisemman, dynaamisen ja todellisen helpon tehdä fyysiseen painikkeeseen verrattuna.
Niinpä tällä kertaa aiomme luoda liukas ja vuorovaikutteinen painike, joka perustuu tähän erinomaiseen muotoiluun Dribbbleissa vain CSS: n avulla.
No, vain aloita.
HTML
Aloitamme painikkeen asettamalla seuraavan merkinnän HTML-asiakirjaan. Se on todella yksinkertaista, painike perustuisi ankkurimerkkiin, meillä on myös jänneväli sen vieressä luodaan merkkivalo, ja sitten ne kääritään yhteen HTML5: n sisällä jakso tag.
& # XF011;
Tässä on, miten painike aluksi näyttää.
Basic-muotoilu
Tässä osassa alamme työskennellä tyylit.
Sovellamme ensin tummaa taustaa hienovaraisesta kuviosta kehon dokumenttiin ja keskitä jakso. Sitten poistamme myös katkoviivan ääriviivat kun : focus ja : aktiivinen linkki.
runko tausta: url ('images / micro_carbon.png'); osio marginaali: 150px auto 0; leveys: 75px; korkeus: 95px; asema: suhteellinen; text-align: center; : aktiivinen,: tarkennus ääriviiva: 0; Mukautetun fontin käyttäminen
Painikkeen kuvaketta käytettäessä käytetään Font Fontti -ominaisuutta mukautetun fontin sijaan. Tällöin kuvake on helposti tyyliltään kykenevä ja se voi skaalata tyylisivujen kautta.
Lataa fontti, tallenna fonttitiedostot (eot, woff, ttf ja svg) kirjasimet kansio ja aseta sitten seuraava koodi tyylitaulukkoon, jotta voit määrittää uuden kirjasintyypin.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") -muodossa ('eot'), url ("fonts / fontawesome-webfont.woff") -muodossa ('woff'), URL-osoitteessa ("fontit / fontawesome- webfont.ttf ") muoto ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") -muodossa ('svg'); font-weight: normaali; font-style: normaali; 
virtakuvake että tätä painiketta tarvitaan, on esitetty Unicode-numerossa F011; jos tarkastelet tarkemmin yllä olevaa HTML-merkintää, olemme asettaneet tämän numeerisen merkin & # XF011; ankkuritunnisteessa, mutta koska emme ole määrittäneet tapaa font-family painikkeen tyyliin kuvake ei ole vielä tehty oikein.
Lue lisää: Unicode ja HTML: Document Characters
Painikkeen muotoilu
Ensinnäkin meidän on määriteltävä tapa font-family painiketta varten.
Meidän painike on ympyrä, voimme saavuttaa ympyrän vaikutuksen käyttämällä border-säde ominaisuus ja määritä arvo vähintään puolella painikkeista leveys.
Koska käytämme kuvaketta varten fonttia, voimme helposti asettaa väri- ja lisää text-shadow myös tyylitaulukon kuvaketta.
Seuraavaksi luomme myös viivoitetun vaikutuksen painikkeelle. Tämä vaikutus on melko hankala. Ensinnäkin meidän on sovellettava taustaväri: rgb (83,87,93); painikkeen värin pohjalle lisätään enintään neljä kerrosta box-varjot.
font-family: "FontAwesome"; väri: rgb (37,37,37); teksti-varjo: 0px 1px 1px rgba (250,250,250,0,1); kirjasinkoko: 32pt; näyttö: lohko; asema: suhteellinen; teksti-koristelu: ei; taustaväri: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1. varjo * / 0px 7px 10px 0px rgb (17,17,17), / * 1. varjo * / lisäys 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3. varjo * / upotus 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. varjo * / leveys: 70px; korkeus: 70px; raja: 0; raja-säde: 35px; text-align: center; linjan korkeus: 79px;
Painikkeen ulkopuolella on myös suurempi ympyrä ja käytämme sitä :ennen pseudo-elementti sen sijaan, että lisätään ylimääräistä merkintää.
a: ennen sisältö: "; leveys: 80px; korkeus: 80px; näyttö: lohko; z-indeksi: -2; asema: absoluuttinen; taustaväri: rgb (26,27,29); vasen: -5px; alkuun: -2px; raja-säde: 40px; laatikko-varjo: 0px 1px 0px 0px rgba (250,250,250,0,1), upotettu 0px 1px 2px rgba (0, 0, 0, 0,5);
Lue lisää: CSS: ennen ja jälkeen pseudo-elementit (Hongkiat.com)
Merkkivalo
Painikkeen alla on pieni valo, joka osoittaa virran kytkemisen ja sammuttamisen. Alla sovellamme punaista valon väriä, koska teho on aluksi POIS, lisäämme myös box-varjo jäljitellä valon hohtava vaikutus.
a + span näyttö: lohko; leveys: 8px; korkeus: 8px; taustaväri: rgb (226,0,0); laatikko-varjo: 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); raja-säde: 4px; Tyhjennä molemmat; asema: absoluuttinen; pohja: 0; vasen: 42%;
Vaikutus
Tässä vaiheessa painikkeemme alkaa näyttää hyvältä, ja meidän on vain lisättävä siihen joitakin vaikutuksia, esimerkiksi kun painiketta napsautetaan, haluamme, että painike näyttää olevan painettuna ja painettuna.
Jotta saavutetaan vaikutus, ensimmäinen box-varjo painikkeessa nollautuu ja asento laskee hieman. Meidän on myös säädettävä muut kolme varjojen voimakkuutta hieman, jotta ne vastaavat painikkeen sijaintia.
a: aktiivinen box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1. varjo * / 0px 3px 7px 0px rgb (17,17,17), / * 2. varjo * / lisäys 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. varjo * / lisäys 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. varjo * / taustaväri: rgb (83,87,93); alkuun: 3px;
Lisäksi, kun painiketta on napsautettu, sen pitäisi pysyä painettuna ja kuvakkeen pitäisi "paistaa", jotta se osoittaa, että virta on päällä.
Tällaisen vaikutuksen saavuttamiseksi kohdistamme painikkeen käyttämällä :kohde näennäisluokka, muuta sitten kuvakkeen väriä valkoiseksi ja lisää a text-shadow myös valkoisella värillä.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), upotus 0px 1px 1px 0px rgba (250, 250, 250, .2) , upotetaan 0px -10px 35px 5px rgba (0, 0, 0, .5); taustaväri: rgb (83,87,93); alkuun: 3px; väri: #fff; teksti-varjo: 0px 0px 3px rgb (250,250,250);
Lue lisää: Käyttämällä: kohde näennäisluokka
Meidän on myös säädettävä box-varjo -näppäintä painikkeen ulkopuolella, seuraavasti.
a: aktiivinen: ennen, a: kohde: ennen alkuun: -5px; taustaväri: rgb (26,27,29); laatikko-varjo: 0px 1px 0px 0px rgba (250,250,250,0,1), upotettu 0px 1px 2px rgba (0, 0, 0, 0,5);
Merkkivalo muuttuu punaisesta vihreästä väristä korostamaan, että virta on jo päällä.
a: kohde + span laatikko-varjo: upotettu 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); taustaväri: rgb (135,187,83);
Siirtymävaihe
Lopuksi, jotta painikkeen vaikutus toimii sujuvasti, käytämme myös seuraavaa siirtymävaihetta.
Alla oleva katkaisu lisää nimenomaan siirtymän väri- omaisuutta ja text-shadow varten 350MS ankkurielementissä.
a siirtyminen: väri 350ms, teksti-varjo 350ms; -o-siirtymä: väri 350ms, teksti-varjo 350ms; -moz-siirtyminen: väri 350ms, teksti-varjo 350ms; -webkit-siirtymä: väri 350ms, teksti-varjo 350ms;
Tämä toinen katkaisu alla lisää siirtymän taustaväri ja box-varjo valoilmaisimen ominaisuus.
a: kohde + span siirtymä: taustaväri 350ms, laatikkovärinä 700ms; -o-siirtymä: taustaväri 350ms, box-shadow 700ms; -moz-siirtyminen: taustaväri 350ms, laatikko-varjo 700ms; -webkit-siirtymä: taustaväri 350ms, ruutu-varjo 700ms;
Lopullinen tulos
Olemme tulleet läpi kaikki tarvitsemamme tyylit, nyt voit nähdä lopullisen tuloksen sekä ladata lähdetiedoston alla olevista linkeistä.
- esittely
- Lataa lähde
Bonus: Miten se katkaistaan
Tässä tulee bonus. Jos olet kokeillut painiketta yllä olevasta demosta, olet huomannut, että painiketta voidaan napsauttaa vain kerran, jotta se voidaan kytkeä päälle.?.
Valitettavasti meidän on tehtävä se jQueryn kanssa, mutta se on todella yksinkertaista. Alla on kaikki tarvittava jQuery-koodi.
$ (asiakirja). jo (toiminto () $ ('# -painike'). Napsauta (toiminto () $ (tämä) .toggleClass ('on'););); Yllä oleva katkaisu lisää luokan ON ankkuriin, ja käytimme sitä toggleClass toiminto jQuerystä sen lisäämiseksi. Joten, kun #button napsautetaan, jQuery tarkistaa, onko luokan ON lisätty vai ei: kun se ei ole, jQuery lisää luokan, ja jos se on lisätty, jQuery poistaa luokan.
Huomautus: Älä unohda lisätä jQuery-kirjastoa.
Nyt meidän täytyy muuttaa tyyliä vähän. Vaihda kaikki :kohde pseudo-elementti kanssa .päällä luokanvalitsin seuraavasti:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), upotus 0px 1px 1px 0px rgba (250, 250, 250, .2) , upotetaan 0px -10px 35px 5px rgba (0, 0, 0, .5); taustaväri: rgb (83,87,93); alkuun: 3px; väri: #fff; teksti-varjo: 0px 0px 3px rgb (250,250,250); a: aktiivinen: ennen, a.on: ennen top: -5px; taustaväri: rgb (26,27,29); laatikko-varjo: 0px 1px 0px 0px rgba (250,250,250,0,1), upotettu 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: upotettu 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); taustaväri: rgb (135,187,83);
Lopuksi kokeile sitä selaimessa.
- esittely
- Lataa lähde
