Kako ustvariti vsebino, ki temelji na CSS
V današnji vadnici se bomo naučili, kako lahko ustvarimo horizontalna in vertikalna vsebina harmonika s samo uporabo CSS3. Obstaja veliko jQuery plugins ven, da lahko to delo za vas, ampak kaj storiti, če je obiskovalec Javascript izklopljen, potem harmonika ne bo delovala pravilno. Če je vaša harmonika zgolj v CSS, bo delovala za vse vaše obiskovalce.
Ustvarili bomo vodoravno in navpično harmonika. Ko kliknete besedilo naslova, se bo odprl diapozitiv, ki prikazuje celotno vsebino, in tukaj je hiter predogled (posnetki zaslona), kako izgledajo.
Kot kaj vidiš? Naj začne kodiranje!
1. Priprava HTML-ja in vsebine
Za začetek bomo ustvarili HTML za harmoniko.
Struktura potrebuje posodo div in potem imajo oddelek za vsak diapozitiv v harmoniki. V tem primeru bomo imeli 5 diapozitivov. Vsak od diapozitivov bo imel naslov in odstavek za vsebino.
O nas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, in iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed sled. Phasellus eu erat enim. Predstavlja se pri magna non massa dapibus scelerisque v eu lorem.
Storitve
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, in iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed sled. Phasellus eu erat enim. Predstavlja se pri magna non massa dapibus scelerisque v eu lorem.
Blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, in iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed sled. Phasellus eu erat enim. Predstavlja se pri magna non massa dapibus scelerisque v eu lorem.
Portfelj
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, in iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed sled. Phasellus eu erat enim. Predstavlja se pri magna non massa dapibus scelerisque v eu lorem.
Kontakt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, in iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed sled. Phasellus eu erat enim. Predstavlja se pri magna non massa dapibus scelerisque v eu lorem.
Zdaj imamo naše diapozitive in začnemo oblikovati harmoniko.
2. CSS Styling
Najprej moramo oblikovati vsebino div harmoniko. To nam bo dalo idejo, kako prikazati vsakega od diapozitivov in vsakega naslova.
/ * Določite skladiščno polje * / .accordion širina: 830px; overflow: hidden; margin: 10px auto; barva: # 474747; ozadje: # 414141; oblazinjenje: 10px;
Nato bomo ustvarili naslove za vsak diapozitiv.
.harmonika float: levo; overflow: hidden; barva: # 333; kazalec: kazalec; ozadje: # 333; marža: 3px; .accordion: hover ozadje: # 444;
Barvo ozadja nastavimo na temno sivo na odseku, kjer je naslov, kjer bodo obiskovalci kliknili za prikaz diapozitiva. Ta razdelek uporabljamo za naslov in vsebino, kar pomeni, da lahko uporabimo manj HTML-ja in ponovno uporabimo naslov diapozitiva kot naslov vsebine.
.odsek harmonike p (prikaz: noben;
Trenutno bodo vsi diapozitivi zaprti, zato se moramo prepričati, da je odstavek skrit pred ogledom, dokler se diapozitiv ne odpre, tako da za zdaj nastavite prikaz odstavka na nobenega.
.odsek harmonike: po position: relative; velikost pisave: 24px; barva: # 000; font-weight: krepko; .accordion: nth-child (1): po content: '1'; .accordion: nth-child (2): po content: '2'; .accordion: nth-child (3): po content: '3'; .accordion: nth-child (4): po content: '4'; .accordion: nth-child (5): po content: '5';
Z zaprtimi diapozitivi želimo prikazati številko na dnu naslova, da povemo, na katerem številčnem diapozitivu smo. Za to bomo uporabili CSS za dodajanje vsebine po naslovu razdelka, kar lahko naredimo z uporabo : after izbirnik psevdo razreda.
Zdaj smo ustvarili naslov za diapozitiv, da lahko naredimo dogodek klik, da prikažemo diapozitiv v harmoniki. Vendar pa obstaja težava, CSS nima dogodka klikanja, zato je harmonika običajno ustvarjena z uporabo jQuery, tako da lahko besedilu klika priložimo besedilo naslova.
Posnemati moramo dogodek klikov v CSS-ju, ki ga lahko naredimo z uporabo : target izbirnik psevdo razreda.
3. Uporaba : target selektor psevdo razreda
: target nam omogoča slog identifikatorja fragmenta. Včasih za označevanje mesta na strani uporabimo oznako sidra na strani. Ob kliku na povezavo id v oznaki sidra postane cilj in to lahko slog uporabite s pomočjo : target izbirnik.
Če želite dodati to v harmoniko, moramo dodati povezavo okoli naslova, ki kaže na id diapozitiva.
O nas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, in iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed sled. Phasellus eu erat enim. Predstavlja se pri magna non massa dapibus scelerisque v eu lorem.
.odsek harmonike: tarča ozadje: #FFF; oblazinjenje: 10px; .accordion: cilj: hover ozadje: #FFF; .accordion: ciljni h2 širina: 100%; .accordion: cilj h2 a color: # 333; oblazinjenje: 0; .accordion: ciljni p display: block; .oddelek h klavzule h2 a polnilo: 8px 10px; prikaz: blok; velikost pisave: 16px; font-weight: normalna; barva: #eee; dekoracija besedila: nobena;
Zgornja koda bo spremenila velikost diapozitiva, da se bo prilegala preostali harmoniki in spremenila barvo ozadja v belo. Odstavek je bil skrit, tako da zdaj na ciljnem moramo prikazati odstavek.
Zdaj, ko kliknete na naslov harmoniko, bo diapozitiv spremenil slog za prikaz vsebine diapozitiva.
4. Horizontalna harmonika
Zgornja koda bo ustvarila splošno harmoniko, zdaj pa lahko začnemo spreminjati CSS za razlike med horizontalno in vertikalno harmoniko. Obe harmoniki imata enako funkcionalnost, vendar pa bi bila drugačna.
.vodoravni prerez širina: 5%; višina: 250px; -moz-prehod: širina 0.2s lahek-out; -webkit-prehod: širina 0.2s lahek-out; -o-prehod: širina 0.2s je enostavnejša; prehod: širina 0,2 s;
Najprej nastavimo premer do 5%, tako da je zaprt diapozitiv. Ker je odsek tako naslov in vsebina za diapozitiv, moramo dodati animacijo za prikaz vsebine s pomočjo lastnosti prehoda..
/ * Položaj številke diapozitiva * / .horizontalnega odseka: po top: 140px; levo: 15px;
Položaj števila na diapozitivu bo enak položaju na vsaki zaprti naslovnici, ki se razlikuje od navpičnih naslovnic.
/ * Glava zaprtega drsnika * / .horizontalni odsek h2 -webkit-transform: rotate (90deg); -moz-transform: rotate (90deg); -o-transform: rotate (90deg); transform: rotate (90deg); širina: 240 px; položaj: relativna; levo: -100px; vrh: 85px; / * Na miški nad odprtim diapozitivom * / .horizontal: target width: 73%; višina: 230px; .horizontal: target h2 top: 0px; levo: 0; -webkit-transform: vrtenje (0deg); -moz-transform: vrtenje (0deg); -o-transform: vrtenje (0deg); transformacija: vrtenje (0deg);
Zgornja koda bo spremenila velikost diapozitiva, da se bo prilegala preostali harmoniki. Naslov je zavrtel navpično, da bi se spuščal po naslovu, zdaj pa moramo z odprtim diapozitivom besedilo spremeniti v vodoravno, tako da obrnemo besedilo nazaj na 0 stopinj.
5. Vertikalna harmonika
Navpična harmonika deluje na enak način kot horizontalna harmonika, le da moramo spremeniti višine namesto premer in ni treba spreminjati poravnavanja besedila.
.navpični del širina: 100%; višina: 40px; -webkit-prehod: višina 0.2s poenostavi; -moz-prehod: višina 0.2s poenostavi; -o-prehod: višina 0.2s poenostavi; prehod: višina 0.2s poenostavi; / * Nastavite višino diapozitiva * / .vertical: target height: 250px; širina: 97%;
Na cilj v primeru navpične harmonike bomo spremenili višine za prikaz diapozitiva.
.navpični del h2 položaj: relativni; levo: 0; na vrh: -15px; / * Nastavite položaj števila na diapozitivu * / .vertical section: po top: -60px; levo: 810px; .vertical del: cilj: po left: -9999px;
Zgoraj bo spremenil položaj besedila naslova na zaprtem diapozitivu. Z zaprtim diapozitivom moramo nastaviti položaj številke, ki se nahaja na desni strani harmonike. Ko je diapozitiv odprt, moramo skriti to številko na naslovu, ko je cilj nastavljen, tako da spreminjamo levi položaj z zaslona.
Zdaj, ko kliknete na naslov harmoniko, bo diapozitiv spremenil slog za prikaz vsebine diapozitiva.
Opomba urednika: To objavo je napisal Paul Underwood za Hongkiat.com. Paul je PHP spletni razvijalec iz Bristola v Veliki Britaniji. Piše vaje o razvoju spletnih strani: glavne teme so PHP, jQuery, CSS3 in HTML5. Prav tako beleži uporabne odlomke kod na Paulund.co.uk.
