[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> |
-
Kolory 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; }
-
Wstawianie 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; }
-
Tł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; }
-
Tł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; }
-
Pierwsza 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; }
-
Tekst 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: '"'; }
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ć.