Darcy Tucker 0 Share Posted July 19, 2005 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 More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 19, 2005 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 More sharing options...
Darcy Tucker 0 Author Share Posted July 19, 2005 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 More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 19, 2005 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 More sharing options...
Darcy Tucker 0 Author Share Posted July 19, 2005 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 More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 19, 2005 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 Link to comment Share on other sites More sharing options...
google 0 Share Posted July 19, 2005 Nem akarok ünneprontó lenni, de szerintem jelenleg még kizárólag képi árnyékokban érdemes gondolkodni. Link to comment Share on other sites More sharing options...
Darcy Tucker 0 Author Share Posted July 20, 2005 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 More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 20, 2005 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 ... Link to comment Share on other sites More sharing options...
google 0 Share Posted July 20, 2005 Szerintem az elég nagy baj. :!: Link to comment Share on other sites More sharing options...
apacs 0 Share Posted July 20, 2005 Hát eléggé... Link to comment Share on other sites More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 20, 2005 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 More sharing options...
google 0 Share Posted July 20, 2005 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 More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 20, 2005 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 ... Link to comment Share on other sites More sharing options...
google 0 Share Posted July 20, 2005 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. Link to comment Share on other sites More sharing options...
Darcy Tucker 0 Author Share Posted July 20, 2005 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! ) Link to comment Share on other sites More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 20, 2005 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 More sharing options...
Darcy Tucker 0 Author Share Posted July 20, 2005 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 More sharing options...
google 0 Share Posted July 20, 2005 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 More sharing options...
Darcy Tucker 0 Author Share Posted July 20, 2005 No, akkor lelkiekben felkészítem magam és belekezdek hamarosan. Link to comment Share on other sites More sharing options...
Kovács Gyula (MiniDisk) 0 Share Posted July 20, 2005 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. Link to comment Share on other sites More sharing options...
Darcy Tucker 0 Author Share Posted July 20, 2005 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. Link to comment Share on other sites More sharing options...
Darcy Tucker 0 Author Share Posted July 20, 2005 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now