Súgó - Keresés - Tagok - Naptár
Teljes változat: Árnyékolás CSS-sel
PC WORLD Segélyvonal > WEBSAROK > Webszerkesztés, programozás > CSS
Darcy Tucker
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?
Kovács Gyula (MiniDisc)
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! ani_wink.gif

Mellesleg nagyon sok oldalon ezt "képileg" oldják meg. smile.gif
Darcy Tucker
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.)
Kovács Gyula (MiniDisc)
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:
KÓD
#h1shadow {
font-weight: bold;
font-size: 22px;
color: #0033cc;
text-align: center;
}

div[id=h1shadow] {
color: #0084c4 !important;
}

#h1shadow:after {
content: 'Szöveg, ami árnyékolódjon'; <-ez az árnyék
color: #0033cc;
display: block;
text-indent: -0.9ex;
margin-top: -1.3em;
}


html rész:
KÓD
<div id="h1shadow">Szöveg, ami árnyékolódjon</div>
<- 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.
Darcy Tucker
Köszönöm szépen. Mindjárt neki is esek a dolognak. Az angollal nincs probléma (ilyen szakon végeztem az egyetemet ani_wink.gif).
Kovács Gyula (MiniDisc)
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
google
Nem akarok ünneprontó lenni, de szerintem jelenleg még kizárólag képi árnyékokban érdemes gondolkodni. sad.gif blush.gif
Darcy Tucker
Köszönöm a segítséget. Ha azt mondjátok, hogy képpel csináljam meg, akkor azzal fogom.
Kovács Gyula (MiniDisc)
IDÉZET(google @ 2005. július 19., 23:19 - kedd)
Nem akarok ünneprontó lenni, de szerintem jelenleg még kizárólag képi árnyékokban érdemes gondolkodni. sad.gif  blush.gif

Már miért?
Nagyon szépen meg lehet csinálni css-sel is! Ja, hogy az Internet Explorer nem értelmezi? Ja kérem ... biggrin.gif
google
Szerintem az elég nagy baj. bulb.gif exclamat.gif
apacs
Hát eléggé... roll.gif
Kovács Gyula (MiniDisc)
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. ani_wink.gif

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.
google
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. ani_wink.gif
Kovács Gyula (MiniDisc)
Ugyanazt látják csak ici-picit másképpen. ani_wink.gif É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 ... biggrin.gif
google
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 ani_wink.gif blush.gif ), 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. bulb.gif

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.
Darcy Tucker
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! blush.gif smile.gif)
Kovács Gyula (MiniDisc)
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.
Darcy Tucker
Világos. Köszi. Gondoltam, hogy nem úszható meg ilyen könnyen a dolog. Csak egy picit reménykedtem. ani_wink.gif smile.gif
google
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. ani_wink.gif
Darcy Tucker
No, akkor lelkiekben felkészítem magam és belekezdek hamarosan. smile.gif
Kovács Gyula (MiniDisc)
Na csak hogy egyértelmű legyen a kivitelezés: biggrin.gif

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

IPB kép

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

IPB kép

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

IPB kép

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

IPB kép
Darcy Tucker
Köszi-köszi! worship.gif Ilyen szájbarágósan, illusztráltan kellett nekem. blush.gif smile.gif

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.
Darcy Tucker
Mégsem kell elmagyarázni, mert az általad említett cikkben vannak mintaképek (800×600-as; az biztos elég lesz).
Ez a tartalom egy lebutítottváltozata. A teljes változat képekkel kiegészült megtekintéséhez kérünk, kattints ide.