Dzisiejszy wpis powstał na życzenie kolegi o pseudonimie “Radek”, który zostawił swoją prośbę w komentarzu pod poprzednim postem. Temat, który poruszył, czyli pseudoelementy CSS, takie jak :first-letter, to dla mnie nowość. Do tej pory nie wiedziałem do czego one służą i jak je można wykorzystać, ale od czego jest Internet? ;)

Poklikałem, poszukałem i znalazłem na blogu Web Designer Notebook świetny, moim zdaniem, przykład zastosowania kilku pseudoelementów w jednym miejscu. Korzystając z tego artykułu opracowałem samodzielnie przykład stylizacji za pomocą pseudoelementów CSS poematu naszego Wieszcza, czyli “Pana Tadeusza” Adama Mickiewicza.

Kod HTML

Cały wiersz składa się z trzech elementów: dwóch nagłówków i paragrafów a wszystko to razem jest objęte pojedynczym blokiem aby można go było wyśrodkować na stronie. Dlatego kod HTML jest prosty i wygląda następująco:

Pan Tadeusz - kod HTML

Kod CSS

Teraz przechodzimy do sedna sprawy, czyli ostylowania wiersza. Zaczynamy od ustawień globalnych strony:

body {
	background: #FFF;
	color: #111;
        font: 14px Baskerville, "Palatino Linotype", "Times New Roman", Times, serif;
	text-align: center;
}

oraz elementów składowych wiersza:

div, h1, h2, p {
	margin: 0;
	padding: 0;
}
h1, h2 {
	font-weight: normal;
	text-align: center;
}
h1 {
	font-size: 34px;
	line-height: 1.2;
	margin-bottom: 10px;
}
h2 {
	color: #666;
	font-size: 18px;
	font-style: italic;
	margin-bottom: 30px;
}
p {
	line-height: 1.5;
	margin-bottom: 15px;
}

Nie zapominamy o div-ie, który obejmuje cały wiersz:

#poemat {
	margin: auto;
	padding: 20px 0;
	text-align: left;
	width: 600px;
}

Do tej pory wszystko było proste. Teraz przechodzimy do rzeczy bardziej zaawansowanych. Na początek dodamy elementy dekoracyjne na początku i na końcu nagłówka z danymi o utworze. Wykorzystamy w tym celu dwa pseudoelementy CSS: :before i :after w połączeniu z właściwością content:

h2:before {
	content: '— ';
}
h2:after {
	content: ' —';
}

Następnie sprawimy, aby pierwsza litera poematu stała się duża i wcięta w tekst niczym obrazek. W tym celu wykorzystamy metodę łączenia właściwości selektorów (symbol +) oraz pseudoklasy :first-letter. Metoda łączenia właściwości selektorów pozwala na ustawienie relacji pomiędzy połączonymi selektorami, znajdującymi się wewnątrz selektora nadrzędnego. W naszym przypadku będzie to oznaczało styl przypisany do pierwszej litery występującej w akapicie (p)bezpośrednio za nagłówkiem stopnia drugiego (h2). W opisywanym przykładzie taki nagłówek jest tylko jeden, a więc zmiana wyglądu pierwszej litery zostanie ograniczona tylko do jednego akapitu (pierwszego akapitu po nagłówku):

#poemat h2 + p:first-letter {
	float: left;
	font-size: 38px;
	line-height: 1;
	margin: 2px 5px 0 0;
}

Kolejną rzeczą, której dokonamy jest zamiana wielkości liter w pierwszej linijce każdego akapitu na małe kapitaliki oraz, dla lepszej czytelności tekstu, dodanie do nich minimalnego odstępu między poszczególnymi literami. W tym fragmencie wykorzystamy pseudoelement :first-line:

#poemat p:first-line {
	font-variant: small-caps;
	letter-spacing: 1px;
}

Na koniec wykonamy jeszcze jedną sztuczkę. Do ostatniego akapitu dodamy specjalny margines na dole, który sprawi, że cały wiersz będzie odseparowany od następnego elementu na stronie. Wykorzystamy w tym miejscu pseudoelement :last-child:

#poemat p:last-child {
	margin-bottom: 30px;
	padding-bottom: 30px;
}

Obsługa różnych przeglądarek

Efekt opisanego rozwiązania sprawdziłem na wszystkich najpopularniejszych przeglądarkach w ich najnowszych wersjach, czyli: Chrome 3, Firefox 3.5 , Internet Explorer 8, Opera 10 i Safari 4 i wszędzie wygląda on tak samo – poprawnie. Dla tych, którzy używają starszych wersji przeglądarek, poniżej znajduje się zrzut ekranu z ostylowanym fragmentem “Pana Tadeusza”.

"Pan Tadeusz" - fragment księgi "Gospodarstwo"

Na specjalnej stronie możecie obejrzeć demo wiersza oraz pobrać plik z gotowym przykładem. Zachęcam do eksperymentowania na nim i obserwacji efektów wprowadzanych zmian.