O šifri

Navigacijska kartica

Navigacijske kartice za dva obrasca.

Responzivan: ne

Ovisnosti: bootstrap.css

O šifri

CSS kartica

Kompatibilni preglednici: Chrome, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Kartice

Selektor + odabire sljedeći susjedni element. Povijesno gledano, to je bilo cool za stilske etikete. Uz CSS rešetku, element može biti pored drugog u označavanju, ali negdje potpuno drugačije u prikazu. Ova olovka koristi jednostavan selektor input:checked u kombinaciji s mnogo + "s za stiliziranje različitih stranica imaginarne mikrostranice.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Čiste CSS kartice

Radio verzija kartica. Zahtjevi: nemojte se oslanjati na specifične ID-ove za CSS (CSS ne bi trebao znati specifične ID-ove), fleksibilan za bilo koji broj nepoznatih kartica, dostupan. Upozorenja: budući da su to potvrdni okviri, kartice se ne mogu koristiti za kartice, potrebno je koristiti tipke sa strelicama .

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

CSS kartice

Čiste CSS okomite kartice.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Responzivan: ne

Ovisnosti: -

O šifri

Čiste CSS kartice s indikatorom

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Animirane kartice prijelaza

Animirane prijelazne kartice s potvrdnim okvirima.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Čiste CSS kartice u boji

Nema oznake čiste CSS kartice u boji.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Kartice samo za CSS

Kartice samo za CSS materijalnog dizajna.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

CSS3 kartice

Responzivne čiste CSS3 kartice tvrtke Sorax.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Kontrole kartica pomoću HTML-a i CSS-a

Klikanje na oznake zapravo je isto što i klikanje na okvire za unos. Radio ulazi skriveni su pomoću CSS-a. Kada se odabere radio, pojavljuju se njihovi susjedi sa sadržajem znatiželjnih kartica. To je to! Jedini nedostatak je što nećete moći stilizirati odabranu karticu bez korištenja JS-a, ali to ne bi trebala biti velika stvar.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Čiste CSS kartice

Samo HTML i CSS.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

U nastavku prethodnog posta o elementima odabira stajlinga, želio bih vam reći kako to učiniti u potpunosti prilagodljive kartice bez korištenja javascripta, apsolutno pozicioniranje i hakovanje veza.

Za početak, želio bih reći da ne pozivam na napuštanje javascripta u korist samo CSS-a, u nastavku će biti predstavljen samo jedan od načina implementacije kartica. Postoje mnoge situacije u kojima vam ovaj pristup neće odgovarati i u kojima ne možete bez JS-a, ali to sada nije o tome.

Shvatimo što želimo vidjeti kao rezultat rada i koje zahtjeve postavljamo za to:

1. Rad bez JavaScripta,
2. Ne postoji veza s brojem kartica (možemo koristiti jedan widget na različitim stranicama s različitim sadržajem unutar),
3. Prilagodljivost,
4. Maksimalna kompatibilnost s više preglednika i platformi,
5. Najpraktičnije i najrazumljivije korisničko sučelje,
6. Nema ograničenja za unutarnji sadržaj kartica, bilo da se radi o tekstu, medijskom sadržaju ili izgledu unutar kartice.

Vizualno bi trebalo izgledati ovako:

Prije nego pokažete svoju opciju kartice bez JS-a, želio bih razgovarati o nekim mogućnostima implementacije koje sam pronašao u procesu rješavanja ovog problema.

Prva opcija

Osoba koja je osmislila ovu metodu ili je očito željela ismijati korisnike ili je jedan od posjetitelja Reddita koji su kreirali te vrlo “zgodne” kontrole glasnoće. Ovakav pristup me čini nervoznim.

Suština metode je sljedeća:

Linkovi se koriste kao naslovi (sami gumbi) kartica, u href atributu, koji sadrži id odgovarajuće kartice - div ili bilo koji drugi element. Aktivna kartica se odabire pomoću pseudo-class:target.

Djeluje ovako:

Kao što ste mogli primijetiti, imamo problema s korištenjem ove metode:

1. Kada kliknemo na karticu, stranica počinje skakati, jer nas preglednik šalje kamo ova poveznica vodi. Naravno, to se može izbjeći, ali bez JS-a nema šanse.
2. Naslov aktivne kartice nije istaknut, to se može učiniti, ali je vrlo problematično.
3. U početku nema aktivnih kartica (budući da još nismo kliknuli na poveznice) i moramo pribjeći haku i učiniti treću karticu aktivnom; odabir prve na ovaj način neće funkcionirati.
4. Vrlo kontroverzna prilagodljivost: da, kartice su preuređene na nova linija kada se ekran sužava, a s njim se sužava i sadržaj kartice, ali ne izgleda baš lijepo. Ovaj problem se može riješiti medijskim upitima, no s obzirom da se nećemo vezati za broj tabova, problem će ostati na nekim veličinama zaslona.

Izvlačimo opravdani zaključak: ova metoda nije prikladna za nas jer neće zadovoljiti većinu zahtjeva. Implementacija je užasna i ne bih preporučio korištenje.

Druga opcija

Ova metoda stvaranje kartica bez JavaScripta već je praktičniji, iako ima i nekih problema u primjeni. Suština metode je sljedeća: elementi potvrdnog okvira i oznake koriste se za naslove kartica, a pomoću pseudoklase:checked i još jedne div element možemo prikazati sadržaj samo aktivne kartice i sakriti sve ostale:

Unos omotača kartice: označeno + oznaka + .stavka kartice (prikaz: blok;)

Evo kako to funkcionira:

Kao što ste mogli primijetiti, u ovom primjeru koristimo position: absolute; kako biste postavili naslove kartica na vrh, a sadržaj kartice na dno. To stvara određene probleme:

1. Potpuno neprilagodljiv. Kada mijenjate veličinu zaslona, ​​kartice padaju i sadržaj kartice ih prekriva. Ovo se može popraviti: napravite horizontalno pomicanje kartica, ovo rješenje ima mjesta, ali mi se baš ne sviđa.
2. Budući da koristimo apsolutno pozicioniranje za prikaz sadržaja kartica, morat ćemo odrediti fiksnu visinu kartica, inače će se preklapati sa sadržajem ispod (vidi se u primjeru), što znači da ne možemo koristiti ovaj pristup s dosad nepoznat broj kartica.

Naravno, u nekim slučajevima ova se metoda može koristiti, na primjer, kada unaprijed znate broj kartica i količinu sadržaja unutar njih. Ali mi tražimo univerzalno rješenje, stoga ovaj pristup nije primjenjiv u našem slučaju.

Riješenje

Treća opcija, koja je također rješenje, je modifikacija druge metode. Radi potpuno isto, ali nećemo koristiti apsolutno pozicioniranje i plutajuće svojstvo za naslove.

U ovu metodu Za postavljanje kartica i njihovog sadržaja koristimo sada moderan flexbox. Ljepota flexboxa je u tome što možemo odrediti koji će se elementi prikazati prvi, a koji na kraju. To se može učiniti pomoću svojstva naloga: 1; , koja je zadana vrijednost nula.

Prilagodljivost kartica također se postiže kroz svojstvo flex flex-grow: 1; , koji omogućuje da se kartice protežu preko cijele širine sadržaja, tako da ne moramo brinuti o prikazivanju različitog broja kartica. Također možemo postaviti sadržaj bilo koje i različite veličine unutar svake kartice, to neće utjecati na prikaz sadržaja nakon njih.

Ovaj pristup funkcionira u svim moderni preglednici, uključujući mobilni. Od svojstava koja su mnogima neobična, koristi se samo Flexbox, koji je već odavno široko podržan. U Firefox preglednici, Chrome, Safari i Opera, nisam naišao na probleme s radom kartica.

Ovaj pristup možete provjeriti na jsfiddle ili na vlastitim projektima. Bilo bi mi drago vidjeti druge prijedloge rješenja ovog problema u komentarima.

Nedavno smo pogledali implementaciju kartica sa sadržajem, bez povezivanja javascripta, koristeći isključivo .
Danas vas želim upoznati s još jednim, ne manje zanimljivim rješenjem za stvaranje kompaktnog bloka kartica, izgrađenog na čistom CSS3 i koristeći elemente prilagodljivi raspored. Kao iu prvoj opciji, ništa suvišno ili glomazno, samo minimum css kod, a na raspolaganju će vam biti i prilagodljivi blok s karticama koje se mogu mijenjati i koji će se savršeno uklopiti u bilo koji dio stranice, bilo da se radi o zasebnoj poruci, bočnom stupcu ili modalnom prozoru.

Koje su promjene napravljene u odnosu na prvu verziju?
Prije svega, blok kartica je postao prilagodljiv, tj. prilikom gledanja na Mobilni uredaji, veličina kartica se mijenja ovisno o veličini zaslona korisničkih uređaja, tekst naslova se uklanja i ostaju samo ikone fonta koje označavaju značenje sadržaja jednog ili drugog.
Ikone fontova su iz , zbirka je vrlo bogata i, štoviše, potpuno besplatna. Možete integrirati ikone u bilo koji projekt pomoću preuzetog skupa fontova ili ih povezati sa svojom datotekom stila css izravno s web stranice razvojnog programera putem @import koristeći sljedeći redak:

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

U demo primjeru, to je upravo ono što sam napravio, tako da gledajući izvorni kod, možete lako shvatiti što je što.
Struktura kartica u Html-u prilično je jednostavna. Osnovni div spremnik, veza i izravno sekcije