Hozzászólás: Text shadow bemutatása

Szerző: admin

admin — Fri, 19 Feb 2010 11:35:49 +0000

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

Szerző: srmark

srmark — Fri, 19 Feb 2010 09:49:26 +0000

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.

Szerző: jabbee

jabbee — Fri, 19 Feb 2010 03:00:46 +0000

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.

Szerző: adam

adam — Sat, 13 Feb 2010 20:05:43 +0000

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

Szerző: adam

adam — Sat, 13 Feb 2010 20:02:26 +0000

@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)

Szerző: srmark

srmark — Fri, 29 Jan 2010 20:41:42 +0000

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

Szerző: Csuri

Csuri — Fri, 25 Sep 2009 07:43:46 +0000

Szorgalmasan olvasgatok és csak tátom itt a számat, hogy mik vannak és miket tudtok