[HTML][CSS] 6 sposobów na stylizację znacznika blockqoute

Po wakacyjnej przerwie pora na następny artykuł dotyczący tworzenia stron WWW. Ten artykuł będzie dotyczył sposobów stylizacji tagu blockquote, którego głównym zadaniem jest oznaczenie cytatów na stronie.
Tag blockquote jest stosunkowo rzadko używanym, ale bardzo użytecznym tagiem. Co prawda, zawsze możemy stworzyć własną klasę dotyczącą cytowanym zdań, ale wtedy nie zachowamy semantycznego wyglądu strony.

Dla poniższego kodu HTML można zastosować wiele różnych sposobów stylizacji tagu blockqoute:

<p>Telimena mieszkała przed którego progiem stanęła Podczaszyca dwókolna dryndulka która mu biło nadzwyczajnie. Więc do domu, i przyjaciel domu). Widząc.
<blockquote>
   <p>Ustawicznie do porządku i poplątane, w tabakierkę złotą Podkomorzy i. Kupść, Gedymin i jeszcze kołyszą się dawniej zdały. I przyjezdny gość, krewny pański i nigdy nie wierzono rzeczom najdawniejszym w.</p>
</blockquote>
Tadeusz, chociaż w stodołę miał czasu. Na piasku drobnym, suchym, białym w sadzie, na miejscu pustym oczy wkoło obracał ostróżne.</p>

1. Sekcja 1Kolory i ramki

   

   Jeżeli zależy nam na subtelnym pokazaniu cytowanego zdania, to możemy wykorzystać zmianę koloru oraz stworzyć ramkę po lewej stronie.

   blockquote { margin: 20px 40px; color: #999; border-left: 2px solid #999; padding-left: 20px; }

   blockquote { margin: 20px 40px; color: #999; border-left: 2px solid #999; padding-left: 20px; }

2. Sekcja 2Wstawianie tła

   

   To jest kolejny sposób na wskazanie zdań cytowanych. Można to zrobić w następujący sposób:

   blockquote { margin: 20px 40px; background-color: #f6ebc1; padding: 20px; }

   blockquote { margin: 20px 40px; background-color: #f6ebc1; padding: 20px; }

3. Sekcja 3Tło i ramki

   

   Dzięki wykorzystaniu tła i ramki można osiągnąć efekt błysku.

   blockquote { margin: 20px 40px; background-color: #f6ebc1; border-left: 5px solid #fce27c; padding: 20px; }

   blockquote { margin: 20px 40px; background-color: #f6ebc1; border-left: 5px solid #fce27c; padding: 20px; }

4. Sekcja 4Tło obrazkowe

   

   To jest bardzo użyteczna technika, bo dzięki temu możemy wykorzystać obrazki jako znaczniki cytatów.

   blockquote { margin: 20px 40px; padding: 20px 0; } blockquote p:before { content: url(cudz.png); height: 64px; width: 64px; } blockquote p:after { content: url(cudz2.png); height: 64px; width: 64px; float: right; }

   blockquote { margin: 20px 40px; padding: 20px 0; } blockquote p:before { content: url(cudz.png); height: 64px; width: 64px; } blockquote p:after { content: url(cudz2.png); height: 64px; width: 64px; float: right; }

5. Sekcja 5Pierwsza wielka litera i style dla wersów

   

   Dzięki wykorzystaniu poniższego kodu, osiagniemy efekt książkowej stylizacji zdań. Jest to bardzo atrakcyjny wizualnie efekt.

   blockquote { margin: 20px 40px; padding: 20px 0; } blockquote p:first-letter { float: left; margin: 3px 5px 1px 0; font-family: "Monotype Corsiva", Georgia, serif; font-size: 36px; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

   blockquote { margin: 20px 40px; padding: 20px 0; } blockquote p:first-letter { float: left; margin: 3px 5px 1px 0; font-family: "Monotype Corsiva", Georgia, serif; font-size: 36px; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

6. Sekcja 6Tekst i kolor

   

   W tym przypadku wykorzystam atrybut content do wstawiania tekstu zamiast obrazka na początek i koniec bloku z cytatem.

   blockquote { margin: 20px 40px; padding: 20px 0; color: #66a; font-weight: bold; font-style: italic; } blockquote p:before { content: '"'; } blockquote p:after { content: '"'; }

   blockquote { margin: 20px 40px; padding: 20px 0; color: #66a; font-weight: bold; font-style: italic; } blockquote p:before { content: '"'; } blockquote p:after { content: '"'; }

Te kilka sposobów na pewno sprawi, że Twoja strona nabierze niepowtarzalnego charakteru.
Wszystkie te efekty działają w Mozilla Firefox 3.6, Internet Explorer 8 i 9, Google Chrome 5, Opera 10. W innych przeglądarkach nie sprawdzałem, ale powinno wszędzie działać.