Text shadow bemutatása
szeptember 13, 2009 @ 17:40
Eddig ha árnyékot akartunk adni egy szöveghez nem választhattunk kifejezetten erre a célra kitalált megoldást. Vagy képként tettük fel a szöveget a weboldalra vagy CSS 2.1 segítségével a szöveg egy újabb másolatát helyeztük el 1-2 pixel távolságra az eredetitől, hogy úgy tűnjön, mintha annak árnyéka lenne. Egyik sem szerencsés.
Az előbbi megoldás azért nem jó, mert sem a keresők, sem a felolvasóprogramok nem tudják a képen szereplő szöveget olvasni, utóbbi pedig azért nem, mert ha valahol ki van kapcsolva a CSS, akkor a szöveg kétszer jelenik meg. A CSS 3 text-shadow tulajdonsága az egyike azon kevés CSS 3 attribútumnak, amelyek már mind a 4 CSS-3-mat támogató böngészőben elérhetők. Sőt a Konqueror és az iCab is támogatják. Használata rendkívül egyszerű, mint azt a következő példa is mutatja:
.shadowText {
text-shadow: 2px 2px 2px #000;
}
Ez a kódrészlet az árnyékot a szöveghez képest 2 pixellel jobbra, 2 pixellel lefelé jeleníti meg, és 2 pixelnyi homályosítást (blur) végez rajta. A #000 az árnyék színe, amelyet tetszés szerint változtathatunk. Egyébként ezt a beállítást használom a blog poszt-címeihez is – aki CSS-3-képes böngészőt használ, láthatja. Itt látható egy külön példa, egyszer CSS 3-mal megvalósítva, egyszer pedig a CSS-mas megvalósítás screen-shotja, azok számára, akik nem CSS 3 kompatibilis böngészőt használnak.
Végezetül egy stilisztikai jó tanács: mint minden díszítőelemet ezt is csak mértékkel ajánlott használni. Ha minden sorunk ilyen, azzal lerontjuk a design-t, ahelyett, hogy javítanánk, ráadásul még a szövegünk is nehezebben lesz olvasható.
Csuri — 2009. szeptember 25. péntek @ 09:43
Szorgalmasan olvasgatok és csak tátom itt a számat, hogy mik vannak és miket tudtok
srmark — 2010. január 29. péntek @ 21:41
Ez is hasznos dolog a CSS 3-ban, most már nem csak szövegre lehet árnyékot tenni hanem dobozokra, tehát akármire, ehhez a cikkhez is hozzáfűzném hogy lehet bővíteni, vesszővel elválasztva több réteg árnyékot is rá lehet tenni, ha túl halvány lenne az 1 réteg árnyék, vagy ha azt akarjuk hogy olyan legyen mint a focistáknak a stadionba (4 db árnyék 4 irányba), stb..
kb így:
.shadowText {
text-shadow: 2px 2px 2px #000, 2px 2px 5px #000, 2px 2px 10px 000;
}
Több info itt:
https://developer.mozilla.org/en/CSS/-moz-box-shadow
adam — 2010. február 13. szombat @ 21:02
@smark- nekem a text-shadow csak chrome alatt működik, ie8 és safari alatt nem; A többrétegű text-shadow-t pedig egyik alatt se tudom működésre bírni. (a böngészőket a legfrissebb verziószámra frissítettem előtte)
adam — 2010. február 13. szombat @ 21:05
ok.. látom a linkelt oldalon, csak firefox, seamonkey valamint a thunderbird támogatja csak… egyiket se használom
azért remélem kialakul mihamarább egy egységes css szabvány amit 100%-osan támogat minden böngésző.
jabbee — 2010. február 19. péntek @ 04:00
A példában mivel készítetted a screenshotot? Nekem chrome egészen máshogyan árnyékolja le. A kép szebb. Jó dolgok vannak a css3-ban, csak kb. majd akkor fogunk használhatóan beszélni róla, mikor majd elkezdik a css4-et integrálni a böngészőkbe. Akkor majd talán elegendő ember fog olyan böngészőt használni, ami támogatja. 2009(!) júliusában volt egy megrendelőm, akinek módosítanom kellett az oldalán valamit, mert hogy azzal baj van. Néztem, kérdeztem hogy mi baj van vele, mire kiderült hogy ie5.5-öt használt. Ha nagy értékű termékeid vannak, elég ha egy vásárlót veszítesz el miatta. Bármennyire tudjuk pl, hogy az ie milyen böngésző, elég csak megnézni bármelyik oldalon a látogatottsági adatokat.
srmark — 2010. február 19. péntek @ 10:49
Ahogy korábban említésre került ezeket a CSS-eket 3 böngésző támogatja egyelőre, a Firefox, a Safari és a Chrome, utóbbi kettő a webkit motort használja ezért közel azonos módon jeleníti meg (nálam csak az árnyékok élsimításában volt alig észrevehető különbség), de mivel ezek még nem egy kész szabvány részei mindegyik böngészőnek más kód kell, a firefoxnak és más mozilla termékeknek egy -moz- előtagot kell a kód elejére írni, a webkitet használóknak pedig azt hogy -webkit- és az oldalon amit feljebb linkeltem ez le is van írva, kivétel azonban a text-shadow amit előtag nélkül is ugyanúgy kezel mindegyik böngésző.
Egy ismerősömmel csinálnunk egy saját oldalt, ahol minden lehetséges dolgot kipróbálunk akit érdekel nézze meg:
http://www.hotdog.hu/magazin/magazin.hot?m_id=29937
Röviden minden fontosabb böngésző külön design-t kapott annak megfelelően hogy mire képesek, (IE, Firefox, Safari, Chrome, Opera), és meglepő módon a CSS 3-ban a legjobbnak a webkites motort használó Safari bizonyult, ugyanis beletettek egy CSS animációt, amivel Javascriptek nélkül pár soros kódokkal látványos doboz mozgatást, forgást, nagyítást és egyebeket lehet csinálni. Akinek felkeltettem az érdeklődését nézze meg az oldalunkat.
admin — 2010. február 19. péntek @ 12:35
@jabee: A kép csak illusztráció, úgyhogy az nem CSS 3-mal, hanem Photoshoppal készült. De a CSS 3-ban is lehet variálni, attól függően, hogy hány pixel távolságot és hány pixeles árnyékot akarsz.
@srmark: Nekem is az a tapasztalatom, hogy a Webkit-es böngészők (Safari és Chrome) járnak legelől a CSS 3 támogatásban. Aki még nem ismeri, annak érdemes megnéznie a http://www.modernizr.com/ oldalt, ahol egyrészt visszajelzést kaphatunk a böngészőnk CSS 3 tudásáról, másrészt lehtölthetjük a javascriptet, ami egyszerűen teszi lehetővé, hogy külön stílust készítsünk CSS 3-ra és az azt nem támogató böngészőkre.