Effets CSS pour une belle présentation de vos images (Part.1)

16 mai 2009

Effets CSS pour une belle présentation de vos images (Part.1)

Auteur: aDy | Classé dans: Tutos CSS

Aujourd’hui encore beaucoup de sites web ne se prennent pas la peine d’agrémenter visuellement leurs présentations d’images, illustrations, et autres galeries.
Je comprends que éditer chaque image une par une via Photoshop peut fatiguer à la longue, alors pour gagner du temps nous allons automatiser cela à l’aide du CSS.

Voici donc pour commencer 5 différentes façons simples d’ajouter un peu de saveur à vos images en les rendant plus attrayantes :

Un effet d’ombre portée

DEMO EN LIGNE
HTML

<img class="shadow" src="sample.jpg" alt="" />

CSS

img.shadow {
	background: url(shadow-1000x1000.gif) no-repeat right bottom;
	padding: 5px 10px 10px 5px;
}

Un effet de double bordure

DEMO EN LIGNE
HTML

<img class="double-border" src="sample.jpg" alt="" />

CSS

img.double-border {
	border: 5px solid #ddd;
	padding: 5px; /*Inner border size*/
	background: #fff; /*Inner border color*/
}

Un effet de cadre

DEMO EN LIGNE
HTML

<div class="frame-block">
	<span>&nbsp;</span>
	<img src="sample.jpg" alt="" />
</div>

CSS

.frame-block {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.frame-block span {
	background: url(frame.png) no-repeat center top;
	height:335px;
	width: 575px;
	display: block;
	position: absolute;
}

Un effet Watermark sur l’image

DEMO EN LIGNE
HTML

<div class="transp-block">
	<img class="transparent" src="sample.jpg" alt="" />
</div>

CSS

.transp-block {
	background: #000 url(watermark.jpg) no-repeat;
	width: 575px;
	height: 335px;
}
img.transparent {
	filter:alpha(opacity=75);
	opacity:.75;
}

Une description sur l’image (caption)

DEMO EN LIGNE
HTML

<div class="img-desc">
	<img src="sample.jpg" alt="" />
	<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

CSS

.img-desc {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}

Merci à SohTanaka pour l’astuce

Tags : css, effet visuel, images, tutoriel

Article posté le Samedi 16 mai 2009 à 20:11.
Classé dans la catégorie Tutos CSS.

7 commentaires pour “Effets CSS pour une belle présentation de vos images (Part.1)”

Kaz a dit:
18 août, 2009 à 21:15 Surfe sur Mozilla Firefox 3.5.2 via Windows Vista.
Tous d’abords je voudrais vous dire merci pour toutes ces astuces que vous nous donnez.

Ensuite j’aurais une question à vous poser concernant votre design actuel, comment avez vous fait pour faire en sorte que votre fond (main) passe par dessus votre menu ? Vraiment incroyable et sublime comme effet, si vous pouviez me donner l’astuce cela me permettrait pas mal de chose.

Vous remerciant par avance et encore une fois félicitations pour votre blog et vos articles très intéressant
snip a dit:
4 novembre, 2011 à 12:55 Surfe sur Google Chrome 15.0.874.106 via Windows 7.
dommage que tous les liens ne soit effacés
aDy a dit:
8 décembre, 2011 à 12:26 Surfe sur Mozilla Firefox 8.0 via Windows 7.
merci snip pour l’avertissement sur les liens cassés, qui sont réparés maintenant
lizozo a dit:
2 mai, 2012 à 15:58 Surfe sur Google Chrome 18.0.1025.162 via Windows XP.
Merciiiii!! Encore! Encore!
nabb a dit:
4 mai, 2012 à 16:09 Surfe sur Mozilla Firefox 3.5.18 via Windows XP.
fffff
nabb a dit:
4 mai, 2012 à 16:09 Surfe sur Mozilla Firefox 3.5.18 via Windows XP.
fvzvz a dit:
17 mai, 2012 à 0:34 Surfe sur Mozilla Firefox 12.0 via Windows Vista.