Jump to content
GSForum - Segélyvonal

Árnyékolás CSS-sel


Darcy Tucker
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

google

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

Link to comment
Share on other sites

Darcy Tucker

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

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)
Nem akarok ünneprontó lenni, de szerintem jelenleg még kizárólag képi árnyékokban érdemes gondolkodni. :(  :upsz:

Már miért?

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

Link to comment
Share on other sites

google

Szerintem az elég nagy baj. :ötlet: :!:

Link to comment
Share on other sites

apacs

Hát eléggé... :hááát:

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ;):upsz: ), 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. :ötlet:

 

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.

Link to comment
Share on other sites

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! :upsz::))

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Darcy Tucker

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Darcy Tucker

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

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)

Na csak hogy egyértelmû legyen a kivitelezés: :D

 

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

Link to comment
Share on other sites

Darcy Tucker

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

 

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.

Link to comment
Share on other sites

Darcy Tucker

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...