Blockquote
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.
* * *
-
Napisał: Adam — 13/11/2008 @ 10:40
Mam to szczÄĹcie, Ĺźe do joomla jest plugin, ktĂłry mi umoĹźliwia tych cytatĂłw wstawianie.
-
Napisał: Kurdupel — 03/03/2010 @ 10:26
DziÄki. PomogĹo!
-
Napisał: prĂłba — 21/10/2010 @ 19:53
prĂłba