Odstavec Dropcap s prvky první řádky CSS a prvky prvního dopisu
Existuje několik CSS selektorů nebo vlastností, o kterých si myslím, že jsou zřídka používány ve volné přírodě, ale ve skutečnosti existovaly již od dnů CSS1; některé z nich jsou včetně :první řada a :první dopis pesudo-elementy.
Jak používat?
Tyto pseudo-elementy v podstatě fungují podobně jako jejich sourozenci - před a po - a myslím si, že jsou také docela jednoduché. :první dopis zacílí na první písmeno nebo znak vybraného prvku, to znamená pseudo-element je obvykle používán k vytvoření typografického efektu, jako je například kapka. Zde je, jak se to dělá.
p: první písmeno velikost písma: 50px;
Tento kód má za následek následující prezentaci.
Je třeba poznamenat několik věcí, avšak tento efekt bude platit pouze tehdy, když prvnímu znaku nebude předcházet jiný prvek, například obraz. Kromě toho, pokud máme některé stejné cílené prvky v řadě, budou všechny ovlivněny.
Dále, pokud jde o :první řada, tento pseudo-element zacílí na první řádek cílového prvku, níže uvedený příklad ukazuje, jak jsme tučným písmem první řádek odstavce.
p: první řádek font-weight: tučné;
Stejně jako předchozí kód :první dopis, ovlivní to také všechny první řádky v prvcích odstavce, které jsou na stránce.
Takže v reálných případech, kdy obecně chceme přidat kapku nebo změnit první řádek pouze v prvním odstavci musíme být konkrétnější - buď přidáním atributu extra třídy nebo použitím těchto pseudoprvků spolu s :první dítě nebo : první typ volič, podobně.
p: první dítě: první písmeno velikost písma: 50px; p: first-child: first-line font-weight: tučné;
Jdeme tam, postižený odstavec je nyní jen první.
Pseudo-elementy v práci
Pojďme se nyní pokusit navrhnout lepší pohled na odstavec s využitím pseudoprvků. Než začneme, potřebujeme speciální písmo pro naši kapuci a tady je moje volba: Hominis od Paula Lloyda. Následně definujeme novou šablonu fontů ve stylu.
@ font-face rodina fontů: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') formát ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff') formát ('woff'), url ('fonty / Formát HOMINIS-webfont.ttf ') (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') formát (' svg '); font-weight: normální; styl písma: normální; Dále nastavíme pro tyto odstavce výchozí rodinu fontů.
p barva: # 555; font-family: 'Georgia', Times, serif; výška řádku: 24px;
V tomto příkladu budeme používat :první dítě selektor zacílí na první odstavec a použije dekorativní styly, aby vypadal výrazněji:
p: first-child padding: 30px; border-left: 5px pevná # 7f7664; barva pozadí: # f5f4f2; výška řádku: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); poloha: relativní;
Pak přidáme kapku pomocí :první dopis, zvětšit velikost písma a přiřadit mu novou rodinu fontů;
p: první dítě: první písmeno velikost písma: 72px; plavat vlevo; polstrování: 10px; výška: 64px; font-family: 'HominisNormal'; barva pozadí: # 7F7664; pravý okraj: 10px; barva bílá; hraniční rádius: 5px; výška řádku: 70px;
Také zdůrazníme první linii :první řada, jako tak.
p: first-child: first-line font-weight: tučné; velikost písma: 24px; barva: # 7f7664;
Nakonec chceme do prvního odstavce přidat dekorativní atribut pomocí kancelářské sponky :po pseudo-element.
p: first-child: after background: url ("… /images/paper-clip.png") no-repeat scroll 0 0 průhledný; obsah: " "; displej: inline-block; výška: 100px; pozice: absolutní; vpravo: -5px; nahoru: -35px; šířka: 100px; To je vše, co potřebujeme, nyní by náš odstavec měl vypadat mnohem lépe;
Živé ukázky můžete vidět také z níže uvedených odkazů:
- Zobrazit ukázku
- Stáhněte si zdroj
Závěrečná myšlenka
Jak jsme se zmínili dříve v tomto příspěvku, tyto pseudoprvky, konkrétně :první dopis a :první řada od CSS1, proto jsou podporovány i v Internet Exploreru 8 dříve.
Pokud však vím, nejsou ve velké míře realizovány ve volné přírodě. Doufáme, že vás tento návod určitým způsobem inspiruje k vyzkoušení těchto funkcí CSS na vašich webových stránkách.
