Pour améliorer la qualité de présentation des images d'un blog il existe plusieurs solution techniques via des scripts qui permettent d'éviter de trop passer de temps sur Photoshop ou Gimp
swfIR : swf Image Replacement
Magnifique solution qui vous permet au choix d'appliquer une ou plusieurs effets à vos images :
- ajouter une ombre
- rajouter un cadre blanc
- incliner l'image
- arrondir les coins
C'est la solution la plus élégante que j'ai trouvée et qui en plus est très facile à implémenter dans votre blog
Voici un exemple :
Insérez le code appellant le javascript dans votre head
<script type="text/javascript" src="swfir.js"><script>
Puis pour ajouter l'effet ou les effets voulus à vous de modifier le code ci dessous qui est a ajouter ente <body> et </body>
<script type="text/javascript">
window.onload = function(){
sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-radius", "15");
sir.specify("border-color", "fff");
sir .specify("rotate","-5");
sir.specify("shadow-blur", "15");
sir.specify("background-color", "9dcee0");
sir.swap("img");
}
</script>
Vous pouvez faire appliquer ce style sur un id en remplaçant la dernière ligne du script ci-dessus par
sir.swap("#bloc img");
Ou alors sur une class uniquement en le remplaçant cette fois ci par :
sir.swap(".bloc img");
Screenshots (les images sont rangées dans l'ordre de présentation des effets) :
Cliquez pour voir en grand
Mais vous pouvez aussi :
- rendre une image élastique : voir ici
- appliquer des effets différents sur des images différentes sur une même page : voir ici
CVI projects
CVI projects nous a concocté un certains nombre de scripts afin de réaliser les effets voulu :
- curl.js qui vous permettra de lever le coin en bas à gauche de vos images
- reflex.js qui ajoute un reflet à vos images
- edge.js qui adouci les contours de vos images
- corner.js qui arrondis les coins de vos images
- glossy.js, l'effet web2.0 sur vos images
- instant.js qui donne l'apparence de photoq encadréeq et inclinéeq
- slided.js qui présente vos photos dans un cadre de style diapositive
- filmed.js qui présente vos photos cette fois ci à la manière d'une bande de film
- loupe.js qui ajoute une loupe et un agrandissement sur une partie de vos photos
Screenshots (les images sont rangées dans l'ordre de présentation des effets) :
Cliquez pour voir en grand
Pour aller plus loin
Voic une liste d'article parlant de swfIR :
