Er is geen CSS ondersteuning.
Natuurlijk kan je een border animeren. En natuurlijk geeft IE weer eens een hoop problemen... Maar daar ligt niemand meer wakker van. Als je met een brakke browser over het internet wilt surfen is dat geen probleem. Maar dan mis je toch wel een hoop mooie dingen op de websites. Door middel van progressive enhancement zal geen enkele IE-gebruiker "doorhebben" dat hij wat mist. Alle andere browsers op deze wereld geven het effect aan de image-border. Dood-simpel om te maken.
Ga niet overdrijven. Animeren kan een erg negatief effect op jouw bezoekers hebben. Natuurlijk kan je de border van het plaatje alle kleuren van de regenboog geven en kan je de meest vreemde psychedelische effecten tonen. Gewoon niet doen... Als je in een willekeurig programma een gifje maakt wat een beetje lijkt op deze border gif en je plaatst onderstaande stylesheet op jouw pagina, hoef je alleen nog maar een div op jouw pagina te zetten met de class "css3-border" (en natuurlijk een plaatje in de div te plaatsen).
<style type="text/css">
.css3-border{
margin-left:100px;
position:relative;
display:inline-block}
.css3-border:after{
position:absolute;
top:-5px;
left:-5px;
bottom:-3px;
right:-5px;
content:" ";
border:10px solid;
-moz-border-image:url('http://static.dns5.nl/draaier.gif') 20 20 20 20 stretch stretch;
-webkit-border-image:url('http://static.dns5.nl/draaier.gif') 20 20 20 20 stretch stretch;
border-image:url('http://static.dns5.nl/draaier.gif') 20 20 20 20 stretch stretch}
</style>
cache 17-11-2010