Vandaag gaan we het een beetje in de technische hoek houden. Enige tijd geleden kreeg ik een mail van iemand die zichzelf afvroeg hoe ik het ‘hover effect’ in mijn RSS buttons gemaakt had. Of dit een Javascript was, of dat ik het met twee plaatjes deed zoals de gewoonlijke gang van zaken is. Oké, met Java had gekund, maar ik maak al van zoveel Java gebruik, dat het ook wel eens een keer zonder kan. Hoveren met plaatjes is leuk, maar als je op andere manieren een effect kunt krijgen, is dat naast leuk, ook enorm spannend natuurlijk! De code die ik gebruikt heb om het effect te creëren zoals je het kunt zien in browsers vanaf IE6, heb ik op pure CSS basis gemaakt, en wel met een CSS regel, waarvan ruim anderhalf jaar geleden tegen me gezegd werd dat ik dat niet kon gebruiken omdat het niet bestond. Yeah right! Het mooie aan ontwikkelen is juist om verder te zoeken. Denk niet dat iets niet kan omdat het nog niet gedaan is.
De RSS buttons zijn twee gif plaatjes die in de HTML genoemd worden maar niet in de CSS. Het plaatje word in HTML in een class geplaatst, en die class heeft in zijn CSS de volgende opdracht staan: filter: alpha(opacity: 40); -moz-opacity: .40;
Voor het hover effect gaan we als volgt te werk. Begin weer met de class en zet daar :hover achter. Plaats hier de volgende regel in:? filter: alpha(opacity: 99); -moz-opacity: .99;
Thats all folks. En ik zeg het nog een keer. Omdat iets nog niet gedaan is, wil niet zeggen dat het niet kan!
30 Comments
rietepietz
November 27, 2007 at 22:34Geeft niet hoor , ik doe gewoon even iets voor mezelf …. whahahaha
p.s , Ik heb wel alles gelezen omdat ik een eigenwijs “oudje ben ” die het w?l eens is met je stelling en heb er z?lf ook een !
Dat ik iets nu nog niet snap wil niet zeggen dat ik het n??it zal snappen !
groetjes , Riet
madbello
November 27, 2007 at 16:03Er moeten een maal mensen zijn die iets nieuws doen, maar dit gaat mijn verstand te boven. Sorry.
Patrick
November 27, 2007 at 14:04Er komt maar geen einde aan gelukkig die ontwikkelingen
css daar moet ik ook nog is wat vaker induiken
RedStar
November 27, 2007 at 01:20@ Nick, Laten we er van uit gaan !
@ Joost, dat kan ook natuurlijk.
@ Brillie Yups, met CSS kan heel veel..
@ HKH, hehehe, net als je verbinding…
HKH
November 27, 2007 at 00:42Doe roakst mie hier kwiet 😉
Brillie
November 27, 2007 at 00:31Met CCS kan je inderdaad veel doen.
Joost
November 27, 2007 at 00:03Hmm, ik gebruik voor transparantie-effecten meestal gewoon plaatjes, PNG-afbeeldingen wel te verstaan. Voorbeeld: http://www.gwx.nl
NickN
November 26, 2007 at 22:50Heheheh Mannie was nog niet wakker, LOL
Maar idd ontwikkeling staat niet stil en wij kunnen nog veel verwachten ook van JOU!
Leibele
November 26, 2007 at 21:53Dit gaat boven mijn pet hoor.
RedStar
November 26, 2007 at 21:34@ Chantal, 🙂 dank u..
@ Kurai, oke, ik houd het in gedachte 😉
@ Jager, precies!
@ Inge, Das goed hoor 😉
@ Mannie, dacht ik al… 🙂
@ Mike(lodeon),ergens hier op mijn log staat het volgende ‘This is my playground’
Mike(lodeon)
November 26, 2007 at 21:16@ redstar; totally O.T.Reden hiervoor is dat je blog mij volkomen boven de pet gaat. 🙂
Maar wat bedoel je met een naar beneden gerichte blauwe pijl bij redstar?
Mannie
November 26, 2007 at 19:08@Redstar: Oops, ik was kennelijk niet helemaal wakker nog 😉
inge
November 26, 2007 at 17:23Denk niet dat iets niet kan omdat het nog niet gedaan is.
die neem ik er maar uit mee !
jager
November 26, 2007 at 17:18Niets is onmogelijk en daarin ligt vaak de uitdaging!
Nightfall
November 26, 2007 at 14:42Transpiratie 😉
kurai
November 26, 2007 at 14:42VB en PHP is een aparte combinatie… als je ooit nog eens werk zoekt, bij ons zijn we naarstig op zoek 😛
Chantal
November 26, 2007 at 14:32Kundige taal die je laat horen…. knap werk
RedStar
November 26, 2007 at 14:26@ Rene, Dat is je idd gelukt 😉
@ Martin, Juist. er is meestal een weg..
@ Pleeboy, Oke dan, we gaan ons er ook eens in verdiepen..
@ Roos, hehehe…
@ MC, Je kunt altijd inschrijven 🙂
@ Belinda, oke dan..
@ Mannie, Was je niet wakker, of heb je niet goed gelezen? 🙂 Ik beschrijf juist hoe met een plaatje te werk te gaan..
@ Ria, TanQ 🙂
@ Pluisje, Met zijn drieen onder een pet …
Pluisje
November 26, 2007 at 13:38ik heb ook zo`n muts op net als Martin en Pleeboy whahahaa
ria
November 26, 2007 at 13:10Ik vind het erg knap 🙂
Mannie
November 26, 2007 at 12:38Dat kan ook met 1 plaatje trouwens 😉
Belinda
November 26, 2007 at 11:49Ik maak ook gebruik van Hoover maar dat zit standaard in mijn blogsoftware. Altijd handig dit soort tips!
mysterycouple
November 26, 2007 at 11:35Nou het is mij helemaal duidelijk Redstar.. ahumm
Wanneer kan ik me inschrijven voor een cursus bij je???
Roos
November 26, 2007 at 11:24Oooow maar dat doe ik zo hoor,peace of cake!
*kijkt onschuldig in het rond* weet niet eens waar het over gaat hihihi
Pleeboy
November 26, 2007 at 02:19doe diezelfde pet als martin op:-)
en nee is nog niet gelukt, heb er dus weer een uitdaging bij
Martin
November 26, 2007 at 02:09Dit is de ver boven mijn pet show..maar ik begrijp wel dat als je wilt..er echt veel mogenlijk is..;-)
Renesmurf
November 26, 2007 at 01:53Ik heb er weinig van begrepen, en dat ligt volkomen aan mij.
Als ik echt iets wil weten lukt het me meestal wel.
Je staat in mijn rss reader, dat is me toch allemaal maar mooi gelukt!
RedStar
November 26, 2007 at 01:49@ Jolie, Ik ben VB en PHP programmeur, kan redelijk met Photoshop overweg, kan Java schrijven, CSS2 , CSS3 standaard, wijk af van het W3C protocol, en ben denk ik redelijk technisch onderlegt, mede door mijn opleidingen..
Jolie
November 26, 2007 at 01:44Zonder mijn Grote Liefde (mijn man;)) zouden dit soort tecnieken me vaak ook ontgaan (terwijl ik vergeleken bij de vormgevers (m) die hij als collega’s heeft al *Bizar Veel* Code ken ;-})
Maar vaak geef ik het op, op zoek (google google standards google standards) naar een effect dat ik wil, en weet hij hoe de code ervoor luidt… Let wel: Edwins collega’s reiken gewoon *niet* verder dan Photoshop, en…. besteden de rest uit aan programmeurs… (dat zou ik eigenlijk ook moeten doen.. En jij? Volgens mij ben jij TEchnischer..)
RedStar
November 26, 2007 at 01:32@ DaPino, Precies, zo denk ik er ook over dush 🙂 ThanQ