4 načina za stvaranje strašan CSS samo harmonike
Sadržaj harmonika napraviti koristan dizajn uzorak. Možete ih koristiti za mnogo različitih stvari: za izbornike, popise, slike, isječke članka, isječke teksta, pa čak i za videozapise
Većina harmonika se oslanja na JavaScript, uglavnom na jQuery, ali budući da je uporaba naprednih CSS3 tehnika postala raširena, možemo pronaći i lijepe primjere koristiti samo HTML i CSS, koje ih čine pristupačnim u okruženjima s onemogućenim JavaScriptom.
Stvaranje CSS-harmonika može biti lukav zadatak, tako da ćemo u ovom postu pokušati razumjeti glavne koncepte koje razvojni inženjeri koriste kada ih je potrebno stvoriti.
U stvaranju CSS-kartica samo postoje dva glavna pristupa, svaki od njih ima dva česta slučaja korištenja. Prvi pristup koristi skriveni elementi forme, dok drugi koristi CSS pseudo-selektori.
1. Metoda radio gumba
Metoda radio gumba dodaje skriveni radio ulaz i odgovarajuću oznaku na svakoj kartici harmonike. Logika je jednostavna: kada korisnik odabere karticu, oni u osnovi provjeravaju radio gumb koji pripada toj kartici, na isti način kada popunjavaju obrazac. Kada kliknu na sljedeću karticu u harmonici, odaberu sljedeći radio gumb itd.
U ovoj metodi, samo jedna kartica može biti otvorena u isto vrijeme. Logika HTML-a izgleda ovako:
Naslov sadržaja (ovdje nemojte koristiti oznaku h1)
Neki sadržaj ...
p>
Trebaš dodajte poseban par radio-oznaka za svaku karticu u harmonici. Sam HTML neće dati željeno ponašanje, morate dodati i odgovarajuća pravila za CSS, da vidimo kako to možete postići.
Fiksne visinske kartice
U ovom rješenju (vidi sliku ispod), programer je sakrio radio gumb uz pomoć prikaz: nema; pravilo, onda je dao relativan položaj oznaci oznake koja sadrži naslov svake kartice, i apsolutni položaj na odgovarajući Oznaka: nakon pseudo elemenata.
Potonji drži ručku označenu zelenim znakom + koja otvara kartice. Zatvoreni jezičci također koriste ručku označenu zelenom bojom “-” znakovi. U CSS-u se zatvoreni jezičci odabiru pomoću izbornika element + element.
Također trebate dati sadržaj otvorene kartice fiksnoj visini. Da biste to učinili, odaberite tijelo otvorene kartice (označeno s karticom sadržaja u HTML-u gore) pomoću CSS selektora element1 ~ element2.
Osnovna logika CSS-a je sljedeća:
ulaz [type = radio] display: none; oznaka position: relative; prikaz: blok; oznaka: nakon content: "+"; položaj: apsolutni; desno: 1em; ulaz: označeno + oznaka: nakon content: "-"; ulaz: označeno ~ .tab-content height: 150px;
Cijeli CSS možete pogledati ovdje na Codepen. CSS je izvorno napisan u Sassu, ali ako kliknete na “Pregled je sastavljen” možete vidjeti sastavljenu CSS datoteku.
Slika harmonika s radio gumbima
Ova lijepa slika harmonika koristi isti način radio gumb, ali umjesto oznaka, programer ovdje upotrijebio je oznaku HTML za opis postići harmonično ponašanje.
CSS je nešto drugačiji, uglavnom zato što u ovom slučaju jezičci nisu postavljeni okomito nego horizontalno. Programer je koristio CSS selektor elementa i elementa (koji je korišten u prethodnom slučaju za odabir izmjenjivača) kako bi se osiguralo da rubovi pokrivenih slika i dalje ostaju vidljivi..
Pročitajte detaljan vodič o tome kako stvoriti ovu elegantnu harmoniku za CSS.
2. Metoda potvrdnog okvira
Metoda potvrdnog okvira koristi vrstu unosa za potvrdni okvir umjesto radio gumba. Kada korisnik odabere karticu, u osnovi provjeravaju odgovarajući potvrdni okvir.
Razlika u odnosu na metodu radio gumba je da je moguće je otvoriti više od jedne kartice istovremeno, baš kao što je moguće provjeriti više od jednog okvira za izbor unutar obrasca.
S druge strane, kartice se neće zatvoriti same kada korisnik klikne na drugu. Logika HTML-a je ista kao i prije, samo u ovom slučaju morate koristiti potvrdni okvir za vrstu unosa.
Naslov sadržaja (ovdje nemojte koristiti oznaku h1)
Neki sadržaj ...
p>
Fixed Height Checkbox Accordion
Ako želite karticu sadržaja fiksne visine, logika CSS-a je gotovo ista kao u slučaju radio gumba, samo je vrsta ulaza promijenjena s radio na potvrdni okvir. U ovom penu Codepen možete pogledati kod.
Checkbox Visina tekućine Accordion
Kada je više od jedne kartice otvoreno u isto vrijeme, prikaz fiksnih pločica visine može negativno utjecati na korisničko iskustvo jer visina harmonike može značajno rasti. To se može poboljšati ako vi promijenite fiksnu visinu na visinu tekućine; to znači da se visina otvorenih kartica može proširiti ili smanjiti u skladu s veličinom sadržaja koji drže.
Za to trebate izmijenite fiksnu visinu sadržaja kartice do maksimuma, i koristiti relativne jedinice:
ulaz: označeno ~ .tab-sadržaj max-height: 50em;
Ako želite bolje razumjeti kako ova metoda funkcionira, možete pogledati ovaj Codepen.
3. Ciljna metoda
: target je jedan od pseudo-selektora CSS3. Pomoću nje možete povezati HTML element s oznakom sidra na sljedeći način:
Naslov kartice
Sadržaj kartice
Kada korisnik klikne na naslov kartice, cijeli odjeljak će se otvoriti zahvaljujući :cilj pseudo-selektor, a URL će se također promijeniti u sljedeći format: www.some-url.com/#tab-1.
Kartica otvorena može se stilizirati u CSS-u uz pomoć section: target … Pravilo. Imamo sjajnu poduku o hongkiatu o tome kako možete stvoriti lijepe harmonike samo za CSS :cilj metoda u vertikalnom i horizontalnom rasporedu.
Glavni nedostatak :cilj metoda je to mijenja URL kada korisnik klikne na kartice. To utječe na povijest preglednika, a gumb za povratak preglednika neće odvesti korisnika na prethodnu stranicu, već u prethodno stanje harmonika.
4. Metoda: hover
Ovaj potonji nedostatak može se prevladati ako se koristi : hover CSS pseudo-selektor umjesto :cilj, ali u ovom slučaju kartice neće reagirati na klik, već na događaj lebdenja. Trik ovdje je da trebate ili sakriti nepokrivene elemente, ili smanjite njihovu širinu ili visinu - ovisno o izgledu kartica
Leteći element mora biti vidljiv ili postavljen na punu širinu / visinu kako bi harmonika djelovala.
Sljedeće 3 harmonike samo za CSS napravljene su metodom: hover, kliknite na veze ispod snimaka zaslona da biste pogledali kôd.
Horizontalna harmonika slike
Iskrivljena harmonika
Hover-aktivirano harmonika s zadanim stanjem
