Sziasztok! Nagyon sok oldalon láttam olyat, hogy bizonyos elemek körül "vetett árnyék" van. Például, képeknek, a menüsornak, szövegdobozoknak, stb. Megosztaná velem valaki, hogy ez hogy lehet megvalósítani?

Ez így hirtelen sok, mert pl. a doboznak, keretnek, szövegnek is másképp kell megadni, és jelenleg csak a Gecko motoros böngészőkben működik, Internet Explorer-ben nem igazán ...

Mindegyik érdekel, vagy csak egy bizonyos árnyékolás? Megkeresem mindegyiket, ha kéred!

Mellesleg nagyon sok oldalon ezt "képileg" oldják meg.

Igazság szerint érdekelne mind. De az is jó ám, ha linkeket adsz ahol érthetően leírják a dolog hogyanját. Köszi.

"Képileg" is jó lenne akár, bár célom, hogy a weboldalam mérete minél kisebb legyen. (Bár, nem tudom, hogy ez a "képileg" módszer mennyire dobja meg a méretet. De ha minden kötél szakad, úgy is jó lesz.)

Linket éppen keresek, mert pont tegnap néztem át a szöveg keret-árnyékolást. Ezt ha megtalálom, belinkelem Neked. Magyarázat: Kivétel nélkül angol oldalak ...

Addig viszont itt a szöveg árnyékolás módja:

css:


html rész:
<- ez az alapszöveg, ez veti az árnyékot, aminek paramétereit a css-ben beállítottál.

A text-ident-el, és a margin-top-al tudod az árnyék helyzetét beállítani. A színét a color-al.

Köszönöm szépen. Mindjárt neki is esek a dolognak. Az angollal nincs probléma (ilyen szakon végeztem az egyetemet ).

Na, itt van a keret-árnyék: http://www.wubbleyew.com/tests/dropshadows.htm

Itt van mégegy, magyarázattal: http://www.alistapart.com/articles/cssdropshadows

Nem akarok ünneprontó lenni, de szerintem jelenleg még kizárólag képi árnyékokban érdemes gondolkodni.

Köszönöm a segítséget. Ha azt mondjátok, hogy képpel csináljam meg, akkor azzal fogom.

Már miért?
Nagyon szépen meg lehet csinálni css-sel is! Ja, hogy az Internet Explorer nem értelmezi? Ja kérem ...

Szerintem az elég nagy baj.

Hát eléggé...

Az új weboldalamon a jobb felső dobozban a linkek pl. másképp viselkednek az IE-ben, és a Firefoxban is. De mindkét helyen használható az oldal. Ha az Internet Explorer jelenleg nem, vagy rosszul értelmez dolgokat, akkor ez van. Attól még lehet jó egy weboldal, maximum az alternatív böngészőket használók többet kapnak a weboldalból.

Ugyanez vonatkozik az árnyékolásra is: Az Internet Explorerben maximum nem lesz árnyék. De attól még használható lehet az adott oldal.

Az általam ajánlott oldalon lévő tippek azonban úgy emlékszem, Internet Explorerben is működnek.

Nem a weboldalt minősíti, hanem az IE-t, ebben igazad van. És sajnos sok mindenben meg is köti kezünket az IE. De úgy vagyok vele, ha már az emberek 80%-a még mindig ezt használja, akkor lássák ugyanazt, mint ha szabványos böngészőben néznék.
Úgy látszik, ez egy felfogásbeli különbség.

Ugyanazt látják csak ici-picit másképpen. És igazából senkinek nem tűnik fel semmi, amíg nem egyszerre két különböző böngészővel nézi ...

Igen, én sem a dotted-aláhúzás különbségeire gondoltam (igaz, ettől függetlenül én akkor sem használom ), hanem durva pozícionálási hibákra. Szerintem ez is kifejezetten zavaró. Szép kis oldal, nézzétek meg Foxival és IE-vel is.

u.i. Most veszem észre, kezdünk átmenni OFF-ba. Szeretnék megkérni egy moderátort, hogy legyen szíves az ide már nem illő hozzászólásokat átteni a Pozícionálási megoldások című topicba! Köszönöm.

Egy praktikus kérdés. Ha képpel oldom meg az árnyékolást, akkor csinálok egy nagy L alakú "árnyékképet" és az jó mindenféle méretű képhez? Vagy pedig külön kell csinálni árnyékot, mondjuk, egy 80×100-as és egy 400×600-as képhez? Vagy a méret nem lényeg, a CSS-ben definiált utasítások alapján az árnyék nem fog túllógni a kép méterein, hanem csak a sarkokig fog érni? (Remélem, nem okoz túl sok fejtörést mondataim értelmezése! )

Ahány kép, annyi árnyék. Az árnyék-képet háttérként kell betenni, ami akkora legyen, mint a kép, aminek az árnyékot csinálod, plusz a a "túllógás".

tehát: 400*600-as képhez kell csinálni egy képet, megcsinálva a képen az árnyékot. Ez a kép egy egyszerű gif lehet, barajzolva rajta az árnyék színét, vastagságát, stb. Ha az árnyéknak 5px-nyit szeretnél, akkor ezen kép 405*605 legyen. Az eredeti képet pedig a táblázat cellájának, vagy div-nek a bal felső sarkába kell pozícionálni.

Világos. Köszi. Gondoltam, hogy nem úszható meg ilyen könnyen a dolog. Csak egy picit reménykedtem.

Igen, ezzel sajnos el kell szöszölni, de a végeredmény annál tetszetősebb.
Én sem hagyok ki soha egyetlen árnyékolási lehetőséget sem. Hamarosan meglátjátok.

No, akkor lelkiekben felkészítem magam és belekezdek hamarosan.

Na csak hogy egyértelmű legyen a kivitelezés:

Ezt árnyékolnánk: (100*100)



Ez lesz a fogadó kép. (Árnyék) (105*105) Képszerkesztő programban meg lehet rajzolni az árnyékot.



Összerakjuk a kettőt, és kiszínezzük egy semleges színnel az átlátszóvá teendő részt: (Transparent)



Végül átlátszóvá tesszük, és kész is.

Köszi-köszi! Ilyen szájbarágósan, illusztráltan kellett nekem.

Még egy utolsó kérdés. Leírnád egyszerűen, címszavakban, hogy hogyan kell, mondjuk, a Photoshopban ezt az árnyék képet létrehozni.

Mégsem kell elmagyarázni, mert az általad említett cikkben vannak mintaképek (800×600-as; az biztos elég lesz).