Dans cette vidéo, je vous montre comment utiliser les filtres CSS pour donner un effet vintage à des photos.

En addition, je vous dit comment manipuler les ombres CSS (internes et externes), comment définir le style d'un élément lorsque celui-ci est survolé par la souris, comment créer une liste centrée dans la page, comment zoomer et incliner un élément en CSS, et je vous donne également d'autres astuces à découvrir tout au long de la vidéo.

Ressources

  • CanIUse.com (prise en charge des filtres CSS par les différents navigateurs)
  • Prefixr.com (ajout automatique des préfixes vendeurs)
  • Episode 186 (dans lequel je vous présente les propriétés CSS permettant d'ajuster la disposition du fond d'écran d'une page)
Code final :
<html>
	<head>
		<title>Tuto effets photos CSS3</title>
		<style type="text/css">
			.photos {
				list-style-type: none;
				margin-top: 100px;
				text-align: center;
			}

			.photos li {
				display: inline-block;
				margin: 10px;
			}

			.photos li div {
				width: 300px;
				height: 200px;
				-webkit-box-shadow: inset 0 0 100px black,inset 0 0 100px black,0 0 10px rgba(0,0,0,0.4);
				box-shadow: inset 0 0 100px black,inset 0 0 100px black,0 0 10px rgba(0,0,0,0.4);
				-webkit-background-size: cover;
				-moz-background-size: cover;
				background-size: cover;
				-webkit-filter: sepia(70%) contrast(150%) saturate(130%);
				filter: sepia(70%) contrast(150%) saturate(130%);
				-webkit-transition: 1s;
				-moz-transition: 1s;
				-o-transition: 1s;
				-ms-transition: 1s;
				transition: 1s;
				border: 7px solid white;
			}

			.photos li div:hover {
				-webkit-filter: none;
				filter:none;
				-webkit-transform: scale(1.4) rotate(-2deg);
				-moz-transform: scale(1.4) rotate(-2deg);
				-o-transform: scale(1.4) rotate(-2deg);
				-ms-transform: scale(1.4) rotate(-2deg);
				transform: scale(1.4) rotate(-2deg);
				position: relative;
				z-index: 999;
				-webkit-box-shadow: 0 0 40px black;
				box-shadow: 0 0 40px black;
			}

		</style>
	</head>
	<body>
		<ul class="photos">
			<li><div style="background-image:url(photos/photo1.jpg)"></div></li>
			<li><div style="background-image:url(photos/photo2.jpg)"></div></li>
			<li><div style="background-image:url(photos/photo3.jpg)"></div></li>
			<li><div style="background-image:url(photos/photo4.jpg)"></div></li>
			<li><div style="background-image:url(photos/photo5.jpg)"></div></li>
			<li><div style="background-image:url(photos/photo6.jpg)"></div></li>
		</ul>
	</body>
</html>


blog comments powered by Disqus


Nicolas Thomas

Passionné par le Web, je crée des sites Internet depuis plus de 10 ans.
Après avoir obtenu un Master d'Informatique et de Gestion, j'ai lancé mon Agence Web en 2010 et c'est avec plaisir que je mènerai à bien votre projet de création de site Internet, si vous m'en confiez la responsabilité.


Retourner à l'accueil