Árnyékolás CSS-sel

[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 (MiniDisk)]

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.

[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 (MiniDisk)]

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:

#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:

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

[Kovács Gyula (MiniDisk)]

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.

[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 (MiniDisk)]

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

Már miért?

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

[google]

Szerintem az elég nagy baj. :!:

[apacs]

Hát eléggé...

[Kovács Gyula (MiniDisk)]

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.

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

[Kovács Gyula (MiniDisk)]

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

[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 ), 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.

[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! )

[Kovács Gyula (MiniDisk)]

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.

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

[Darcy Tucker]

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

[Kovács Gyula (MiniDisk)]

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.

 

[Darcy Tucker]

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.

[Darcy Tucker]

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