Kodiranje elegantnog navigacijskog izbornika za kruh u CSS3
Navigacijski izbornici i veze su možda najvažniji elementi sučelja za web izgled. To su jedina mjesta za korisnike putovanje između stranica i interakciju sa svim sadržajem koji ste stvorili. Breadcrumb nudi sličnu funkcionalnost s dodatnom pogodnošću praćenje trenutne pozicije. Moći ćete prikaz svih prethodnih putova veze dok korisnik prelazi hijerarhiju vaše web-lokacije.
U ovom tutorialu stvorit ćemo briljantan navigacijski izbornik s nekim CSS3 efektima. To je testirano za rad u svim većim preglednicima koji su u skladu s CSS3, čak i stariji preglednici koji ne podržavaju CSS3 i dalje će ga ispravno prikazati u većini slučajeva.
Prije nego što uđemo u kod, malo ćemo govoriti o funkcionalnosti naše krušne mrvice, potpunog udžbenika na skoku!
Ponuda staze
Kružna staza nije složenija od bilo kojeg drugog izbornika. Naši stilovi koristit će mnogo složenija CSS svojstva od većine primjera, ali naš predložak s golim kostima još uvijek je na mjestu da bi korisnike vodio s jedne stranice na drugu..
U ovom primjeru ponovno ćemo stvoriti sličan stil kao Googleov izbornik podrške. Možete vidjeti njihov izbornik na stranici podrške za Gmail da biste dobili ideju o tome gdje idemo. Na kraju želimo pružiti najbolje korisničko iskustvo svim korisnicima, bez obzira na njihov operativni sustav ili softver preglednika, tako sam napravio 2 različita primjera koda koji podržavaju gracioznu degradaciju starijih preglednika.
Prvi je korišten prilagođene pozadinske slike i odgovarajuće CSS poravnanja. Svi događaji hover i aktivni događaji unaprijed su izgrađeni sa samo nekoliko CSS stilova, ali korisnici koji imaju isključene slike neće moći doživjeti te efekte! Zbog toga sam također napravio i sličan izbornik s CSS gradijentima, zaobljenim kutovima i sjenama.
Ako ste nervozni oko podupiranja oba stila, možete birati između njih za vlastitu web-lokaciju. Većina će posjetitelja prema zadanim postavkama koristiti slike, ali ako želite preciznije podatke o posjetiteljima, prođite kroz alat za analizu web-lokacije.
Dosta riječi, skočimo u projekt! Započet ćemo konstruiranjem osnovnog HTML okvira i premjestiti se u različite efekte oblikovanja. Kao prvo morate preuzeti sliku potrebne za projekt.
Bare Bones HTML
Počinjem s dokumentom standardni HTML5 predložak stranice. To uključuje zadani doctype, povezane CSS-ove i sve osnovne elemente. Dodao sam kôd u nastavku ako želite na ovaj način pokrenuti vlastiti dokument. Imajte na umu da ne bi trebalo utjecati na prikazivanje krušne trske, stoga slobodno koristite vlastiti predložak stranice.
Zadana stranica
Podijelit ću kod na dva različita bloka. Prvi blok s slikama izgrađen je na nešto drugačiji način, a slijedi naš izbornik bez slika. Svaki set ima svoj vlastiti iskaznica kako bismo mogli lakše prepoznati sadržaj. Ako ste i obožavatelj jQuery-a, možete ga koristiti #ID selektor za manipuliranje svim unutarnjim DOM elementima.
Prvo imamo koja sadrži div s id “breadcrumb“. U demo datoteci sam to iskoristio kako bih odvojio naš kod i premjestio ga preko stranice s nekim dodatnim maržama. Možete ukloniti ovaj vanjski div, ali morat ćete ponovno stilizirati sve kako bi odgovarao novom predlošku. Stvarno ne boli ostaviti spremnik jer ćete moći lakše kontrolirati pozicioniranje.
Interno sam napravio krušne mrvice pomoću neuređenog popisa. Postoji toliko mnogo jedinstvenih načina prilagođavanja stiliziranih HTML popisa, a krušne mrvice su samo jedna od njih. Možete primijetiti da sam dao početnu stavku popisa a klasa od “prvi“. To je potrebno za neke dodatne obloge kako bi stavke izbornika bile u redu. Osim toga mali blok raspona je dodan tako da imamo ispravnu lijevu granicu koja ne preklapa pozadinsku sliku.
Osim toga, svaka sidrena veza je zasađena s opadajućim brojem za z-index nekretnine. Korištenje slika koje ćemo trebati da se svaka od naših veza preklapa da biste ispravno prikazali strelicu za krušnu dršku. Najlakši način da se to postigne je podešavanje z-indeksa tako da svaka veza prekriva sljedeće. Počela sam 9 i radili dolje od tamo, ali ako imate više linkova u izborniku samo početi s višim cijeli broj.
Izbornik bez slika
Do graciozno degradiraju našu krušnu mrvicu trebamo sekundarni skup stavki popisa HTML-a. Ako se pokušavate vratiti na jednu navigaciju, možete koristiti jQuery za otkrivanje agenta preglednika i u skladu s tim primijeniti ID. Nažalost, to nije uvijek pouzdano (na primjer, za neke mobilne korisnike). Drugo je rješenje uključuju stilsku shemu specifičnu za IE i sakriti ili prikazati izbornik koji radi najbolje - ali naravno, ova opcija je samo za Internet Explorer.
breadcrumb2 je naš novi ID koji se koristi za ciljanje izbornika bez slika. Držati se ovog uzorka koji sam koristio crumbs2 kao klasa za neuređeni popis. Imajte na umu razlog zbog kojeg koristimo klase je za svoje jednostavnost kopiranja ovih izbornika, tako da kada želite nekoliko različitih krušnih mrvica na svojoj stranici, s ovim razredima to nikada neće postati problem.
Zadržali smo .prvi klase, ali dodatno dodan .posljednjina konačnu stavku popisa. Bez slika ne možemo duplicirati strelice za svaku stavku navigacijskog izbornika, pa sam ih koristio zaobljeni kutovi začiniti sekundarni izbornik. .prvi klasa i .posljednji manipulirajte radijusom obruba na samim rubovima našeg izbornika da biste stvorili stvarno cool stil koji izgleda web 2.0.
CSS klizne pozadinske slike
Za neke od jednostavnijih učinaka spojio sam oba krušna mrvica zajedno pri izgradnji svojstava. Ovo je korisno jer ne samo da štedi nešto prostora, nego se vraća u stil uređivanja lakše prilagoditi vlastiti izgled.
Za oboje #breadcrumb i # breadcrumb2 Postavio sam list-style: nema; tako da sve interne stavke neće imati oznake. Možete ostaviti ove ako vam se sviđa učinak, ali sam našao HTML postaje zamoran za rad i to je puno lakše stvoriti nove ikone. Počnimo s našim .mrvice klasa.
.mrvice display: block; .crumbs li prikaz: inline; .crumbs li.first padding-left: 8px; .krumbs li a, .crumbs li a: link, .crumbs li a: visit color: # 666; prikaz: blok; plutajući: lijevo; veličina fonta: 12px; margina lijevo: -13px; obloga: 7px 17px 11px 25px; pozicija: relativna; text-decoration: none; .crumbs li a pozadina-slika: url ('… /img/bg-crumbs.png'); pozadina-ponavljanje: nema ponavljanja; pozicija u pozadini: 100% 0; pozicija: relativna; .krumbs li a: hover color: # 333; pozicija u pozadini: 100% -48px; pokazivač: pokazivač; .crumbs li a: aktivno color: # 333; pozicija u pozadini: 100% -96px; .crumbs li.first span height: 29px; širina: 3px; granica lijevo: 1px solid # d9d9d9; položaj: apsolutni; vrh: 0px; lijevo: 0px; Mi postavite na naš neuređeni popis blok tako da se ništa drugo ne pojavi oko tog područja. Primijetite da su stavke popisa prikazano u retku dok je svakom sidrenom vezu dano mnogo više prostora za širenje. Želimo da se svi prostori u našem izborniku mogu kliknuti tako da to zahtijeva izgradnja naših sidara kao blok elemenata.
Upotrijebio sam sliku nazvanu bg-crumbs.png za pozadinu. To je poznato kao jednostavna slova u CSS-u ili alternativno klizna vrata tehnika. To znači da kada korisnik klikne ili klikne na vezu, pomaknemo poziciju u pozadini da bismo prikazali ažurirani stil. Ova pojedinačna slika sadrži sve tri dizajna koje trebamo stvoriti pozadine za krušne mrvice na različitim pozicijama, tako da možemo koristiti Pozadina položaju premjestiti na temelju interakcije korisnika.
Prilagođeni učinci s CSS3
Izvorni dizajn krušnog presjeka je mnogo jednostavniji za izradu. To je primjetno jer je mnogo CSS svojstava više bazičnih nego što biste mogli zamisliti, ali sada počinjemo fokusirati se na dupliciranje tih efekata samo s CSS3!
Pojedini stilovi zauzimaju puno prostora pa ću ih razbiti u 2 kodna bloka.
.mrvice2 display: block; margina lijevo: 27px; padding: 0; padding-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: veza, .crumbs2 li a: visit color: # 666; prikaz: blok; plutajući: lijevo; veličina fonta: 12px; obloga: 7px 16px 7px 19px; pozicija: relativna; text-decoration: none; granica: 1px solid # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-gradijent (linearno, lijevo dno, lijevi vrh, stop boja (0,45, rgb (241,241,241)), zaustavljanje boje (0,73, rgb (245,245,245))); background-image: -moz-linear-gradient (središnje dno, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Za Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Za Internet Explorer 8 * / -ms filtar: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last border-right-width: 1px; radius: border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
.crumbs2 izbornik CSS gradijenti kopirati pozadinske efekte. Ako niste upoznati s tim, preporučujem CSS Tricks vodič za CSS3 gradijente koji bi vam trebao pomoći da učinkovito koristite CSS3 gradijente. Uključili su još nekoliko svojstava za Microsoft i Opera preglednike, ali oni nisu u potpunosti podržani u svim slučajevima. Ovdje ih nisam uključio u demo kod - ali dobro je razumjeti sve opcije.
-webkit-gradijent i -Moz-linearni gradijent su temeljna rješenja koja obavljaju većinu posla. Za starije verzije programa Internet Explorer uključio sam naslijeđeni kod to nije zajamčeno za ispravno prikazivanje cijelo vrijeme (na kraju krajeva koristimo snažne tehnike prikazivanja slika). Primijetite da sam postavio i RGB i hex kodove boja između svojstava pozadine. Možete se držati jedne ili druge metode ako vam je ugodnije.
radijus granice Kôd se primjenjuje samo na našoj sekundarnoj navigacijskoj traci. To daje uredan učinak u gornjem lijevom i donjem desnom kutu cijelog izbornika. Čini se da traka gotovo pop-off stranicu - doista fantastičan učinak na preglednike koji podržavaju stilove, ali to samo pokrivaju zadane države za naše veze. Sada ćemo graditi efekte lebdenja slične onima koje smo koristili gore.
CSS3 Granice i sjene
Kad god korisnik prelazi preko veze, želimo ažurirati nekoliko stvari. Prvo trebamo zatamnite boje obruba na vrhu i dnu našeg aktivnog elementa. To se može vidjeti i na slikama i za stanje hover i za aktivna stanja.
.mrvice2 li: hover border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradijent (linearno, lijevo dno, lijevi vrh, boja-stop (0,45, rgb (241,241,241)), boja-stop (0,73, rgb (248,248,248))); background-image: -moz-linear-gradient (središnje dno, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Za Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Za Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; boja: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; kutija-sjena: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktivno border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradijent (linearno, lijevo dno, lijevi vrh, zaustavljanje boja (0,45, rgb (224,224,224)), zaustavljanje boje (0,73, rgb (235,235,235))); background-image: -moz-linearno-gradijent (središnje dno, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Za Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Za Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; kutija-sjena: -1px 1px 1px 0px #dadada umetak; -webkit-box-shadow: -1px 1px 1px 0px #dadada umetnuti; -moz-box-shadow: -1px 1px 1px 0px #dadada umetnuti; boja: # 333;
Koristim isti kod gradijenta kao što smo koristili gore, ali ovaj put boje su mnogo drugačije ako ste primijetili naše RGB vrijednosti. Svaka od država će potamniti boju teksta na # 333, drugi deskriptori su neznatno izmijenjeni kako bi odgovarali korisničkim naredbama.
Na lebdenju ćete vidjeti a sjajni reljefni efekt što je povezano s zamračene granice daje popup stilovima stranica. Ako kliknete i držite, ući ćete u aktivno stanje koje sadrži a zamračen gradijent pozadine. Ovaj efekt uzrokuje da gumbi izgledaju zapravo “stisnut” na stranici.
Također se prijavljujemo kutija-sjena svojstva iz novih specifikacija CSS3. -WebKit, -moz, i zadani stilovi koriste se s istim postavkama. Lebdenje prikazuje a svijetla sjena izlazi iz dna odabrane veze. Kada je aktivna, sjena će se formirati na gornjoj, desnoj i donjoj granici. Taj je efekt stvoren pomoću umetak ključna riječ dodana na kraj svake crte svojstava okvira sjena. Ponovo CSS Tricks je vaš najbolji prijatelj ovdje s nevjerojatnim člankom o box-shadowu, jer govori o sintaksi i njenoj pravilnoj upotrebi u CSS3.
Bonus: Više stilova
Osim tutorial koda dodao sam i dodatne pozadinske slike s prilagođenim shemama boja. Odabrao sam izvorne pozadine i koristio Adobe Photoshop kako bih stvorio nekoliko varijacija koje možete primijeniti na vlastitu web-lokaciju.
To bonus datoteke su uključene u izvornu datoteku koje možete preuzeti u .zip formatu u odjeljku u nastavku.
Možete pogledati gornju sliku da biste dobili ideju o čemu govorim. Ako vam je potrebna posebna shema boja pop otvoren Photoshop> Slika> Podešavanja> Hue / Saturation da biste izmijenili shemu boja kako bi odgovarala vlastitom predlošku, ne zaboravite označite opciju Colorize u oknu Hue / Saturation, ako se boja uopće nije promijenila.
Zaključak
Ovaj vodič bi vas upoznao s nekim od novijih CSS3 tehnika. Stvorili smo dva fantastična izbornika na sličan način i napravili ih na način da se mogu degradirati u starijim preglednicima. Osim toga, ponudio sam svoj demo kod i neke bonus slike s kojima se možete igrati.
Posebno volite stilove koje smo ovdje konstruirali? Ili možda imate pitanja ili ideje o tome kako poboljšati tutorial kod? Molimo podijelite svoje misli s nama u području za raspravu u nastavku, i ne zaboravite preuzeti izvorne datoteke kako biste mogli igrati s demo verzijom!
Više CSS3 vodiča
Žudnja za više CSS3? U nastavku se nalaze naši članci koje teoretski i praktično razumiju CSS3!
- CSS3: Izradite logotip RSS feeda
- CSS3: Stvaranje polja za pretraživanje
- CSS3: Kreirajte AJAX obrazac za kontakt
- CSS3: Izgradnja HTML5 / CSS3 web stranica
