Odsek Dropcap s elementmi CSS prvej či prvej písmeny
Existuje niekoľko CSS selektorov alebo vlastností, ktoré si myslím, že sa zriedka používajú vo voľnej prírode, ale skutočne existujú už od čias CSS1; niektoré z nich sú vrátane :prvá línia a :prvé písmeno pesudo-elementy.
Ako použiť?
Tieto pseudoelementy pracujú v podstate podobne ako ich súrodenci -: pred a po: - a myslím, že sú taktiež celkom jednoduché. :prvé písmeno bude zamerané na prvé písmeno alebo znak vybraného prvku, toto pseudo-prvok sa bežne používa na vytvorenie typografického efektu ako kvapka. Tu je postup.
p: prvé písmeno font-size: 50px;
Výsledkom tohto kódu je nasledujúca prezentácia.
Mali by sme si však všimnúť, že tento efekt bude platiť len vtedy, ak prvému znaku nebude predchádzať iný prvok, napríklad obrázok. Navyše, keď máme niektoré z rovnakých cielených prvkov v rade, všetky z nich budú ovplyvnené.
Ďalej, pokiaľ ide o :prvá línia, toto pseudo-prvok sa bude zameriavať na prvý riadok cieleného prvku, tento príklad nižšie ukazuje, ako sme odvážili prvý riadok odseku.
p: prvý riadok font-weight: bold;
Rovnako ako predošlý kód :prvé písmeno, to bude mať vplyv aj na všetky prvé riadky v prvkoch odseku, ktoré sú na stránke.
Takže v reálnych prípadoch, keď chceme všeobecne pridať kvapku kvapiek alebo zmeniť prvý riadok iba na prvom odseku musíme byť konkrétnejší - buď pridaním extra atribút triedy alebo použitím týchto pseudo-elementov spolu s : Prvé dieťa alebo : Prvé-of-type selektor, tak ako to.
p: prvé dieťa: prvé písmeno font-size: 50px; p: prvé dieťa: prvý riadok font-weight: tučný;
Tam sme ísť, dotknutý odsek je teraz len prvý.
Pseudo-elementy pri práci
V poriadku, skúsme teraz navrhnúť lepší vzhľad odseku pomocou pseudo-elementov. Ale predtým, než začneme, potrebujeme špeciálne písmo pre našu kvapku a tu je moja voľba: Hominis Paul Lloyd. V štýle šablón definujeme novú rodinu písma takto.
@ písmo-tvár font-family: 'HominisNormal'; src: url ('fonty / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') formát ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff' HOMINIS-webfont.ttf ') formát (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') formát (' svg '); veľkosť písma: normálna; štýl písma: normálny; Ďalej nastavíme predvolenú rodinu písma pre odseky.
p farba: # 555; font-family: 'Gruzínsko', Times, serif; line-height: 24px;
V tomto príklade budeme používať : Prvé dieťa selektor na zacieliť prvý odsek a aplikovať dekoratívne štýly na to, aby vyzeralo viac prominentné:
p: prvé dieťa padding: 30px; border-left: 5px solid # 7f7664; farba pozadia: # f5f4f2; line-height: 32px; box-tieň: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); pozícia: relatívna;
Potom pridáme kvapku kvapiek pomocou :prvé písmeno, zväčšenie veľkosti písma a priradenie novej rodiny písiem;
p: prvé dieťa: prvé písmeno font-size: 72px; plavák: vľavo; polstrovanie: 10px; výška: 64px; font-family: 'HominisNormal'; farba pozadia: # 7F7664; margin-right: 10px; farba: biela; polomer okrajov: 5 pixlov; line-height: 70px;
Budeme tiež zdôrazňovať prvý riadok :prvá línia, ako.
p: prvé dieťa: prvý riadok font-weight: bold; veľkosť písma: 24px; farba: # 7f7664;
Napokon chceme pridať dekoračný atribút do prvého odseku pomocou kancelárskej spony : po pseudo-prvok.
p: prvé dieťa: po background: url ("... /images/paper-clip.png") no-repeat scroll 0 0 transparentný; obsah: ""; zobrazenie: inline-block; výška: 100px; poloha: absolútna; pravá: -5px; top: -35px; šírka: 100px; To je všetok kód, ktorý potrebujeme, teraz náš odsek by mal vyzerať oveľa lepšie;
Môžete tiež vidieť živé demo z nižšie uvedených odkazov:
- Zobraziť demo
- Stiahnuť zdroj
Konečná myšlienka
Ako sme už uviedli v tomto príspevku, tieto pseudo-prvky, konkrétne :prvé písmeno a :prvá línia bol zahrnutý od CSS1, a preto sú podporované aj v programe Internet Explorer 8 skôr.
Avšak, pokiaľ viem, nie sú tak vo veľkej miere realizované vo voľnej prírode. Takže dúfame, že tento tutoriál by vás mohol inšpirovať k vyskúšaniu týchto funkcií CSS na vašich webových stránkach.
