Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Kratki Savjet: Lagani CSS3 Checkbox i Radio Gumbi

by
Length:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Jeste li se ikad upitali kako stilizirati kućice za označivanje i radio gumbe, ali bez JavaScripta? Zahvaljujući CSS3 to možete vrlo jednostavno učiniti! Evo što ćemo izraditi:

Ako tražite neke grafike za upotrebu sa UI elementima, pogledajte UI setove dostupne na Envato Elements. U suprotnom, opskrbite se šalicom kave i počnimo sa tutorialom!

1. Razumijevanje Procesa

Preporučeni Tekst: 30 CSS Selektora Koje Morate Upamtiti

Za one koji smatraju da su već dovoljno iskusni u CSS-u i samo žele da ih pogurnemo u pravom smjeru, ovo je najvažnija sintaksa CSS-a u cijelom tutorijalu:

Sada, za vas kojima treba malo više usmjeravanja, ne bojte se i nastavite čitati!

Dobro, vraćamo se natrag na temu. Što ćemo točno raditi? Pa, zbog CSSovog malenog :checked pseudo selektora, imamo mogućnost targetirati element baziran na njegovom označenom (ili neoznačenom) statusu. Možemo upotrijebiti + susjednog blizanca selektora iz CSS2.1 da targetiramo element direktno prateći checkbox ili radio, što je u našem slučaju label.

2. Podešavanje HTML-a

Sada počinjemo izradom HTML i CSS datoteka (ili kako god preferirate rješavati stilove) i primiti ćemo se posla. Pretpostaviti ću da znate kako to učiniti, pa ne moramo ulaziti u detalje.

Kako bih vas usmjerio, ovu  tehniku ću demonstrirati samo na checkbox-u, ali proces za radio gumbe je identičan, i uključen u izvornu datoteku.

Ok, možemo početi, zar ne? Prvo počinjemo izradom "checkbox" input-a, praćenim label-om.

Sada, samo u slučaju ako ne znate mnogo o  < label > elementu, morate spojiti input i label kako biste omogućili interakciju sa input-om kroz label. To se radi koristeći for="" i ID input-a.

Također ću dodati <span> unutar label-a, koji je zapravo više moja osobni izbor, ali sve će vam postati jasno u 3. koraku.

3. Zbog Čega Smo Ovdje: CSS

Ovdje postaje zabavno. Prva stvar koju ćemo sada učiniti, a baza je ovog tutorijala, jest sljedeće: sakriti ćemo "checkbox".

Sada možemo stilizirati label, ali preciznije, span unutar label-a. Radim to na ovaj način kako bih si omogućio više kontrole nad točnom pozicijom checkbox-a. Bez toga biste vjerojatno koristili sliku pozadine izravno u label-u, i pozicioniranje bi bilo mnogo kompliciranije.

Ok, dozvolite da vam objasnim na brzinu. Prvo, obratite pozornost na pozadinu. Za njih imam maleni sprite sheet, stoga je sve što trebam učiniti, podesiti poziciju pozadine na ovom span-u. Span je sam po sebi točna širina i visina svakog "sprite-a" u sheet-u, što olakšava definiranje svakog stanja.

Our sprite sheet
Naš sprite sheet

Ovdje je ostatak CSS-a specifičan za moj "styling". To je čisto estetski i specifično za moj ukus ili ovaj dizajn.

4. Pokretanje

Nije nam ostalo još mnogo posla, pa hajdemo dovršiti. Posljednja stvar koju ćete trebati jest dodati stanje za element kada je input označen, i opcionalno također na hover-u. Ovo je prilično jednostavno, samo pogledajte!

Primjećujete li da, zbog toga što sam koristio sprite sheet, sve što trebam učiniti jest promijeniti poziciju pozadine. A jeste li primiejtili također, da je sve što sam morao učiniti da stiliziram label-ov span za kada "označite" chekbox/radio gumb, bilo upotrijebiti CSS3 :checked pseudo selektor.

Kratki Savjet o Podršci Browser-a

Pseudo selektori imaju odličnu podršku u svim pretraživačima, ali primjenjuju se uobičajena upozorenja, i rezerva je prilično dobra:

Can I use data for pseudo selectors
Mogu li Koristiti data podatke za pseudo selektore
IE9 on Windows 7
Rezerva: IE9 na Windows 7

Rane mobilne verzije također su problem - podrška za :checked je nejasna. Npr. mobilni Safari prije iOS6 ga ne podržava.

Zaključak

U redu, gotovi smo, zar ne? Pa, provjerimo još jednom. Prvo HTML:

Izgleda li kod vas jednako? Ne zaboravite dodati <span>! Kada sami eksperimentirate, toplo preporučam da pronađete nove ili različite načine na koje ćete napraviti ovaj dio. Volio bih vidjeti što ste smislili za bolju učinkovitost. A sada CSS:

Sve je ovdje? Savršeno. Imajte na umu da je mnogo ovog stiliziranja specifično stilu koji sam izradio za demo datoteke. Potičem vas da izradite vlastiti, i eksperimentirate sa smještanjem i prezentacijom.

U zaključku, najvažnija stvar koju biste iz ovog mogli izdvojiti je prva linija CSS-a koju sam napisao na vrhu:

Koristeći je, možete napraviti cijeli niz različitih stvari. Mogućnosti sa :checked protežu se izvan checkbox-ova i radija za upotrebu u formama, ali to eksperimentiranje ću prepustiti vama. Neke stvari sa kojima možete ekperimentirati:

  • Dodajte 2 x Spritesheet za retina ekrane
  • Upotrijebite SVG umjesto bitmap-e

Nadam se da ste uživali u ovom kratkom članku i da ćete se poslužiti ponuđenim i unaprijediti navedeno!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.