Webmark

Blockquote

Index » Kategoria: CSS, Tutoriale » Tagi:

Ostatnio ozdobiłem wydzielony blok tekstu – <blockquote> (dłuĹźszy cytat) cudzysłowem, ktĂłrego nie mĂłgłbym uzyskać za pomocą normalnie sformatowanego tekstu. Sztuczka jest dość prosta i łatwa w zastosowaniu na własnej stronie czy blogu. NaleĹźy pamiętać, Ĺźe z samej nazwy znacznika wynika, Ĺźe jest to… cytat blokowy a zatem podobnie jak warstwy jest wyświetlany blokowo. Domyślnie wspomniany blok tekstu posiada odpowiednie wcięcie (o ile nie jest sformatowany inaczej) i moĹźe zawierać w sobie inne elementy blokowe.

Przykład zastosowanie <blockquote> bez formatowania.

Morbi id lectus. Nullam pharetra faucibus. Ut libero lacinia quam tempus dignissim. Donec eget luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc mollis, turpis viverra ligula. Lorem ipsum primis in faucibus non, tristique senectus et odio. Nam vestibulum.

A taki mniej więcej efekt uzyskamy na koniec niniejszego minitutoriala.

Morbi eleifend placerat. Mauris magna et libero. Morbi id lectus. Nullam pharetra faucibus. Ut libero lacinia quam tempus dignissim. Donec eget luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc mollis, turpis viverra ligula. Lorem ipsum primis in faucibus non, tristique senectus et odio. Nam vestibulum. Cras aliquet. Aliquam in posuere ante ipsum non mi libero, posuere eu, pulvinar velit. Vivamus nec diam id tortor. Etiam et netus et ipsum. Nunc nunc.

Uważni, zauważyli zapewne, dziwnie wielką i innego kroju literę rozpoczynającą cytat, ale o tym nieco później. Aby uzyskać dość dobrze prezentujące się cudzysłowy wykorzystałem dwa, wcześniej przygotowane, niewielkie gify z cudzysłowem otwierającym i zamykającym, które ustawiłem jako tło <blockquote> i akapitu <p>. Prawidłowo bowiem, cytat blokowy powinien zawierać akapit tekstu ujęty w znaczniki <p> i </p>.

[code lang="html"]

Tutaj cytat

[/code]

Jeśli zatem zarówno cytat blokowy jaki i akapit są elementami blokowymi i mogą "zawierać się w sobie", obrazek z cudzysłowem otwierającym możemy ustawić jako niepowtarzalne tło w górnym, lewym rogu blockquote zaś gif zamykający w prawym, dolnym roku akapitu. W takim przypadku oba cudzysłowy pozostaną w odpowiednich, wcześniej sformatowanych miejscach, bez względu na objętość tekstu cytatu.

Aby umieścić obrazki/cudzysłowy w odpowiednich rogach z pomocą css ustawiamy je jako niepowtarzalne tło zarówno blockquote jak i akapitu, który jest w nim zawarty.

[code lang="css"]
blockquote{background-color:#fff url(gfx/cudzy_pocz.gif) left top no-repeat;}
blockquote p{background-color:#fff url(gfx/cudzy_koniec.gif) bottom right no-repeat;}
[/code]

Następnie należy odpowiednio "rozsunąć" cudzysłowy nadając w/w elementom blokowym odpowiednie marginesy i dopełnienia. Przykładowy zapis sformatowanego blockquote mógłby wyglądać następująco:

[code lang="css"]
blockquote{font-weight:bold; background:#fff url(gfx/cudzy_pocz.gif) left top no-repeat; margin:10px 0; padding:0 6px}
blockquote p{background:#fff url(gfx/cudzy_koniec.gif) bottom right no-repeat; padding:0 20px}
[/code]

Dzięki odpowiednim dopełnieniom ("paddingom") cudzysłowy (czyli obrazki tła) zostały rozsunięte i bez względu na ilość cytowanego tekstu pozostaną na swoim miejscu. I to juĹź prawie wszystko. Do wyjaśnienia pozostała ta dziwna pierwsza litera cytatu. Otóş aby jeszcze bardziej zaznaczyć charakter cytowanego tekstu wyróşniłem pierwszą literę akapitu: m. innymi zmieniłem jej krĂłj i wielkość – moĹźna rĂłwnieĹź zmienić jej kolor bądĹş zawrzeć w jakimś tle

[code lang="css"]
blockquote p:first-letter{font:bold 1.4em Georgia, "Times New Roman", Times, serif; text-transform:uppercase}
[/code]

Takim sposobem łatwo i bezboleśnie, nie używając skryptów można upiększyć i wyróżnić cytowany blok tekstu. Oczywiście można użyć innej grafiki obejmującej tekst: listków, gwiazdek i innych ozdobników oddających charakter danej strony.
Opisany sposób można wykorzystać również do nadawania tła warstwom. Póki co CSS 2 nie zezwala na nadanie jednej warstwie dwóch różnych teł (ale to brzmi). O ile jednak w warstwie znajduje sie tekst w akapitach czy też inny element blokowy lub taki, któremu nadane zostaną właściwości blokowe (display:block), można w w/w opisany urozmaicać warstwy tłem "rosnącym" w zależności od wypełnienia takiego elementu.

Na koniec przypominam o istniejącej, liniowej formie cytowania za pomocą znacznika <q>, który jednak służy do wyróżnienia tylko krótkich cytatów. A tutaj dość stary, ale ciągle godny wykorzystania sposób na cudzysłów bez używania obrazków.

---

* * *

• Komentarze
• Archiwum