Even hier vastleggen hoe ik die drop shadow rond mijn foto heb gekregen. Dat kan ook bij andere plaatjes. Het staat beschreven op de SixApart ProNet site. Daar staat de link naar de CSS (ydnar Drop-Shadow-Fu: yDSF) die ik nu hiervoor gebruik, de twee plaatjes en de voorbeeldpagina.
In mijn sidebar heb ik nu rond de foto de volgende markup staan: <div class=”ydsf left”> <div class=”inner”><img…..><br/></div></div> <div class=”clear”></div> Vooral die <br> is belangrijk en de clear class. De <br> zorgt ervoor dat de tekst daaronder apart gehouden wordt. Immers de left class moet alleen voor de shadow zorgen. Zonder die <br> krijg je een heel ander uitlijneffect dan wat je bedoelt. De clear class zorgt er voor dat de yDSF stopt na het plaatje, anders loopt die door in de rest van de sidebar.
Overigens is het effect in Firefox vele malen mooier dan in Internet Explorer!
Technorati tags: yDSF CSS, css, sixapart, drop shadow
Even ergens vastleggen, dat doe ik ook zo vaak. Jouw bericht deed me denken aan deze informatie die ik een tijd geleden voor mezelf ergens heb neergezet. Nu ik weet dat jij daar ook graag mee speelt deel ik het graag met je (en je lezers):
http://www.easy2do.nl/dropshadow/
Voor alle duidelijkheid: wat kan met plaatjes, kan natuurlijk ook met gewone tekst zoals de titel en subtitel van bovenstaande pagina laat zien!
Het werkt in Firefox niet. Wel in IE. En dat is dan weer jammer.