Magyar Opera

Árnyékolástechnika az új Operában

A sok ilyen-olyan Acid teszt már valószínűleg sokaknak a könyökén jön ki, mert éppen csak az nem derül ki belőle, hogy a mosolygó figura meg a pörgő számok miatt miért is lesz jobb nekem, mint átlagfelhasználónak. Hát legyen itt egy példa, hogy miért. Ha Opera 9.5-öt, Safari 3-at vagy Konquerort használsz, akkor láthatsz néhány érdekes feliratot, amely már CSS3 technikát használ. A Firefox* és Internet Explorer userek sajnos nem fognak látni semmi különöset, viszont ha kipróbálják az új Operát, akkor egyúttal azt is megnézhetik vele, hogy miről maradnak le. Persze azért egetrengető dologra nem kell számítani.

Mint minden hasonló effekt esetében, ezeket sem szabad túlzásba vinni, de mértékkel használva igencsak megdobhatják egy oldal hangulatát. Lássuk akkor a példákat:

Ennek a szövegnek csak egy egyszerű árnyéka van.

Ez egy példa egy különleges kiemelésre.

Ez ismét egy különleges, többszínű kiemelés.

A következő szöveg fehér hátteren fehérrel van írva, így a régebbi böngészőkben láthatatlan:

Ezt a példát csak a "beavatottak" láthatják!

És végül egy lángoló felirat (gy.k. ez nem kép, hanem sima szöveg, próbáld meg kijelölni az egérrel):

I'm the firestarter!

* A Firefox 3.1 alpha már jól kezeli az árnyékolást.

A bejegyzés trackback címe:

https://magyaropera.blog.hu/api/trackback/id/tr37528123

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

2008.06.19. 01:51:45

Háth, hogy ezeket a css trükköket nem mostanában fogják használni az is biztos. Amíg az IE-k népszerűsége még mindig a "több mint sok" kategóriába esik, addig nem hiszem, hogy túl sok helyen kockáztatni mernék ezek használatát. (Maximum blogokban)

Aske 2008.06.19. 02:00:22

Én továbbmegyek. Ezt nemhogy nem használják, ez majdnem akkora parasztvakítás mint az acid testek.

De hírem van! Ma fejeztem próbáltam ki az általam ismert utolsó (viszonylag gyakran használt) alternatív böngészőt, az Apple Safariját.

Teljesen más megközelítést használ mint a többi böngésző, látszik, hogy egyáltalán nem törődnek a userrel. :D
A memória, de különösen a processzorhasználata ugyancsak lesujtó. Szerintem egy vicc (lenne) az egész, ha nem lenne ennyire fürge. Az oldalakat hidegen gyorsabban behozta mint bármelyik másik böngésző. Nem nagyon jött zavarba semmilyen ismert hibás megoldásnál sem.

Ettől még maradok az operánál.

Köszönöm a figyelmet.

fraki 2008.06.19. 03:49:31

A Safari valóban iszonyatosan villám, az ilyen-olyan tesztek közölgetnek ezt-azt, beleértve már az FF3 véglegesét is, de én továbbra is csak azt érzékelem, mellesleg kristálytisztán, hogy a Safari kenterbe ver mindent.

Egyébként meg abszolút apple-ellenes vagyok, nagyon idegen nekem az a sznob világ.

Az árnyékhoz meg annyit, hogy nem könnyű kérdés. Egyértelműen előnyös olyan szempontból, hogy tovább szemantizálódik a web, ezért szerintem valamikor a jövőben el fog terjedni. És nagyon örülnék, ha a két nagymédzsör böngésző is támogatná. Ugyanakkor gátolja még az elterjedését, hogy a pixelpontos psd-konverzió kicsit megnehezedik, márpedig általában a psd-készítő dizájner és a sitebuilder egy projektben két különböző ember szokott lenni. Igaz, ez talán nem olyan nagy probléma, hasonló volt helyzet kicsit az antialiasos szövegekkel.

littlemat 2008.06.19. 07:43:52

A tüzes effektnél van egy pici bug egyébként. Ha kijelöltem a szavak közti szóközt, a "tűz" széle eltűnt. Nomeg érezhetően többet kell számolni a megjelenítéséhez.

A webkit (Safari motor) pedig már pár hónapja felkeltette az érdeklődésemet. Ha az Operához hasonló (könnyen, szinte minden beállítható) UI-t készítenének, szerintem mindent vinne.

macskafaraok 2008.06.19. 09:13:30

Mivan gyerekek, lassan Safari forum lesz itt? :)
(mondom en, aki mar raallt teljesen a Safari-ra...)
Ja, csak a Lángolós felirat nem megy, az összes többi szépen jön (Saf.)

Ronyn · http://www.ronyn.hu 2008.06.19. 10:22:00

Plusz érdekesség:
Minivel megjelenik a fehér felirat(ez még nem nagy szám,ez alap),viszont az rss-ben mutatja az árnyékolást is a Mini!!

madve2 2008.06.19. 10:58:04

Emlékszem, amikor 8-10 éve először leültem weblapot csinálni, órákig kerestem a referenciában a szövegárnyékot, mert nem tudtam elhinni, hogy nincs =) Diszkréten használva szerintem igenis fel tudja dobni egy oldal hangulatát, pl. a lángolóért nem vagyok úgy nagyon oda, de itt a Magyar Opera fejlécében szerintem marha jól néz ki.

(Safarit még nem próbáltam, IE7-et is csak tegnap raktam föl, *két* böngésző - Opera, FF - nekem már tényleg elég =))

törölt-felhasználó (törölt) 2008.06.19. 11:00:40

Ha az IE8 támogatni fogja, akkor használni fogják és a FF fog beégni.
Legalább sokkal értelmesebb mint a flash, de még a PhotoShop-os grafikai dzsuváktól is. És erőforráskímélőbb is.
De vannak jó kezdeményezések minden oldalról. Ott van az IE8 féle WebSlices és a FF Offline módja, ami támogatás hiányában jelenleg egy felesleges menüpont, de van bennük fantázia. Utóbbi azért is érdekes, mert volt a Google részéről egy hasonló kezdeményezés (GoogleGears), igaz csak az RSS-t érintette, de ezt a dolgot érdemesebb egy egységes (böngésző) oldalról megközelíteni, mert ha egy csomó oldal különböző plugineket kínálna és minden oldalhoz külön plugin kellene, akkor tele lenne szemetelve a böngésző.

Aske: Lehet, hogy parasztvakítás, de a userek 90%-a rá van kattanva a design-ra. Ezt mutatja a Gportal és hasonlók népszerűsége is. :D Egy 1.0-s user-t nem fogja érdekelni mennyire gyilkolja a C2D prociját és a 4 giga ramjából mennyit eszik a napi netezése, maximum annyit vesz észre, hogy kicsit nagyobb zaj szűrődik ki a gépházból. De a szabványos HTML oldalakat HTML nyújtotta formázásokkal, ahol a PHP és JavaScript elemek csak mértékkel és csak szigorúan kényelmi szempontból vannak jelen már csak egy szűk power user réteg tud értékelni, lassan már Pistikéket is csak bannerekkel telib.ott full flashes oldalakkal lehet fogni. :))) Akkor meg miről beszélünk? Ez legalább lehetőséget ad az erőforráskímélő és szabványos csinosításra.

Karbonade · http://magyaropera.blog.hu 2008.06.19. 11:10:27

Itt a blogon például több helyen is van árnyék, és eddig még senki sem panaszkodott rájuk. FF-ben is teljesen élvezhető az oldal, annak ellenére, hogy ezek ott nem látszanak, szóval szerintem jól használható ez. Nem szabad túlzásba vinni, ahogy a cikkben is írtam.

Itt egyébként a fejlécben van árnyék, a menüben, az oldalsáv dobozok fejléceiben, és a postok címében. Még akarok tenni egy pár helyre, de csak mértékkel.

Karbonade · http://magyaropera.blog.hu 2008.06.19. 11:11:44

A tűz effekt nyilván túlzás, de ezek csak példák :)

2008.06.19. 12:17:56

Azt viszont jó látni, hogy fejlődnek a dolgok.

Dorozs · http://kdorozs.blogol.hu 2008.06.19. 12:21:05

Nagyon jó, kössz a post-ot... Tegnap frissítettem az Opera-mat és ambivalensek a tapasztalapatim, de ez, amiről írsz, tetszik... 9.50 marad :)

Mycronet 2008.06.19. 13:52:03

"smv 2008.06.19. 12:17:56
Azt viszont jó látni, hogy fejlődnek a dolgok."

Jahh fejlődünk, de hová?
Meg aztán a fejlődésnek ára van!!!
Fejlődés = Lassulás.
Elővettem a régebbi gépemet, gondoltam kipróbálom, rápakoltam az új operát, sebesség javulás szinte semmi.

Csak erősebb gépen van jelentős sebesség javulás, de lényegtelen mivel a fejlődés miatt a net sebessége (honlapok betöltése) folyamatosan csökken. Ez miatt van szükségün folyamatosan nagyobb net kapcsolatra csak hát az a gond, hogy azt legtöbszőr csak úgy kapunk, ha váltunk és többet fizetünk. :))

törölt-felhasználó (törölt) 2008.06.19. 14:08:07

Mycronet: Ezt az oldalt például mivel töltötte be lassabban, mint mondjuk ugyanezen a blogon ezt: magyaropera.blog.hu/2007/07/04/leirasok ahol csak szöveg van és kevés komment? Az index.hu többet zabál, ha nem tiltod le a reklámokat.
A betöltési sebesség azért csökken mert túlterheltek a szerverek, vagy ezt megelőzendő limitálva van a sebesség. A blog.hu is néha szokott gyengélkedni.

A CSS3 pedig épp azért hasznos, mert gyorsabban töltődik be, mint akár a sima jpg, png és gif képek.

cousin333 · http://magyaropera.blog.hu 2008.06.19. 16:51:20

Azt a másodikat (a pirosat) lehet, hogy ki kellene próbálni az itteni blogbejegyzések címeiben :)

cousin333 · http://magyaropera.blog.hu 2008.06.19. 16:54:36

Na, egy kicst feldobtam a cikkben levő linket is. Cool...:)

Karbonade · http://magyaropera.blog.hu 2008.06.19. 16:58:16

valami hasonlót be akarok tenni a hoverre globálisan is :) mondjuk azért egy fokkal diszkrétebbet.

tetra · http://unsigned.freeblog.hu/ 2008.06.19. 17:43:22

Ti honnan gyűjtitek be az összes Operás-Firefoxos cikket?? :D

tetra · http://unsigned.freeblog.hu/ 2008.06.19. 18:27:27

Mármint a bal oldali sávra gondolok, teljesen random helyekről látom, hogy megjelennek a kapcsolódó cikkek... :)

zellei 2008.06.20. 19:56:58

Opera 9.51 Beta (Build 10071) valami infó lesz?

zellei 2008.06.20. 19:57:42

ígérem legközelebb ragozok is :D

sergei 2008.06.21. 17:28:03

Sziasztok nekem FF3 simán megjeleníti a beavatottaknak szóló szöveget :)

Karbonade · http://magyaropera.blog.hu 2008.06.21. 17:41:44

sergei, hát ha kijelölöd, akkor biztos. Amúgy nem kéne megjelenítse, ha minden ok benne...

sergei 2008.06.22. 04:03:24

Kijelölés nélkül.
kepfeltoltes.hu/080622/render_www.kepfeltoltes.hu_.jpg

Ajánlom figyelmetekbe: www.prog.hu/tarsalgo/50049-11/Acid+2+Test-Browser+War+2.html?pop=0

A legfrissebb FF3.1 alpha már a tüzes feliratot is hibátlanul jeleníti meg. (sőt, véleményem szerint szebben rendereli, de nézzétek meg, a linkelt fórumon van egy screenshot)

Karbonade · http://magyaropera.blog.hu 2008.06.22. 08:37:04

Igen, a 3.1 alpha megjeleníti, de én a véglegesről beszéltem.

sergei 2008.06.22. 14:42:39

A véglegesnek csak a tüzes felirattal van problémája, ott van a screenshoton.

Karbonade · http://magyaropera.blog.hu 2008.06.22. 14:48:41

Valamit állítottál rajta? Nálam egyiknél sincs semmi árnyék Firefox 3-mal. És a text-shadow leírásnál azt olvastam, hogy csak a Firefox 3.1 fogja támogatni ezt a CSS tulajdonságot.

sergei 2008.06.22. 14:49:36

Szóval na.
3.0 -> Árnyékolás rendben, lásd: kepfeltoltes.hu/080622/render_www.kepfeltoltes.hu_.jpg

3.1alpha -> Árnyékolás ÉS tüzes felirat rendben, lásd: kepfeltoltes.hu/080621/263075724xyz_www.kepfeltoltes.hu_.jpg

Karbonade · http://magyaropera.blog.hu 2008.06.22. 14:56:23

Nekem viszont így néz ki a végleges Firefox 3-mal. Nem lehet, hogy nálad valami összekeveredett a 3.1-essel?
m.blog.hu/ma/magyaropera/image/firefox/firefox-shadow.png

sergei 2008.06.22. 14:57:44

Nem, mert nincs fent. Soha nem is volt. A 3.1-ről készült képeket nem én készítettem, hanem egy másik fórumozó.

törölt-felhasználó (törölt) 2008.06.22. 15:05:15

Vagy csak ügyesen dolgozik PhotoShoppal. Akárhogy is az tény, hogy tisztán telepített FF3 nem támogatja egyiket sem, ezt még a Mozilla fejlesztői is elismerik, hogy majd csak a 3.1 fogja. Én is tudok csinálni screenshotot, hogy az Opera támogatja az ActiveX-et minden plugin nélkül , csak nincs időm órákon át szerkesztgetni egy screenshotot. :)))

sergei 2008.06.22. 15:28:42

Ne légy gyerekes. Egyébként megvan a titok nyitja: Valóban fent volt a TextShadow, csak nem emlékeztem rá (anno még a kettesemre tettem fel, és a 3.0 átvette a pluginokat, én meg elfeledkeztem róla). A screenshoton is látszik a statusbar jobb végén, ott egy kék "A" betű. Ha letiltom, valóban nem működik. De a 3.1 tutira tudja: bugzilla.mozilla.org/show_bug.cgi?id=10713

Sajnálom a félreértést.

törölt-felhasználó (törölt) 2008.06.22. 15:44:37

Nem vagyok gyerekes meg nem is ellened irányult, de találkoztam már pár olyan állattal, aki képes volt hasonlóra, hogy az ál-igazát bizonyítsa.

sergei 2008.06.22. 15:45:45

Akkor bocs, nekem meg se fordult a fejemben, hogy vannak ilyenek.

Y@hOO 2008.06.22. 18:12:52

azt a 3.1-s képet én csináltam a tegnapi nightly buildel, 2008 06 09-s webkittel és opera 9.51-l, nem photoshop, aki nem hiszi annak itt a link 3.1 nightlyhoz:

ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Y@hOO 2008.06.22. 18:15:08

safari 3.1.1 - megpatchelve 2008 06 09-s webkittel
firefox 3.1 pre-alpha 20080621
opera 9.51

előző komment nem lett túl értelmes :D

sergei 2008.06.22. 18:18:56

A 3.1-et nem vitatja senki :)

Y@hOO 2008.06.22. 18:19:47

ja télleg, ezt benéztem :X

penge™ · http://www.thevenusproject.com/ 2009.08.14. 11:56:18

www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html

Egész jó. Habár szerintem a Chrome 3.0 rendereli a legszebben, de az Opera is közel áll hozzá, csak mintha Chrome-ban szebbek lennének a betűk élsimításai.

FF 3.5 alatt megfagy, IE8 alatt meg (nem meglepő módon) nem megy.

Dzsini 2009.08.14. 21:44:25

nálam chrome 3.0.195.6 alatt bugos - ha vízszintesen jobbra húzom a kurzort, az árnyék a szöveg fölé kerül. Opera onnantól hibázik vele, ha egyszer kijelöltem a szöveg egy részét, igaz Chrome alatt kijelölni se enged...

cousin333 · http://magyaropera.blog.hu 2009.08.14. 22:21:41

@Dzsini: Nálam ugyanez van (Chrome 3.0.197.11). Ha Operában kijelölés után mellékattintok és egy kicsit mozgatom a kurzort, akkor megjavul.
süti beállítások módosítása