chevron-left chevron-right

[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. Kolory i ramki

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

    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;
    }
  2. Wstawianie tła

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

    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;
    }
  3. Tło i ramki

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

    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;
    }
  4. Tło obrazkowe

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

    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;
    }
  5. Pierwsza wielka litera i style dla wersów

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

    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;
    }
  6. Tekst i kolor

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

    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ć.

  • Bardzo podoba mi się pozycja czwarta, lecz wolałbym, aby ten obrazek rozpoczęcia cytatu wchodził niżej w tekst, tak aby zajmował dwie linijki 😉