CSS alapú gombok
Korábban hírt adtunk a 80x15-ös gombok rohamos terjedéséről, melyek az ezzel foglalkozó internetes oldalak tanúsága szerint 2002 év vége felé indulhattak hódító útjukra. Sokan azonban ezt nem látták jó szemmel, és a sokszor valóban kevesebb sávszélességet, és külön állomány letöltést nem igénylő CSS alapú gombokra szavaznak, melyek legalább olyan jól nézhetnek ki, mint a képet használó társaik.
A képeket használó kis gombok története több megemlékezés tanulsága szerint a Netscape 88x31-es "Netscape now!" gombjaival kezdődött, majd a W3C gombokkal folytatódott. A 80x15-ös gombok úgy tűnik az Antipixel oldalról indultak. Az ott található egyik-másik kommentező szerint azonban a képek használata "amolyan 1998-as szokás", itt az ideje a CSS gomboknak. Nézzük milyen kész megoldásokból csemegézhetünk.
Pixy oldalán bemutat egy technikát, amely inline blokkokat használva ér el a képeket használó gombokhoz nagyon hasonlító megjelenést. Sajnos az inline-block megjelenítés csak a CSS 3-al válik szabványossá, és még kevés böngésző támogatja, ezért eléggé más a megjelenés különböző böngészőkben. Meglepő, hogy már korábbi Internet Explorer böngészők is támogatták ezt a megjelenítési formát.
Egszerűbb megoldással, egymás mellett álló blokkoknak látszó link elembe ágyazott span elemet használ Eric Meyer. Ugyanitt Eric bemutatja azt is, hogyan készíthetünk kép nélkül Dave Winer XML ikonjához hasonlító linket.
A notestips.com oldalon Mike Golding igen részletesen foglalkozik a CSS gombok kérdésével, és több alternatívát is bemutat. A használt HTML kódja nagyon hasonlít Eric Meyer kódjához, a megjelenítésben viszont sokkal jobb eredményt ér el. A különböző háttérszínekkel és fontokkal megjelenő gombokra egyenként kitér, elmagyarázva a megoldás menetét.
A sovavsiti.cz oldalon található "W3C buttons without images" cikk konkrétan a W3C gombokra koncentrál, és rögtön a "Valid XHTML 1.0" gomb CSS segítéségével megvalósított változatával örvendezteti meg a látogatót, mely meglepő hasonlóságot mutat az eredeti gombbal. Ezekután rátér a különböző megjelenítési lehetőségekre, beleértve a gomb animációját is.
■ A képeket használó kis gombok története több megemlékezés tanulsága szerint a Netscape 88x31-es "Netscape now!" gombjaival kezdődött, majd a W3C gombokkal folytatódott. A 80x15-ös gombok úgy tűnik az Antipixel oldalról indultak. Az ott található egyik-másik kommentező szerint azonban a képek használata "amolyan 1998-as szokás", itt az ideje a CSS gomboknak. Nézzük milyen kész megoldásokból csemegézhetünk.
Pixy oldalán bemutat egy technikát, amely inline blokkokat használva ér el a képeket használó gombokhoz nagyon hasonlító megjelenést. Sajnos az inline-block megjelenítés csak a CSS 3-al válik szabványossá, és még kevés böngésző támogatja, ezért eléggé más a megjelenés különböző böngészőkben. Meglepő, hogy már korábbi Internet Explorer böngészők is támogatták ezt a megjelenítési formát.
Egszerűbb megoldással, egymás mellett álló blokkoknak látszó link elembe ágyazott span elemet használ Eric Meyer. Ugyanitt Eric bemutatja azt is, hogyan készíthetünk kép nélkül Dave Winer XML ikonjához hasonlító linket.
A notestips.com oldalon Mike Golding igen részletesen foglalkozik a CSS gombok kérdésével, és több alternatívát is bemutat. A használt HTML kódja nagyon hasonlít Eric Meyer kódjához, a megjelenítésben viszont sokkal jobb eredményt ér el. A különböző háttérszínekkel és fontokkal megjelenő gombokra egyenként kitér, elmagyarázva a megoldás menetét.
A sovavsiti.cz oldalon található "W3C buttons without images" cikk konkrétan a W3C gombokra koncentrál, és rögtön a "Valid XHTML 1.0" gomb CSS segítéségével megvalósított változatával örvendezteti meg a látogatót, mely meglepő hasonlóságot mutat az eredeti gombbal. Ezekután rátér a különböző megjelenítési lehetőségekre, beleértve a gomb animációját is.
Re: CSS alapú gombok
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
Re: CSS alapú gombok