CSS3 Tutorial Napravite uglađeni gumb za uključivanje / isključivanje
Korištenje gumba je, do sada, preferirani način interakcije s elektroničkim stvarima; kao što su radio, TV, glazbeni player, pa čak i pametni telefon koji ima značajku glasovne naredbe još uvijek treba barem jedan ili dva fizička gumba.
Nadalje, u ovom digitalnom dobu, dugme je evoluirao iu svom digitalnom obliku, što ga čini interaktivnijim, dinamičnijim i stvarnim lakim za izradu, u usporedbi s fizičkim gumbom.
Dakle, ovaj put ćemo stvoriti gladak i interaktivni gumb koji se temelji na ovom izvrsnom dizajnu u Dribbbleu koristeći samo CSS.
Pa, počnimo.
HTML
Gumb ćemo započeti stavljanjem sljedeće oznake na naš HTML dokument. Vrlo je jednostavno, gumb bi se temeljio na oznaci sidra, također imamo pedalj pored njega da biste stvorili indikatorsko svjetlo, a zatim su zajedno omotani unutar HTML5 odjeljak označiti.
& # XF011;
Ovako izgleda naš gumb na početku.
Osnovni stil
U ovom odjeljku ćemo početi raditi na Stilovi.
Najprije nanosimo ovu tamnu pozadinu iz Suptilnog uzorka na dokument tijela i centriramo odjeljak. Zatim ćemo ukloniti i točkaste obris na :fokus i :aktivan veza.
tijelo pozadina: url ('images / micro_carbon.png'); odjeljak margin: 150px auto 0; širina: 75px; visina: 95px; pozicija: relativna; poravnavanje teksta: centar; : aktivno,: fokus outline: 0; Korištenje prilagođenog fonta
Za ikonu gumba koristit ćemo prilagođeni font iz programa Font Awesome, a ne slike. Na taj će način ikona biti lako oblikovana u stilu i moći će se mjeriti kroz stilske tablice.
Preuzmite font, pohranite datoteke fonta (eot, woff, ttf i svg) u fontovi , a zatim stavite sljedeći kod na svoj stilski list kako biste definirali novu obitelj fontova.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); format src: url ("fonts / fontawesome-webfont.eot? #iefix") format ('eot'), url ("fonts / fontawesome-webfont.woff") format ('woff'), url ("fonts / fontawesome- webfont.ttf ") format ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") format ('svg'); težina fonta: normalna; font-style: normal; 
ikona napajanja koji nam je potreban za ovaj gumb prikazan je u Unicode broju F011; ako pažljivo pogledate gore navedenu HTML oznaku, stavili smo taj numerički znak & # XF011; unutar oznake sidra, ali budući da nismo definirali običaj font-family u stilu gumba, ikona još nije ispravno prikazana.
Daljnje čitanje: Unicode i HTML: znakovi dokumenata
Stiliziranje gumba
Prije svega, moramo definirati običaj font-family za gumb.
Naš gumb će biti krug, možemo postići krug učinak pomoću granica-radijus i postavite vrijednost na barem polovicu gumba širina.
Budući da koristimo font za ikonu, lako možemo postaviti boja i dodajte text-shadow i za ikonu u stilu.
Zatim ćemo također stvoriti ukošeni efekt za gumb. Taj je učinak prilično nezgodan. Prvo, moramo se prijaviti pozadinska boja: rgb (83,87,93); za bazu boja gumba, dodamo do četiri sloja box-sjene.
font-family: "FontAwesome"; boja: rgb (37,37,37); tekst-sjena: 0px 1px 1px rgba (250,250,250,0.1); veličina fonta: 32pt; prikaz: blok; pozicija: relativna; text-decoration: none; pozadinska boja: rgb (83,87,93); kutija-sjena: 0px 3px 0px 0px rgb (34,34,34), / * 1. sjena * / 0px 7px 10px 0px rgb (17,17,17), / * 1.sjena * / umetak 0px 1px 1px 0px , 250, 250, .2), / * 3. sjena * / umetak 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. Sjena * / širina: 70px; visina: 70px; granica: 0; rubni polumjer: 35px; poravnavanje teksta: centar; visina linije: 79px;
U vanjskom dijelu gumba nalazi se i veći krug, a mi ćemo koristiti :prije pseudo elemenata umjesto da dodaje dodatnu oznaku.
a: prije sadržaja: ""; širina: 80px; visina: 80px; prikaz: blok; z-indeks: -2; položaj: apsolutni; pozadinska boja: rgb (26,27,29); lijevo: -5px; vrh: -2px; granični radijus: 40px; kutija-sjena: 0px 1px 0px 0px rgba (250,250,250,0.1), umetak 0px 1px 2px rgba (0, 0, 0, 0.5);
Daljnje čitanje: CSS: prije i poslije pseudo-elementi (Hongkiat.com)
Svjetlo indikatora
Ispod gumba nalazi se sićušno svjetlo za označavanje statusa uključenosti i isključenosti. U nastavku, primjenjujemo crvenu boju za boju svjetla jer je snaga u početku isključena, također dodajemo kutija-sjena da oponašaju svjetlosni efekt.
a + span display: block; širina: 8px; visina: 8px; pozadinska boja: rgb (226,0,0); box-shadow: umetak 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0,5); granični radijus: 4px; jasno: oboje; položaj: apsolutni; dno: 0; lijevo: 42%;
Učinak
U ovom trenutku naš gumb izgleda dobro i trebamo samo dodati neke učinke na njega, na primjer, kada se gumb klikne, želimo da gumb izgleda kao da je pritisnut i zadržan.
Za postizanje učinka, prvi kutija-sjena u gumbu će biti nuliran i položaj će se malo spustiti. Također moramo malo prilagoditi intenzitet ostalih triju sjena kako bi odgovarali položaju gumba.
a: aktivna box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1. sjena * / 0px 3px 7px 0px rgb (17,17,17), / * 2. sjena * / umetanje 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. sjena * / umetak 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. Sjena * / pozadinska boja: rgb (83,87,93); vrh: 3px;
Nadalje, kada se gumb klikne, trebao bi ostati pritisnut i ikona bi trebala "zasjati" kako bi naznačila da je napajanje uključeno.
Za postizanje takvog učinka ciljat ćemo gumb pomoću tipke :cilj pseudo-klase, zatim promijenite boju ikone u bijelu i dodajte a text-shadow s bijelom bojom.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), umetak 0px 1px 1px 0px rgba (250, 250, 250, .2) , umetanje 0px -10px 35px 5px rgba (0, 0, 0, .5); pozadinska boja: rgb (83,87,93); vrh: 3px; boja: #fff; tekst-sjena: 0px 0px 3px rgb (250,250,250);
Daljnje čitanje: Korištenje: target pseudo-klase
Također moramo prilagoditi kutija-sjena u krugu izvan gumba, kako slijedi.
a: aktivno: prije, a: cilj: prije vrh: -5px; pozadinska boja: rgb (26,27,29); kutija-sjena: 0px 1px 0px 0px rgba (250,250,250,0.1), umetak 0px 1px 2px rgba (0, 0, 0, 0.5);
Svjetlosni indikator će se pretvoriti iz standardne crvene u zelenu, kako bi naglasio da je napajanje već uključeno.
a: target + span box-shadow: umetak 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); pozadinska boja: rgb (135,187,83);
Učinak prijelaza
Na kraju, kako bi učinak gumba funkcionirao glatko, primijenit ćemo i sljedeći efekt prijelaza.
Ovaj isječak u nastavku posebno će dodati prijelaz na boja imovine i text-shadow za 350ms u elementu sidra.
a tranzicija: boja 350ms, tekst-sjena 350ms; -o-prijelaz: boja 350ms, tekst-sjena 350ms; -moz-prijelaz: boja 350ms, tekst-sjena 350ms; -webkit-prijelaz: boja 350ms, tekst-sjena 350ms;
Ovaj drugi isječak u nastavku će dodati prijelaz za boja pozadine i kutija-sjena svojstvo u svjetlosnom indikatoru.
a: target + span transition: pozadinska boja 350ms, box-shadow 700ms; -o-prijelaz: pozadinska boja 350ms, kutija-sjena 700ms; -moz-prijelaz: pozadinska boja 350ms, kutija-sjena 700ms; -webkit-prijelaz: pozadinska boja 350ms, kutija-sjena 700ms;
Konačni rezultat
Prošli smo kroz sve stilove koji su nam potrebni, a sada možete vidjeti konačni rezultat uživo, kao i preuzeti izvornu datoteku na dolje navedenim vezama..
- Demo
- Preuzimanje izvora
Bonus: kako ga isključiti
Ovdje dolazi bonus. Ako ste pokušali s gumbom iz gornje demonstracije, primijetili ste da se gumb može kliknuti samo jednom, a to je da ga uključite, pa kako ćemo ga isključiti?.
Nažalost, to moramo učiniti s jQuery-om, ali je i to vrlo jednostavno. U nastavku se nalazi cijeli jQuery kod koji nam je potreban.
$ (document) .ready (function () $ ('# button')) kliknite (function () $ (this) .toggleClass ('on'););); Gornji dio isječka dodaje klasu ON u sidro i koristili smo toggleClass funkcija iz jQuery da biste je dodali. Dakle, kada #dugme jQuery će provjeriti je li klasa ON dodana ili ne: kada nije, jQuery će dodati klasu, a ako je dodana, jQuery će ukloniti klasu..
Bilješka: Ne zaboravite uključiti jQuery knjižnicu.
Sada moramo malo promijeniti stil. Jednostavno zamijenite sve :cilj pseudo elemenata s .na izbornik razreda, kako slijedi:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), umetak 0px 1px 1px 0px rgba (250, 250, 250, .2) , umetanje 0px -10px 35px 5px rgba (0, 0, 0, .5); pozadinska boja: rgb (83,87,93); vrh: 3px; boja: #fff; tekst-sjena: 0px 0px 3px rgb (250,250,250); a: aktivno: prije, a.on: prije vrh: -5px; pozadinska boja: rgb (26,27,29); kutija-sjena: 0px 1px 0px 0px rgba (250,250,250,0.1), umetak 0px 1px 2px rgba (0, 0, 0, 0.5); a.on + span box-shadow: umetak 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); pozadinska boja: rgb (135,187,83);
Naposljetku, pokušajmo u pregledniku.
- Demo
- Preuzimanje izvora
