Creare uno slideshow in CSS3 semplice ed elegante

creare-slider-in-css3

In questo tutorial creiamo uno slideshow di immagini solo in CSS3. Ricordate che questo tutorial funziona, per adesso, su Chrome e Safari.

Iniziamo subito!

Dobbiamo creare due liste non ordinate, nel nostro codice Html, una per le miniature e una per le immagini piu’ grandi:

 
	
 
	

Adesso vediamo il CSS associato per posizionare tutti i nostri elementi.
.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	list-style: none;
}

.slider-wrapper {
	width: 508px;
	overflow: hidden;
}

ul.s-thumbs li {
	float: left;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
	width: 500px;
	height: 350px;
	position: relative;
}

ul.s-slides {
	overflow: hidden;
	clear: both;
}

ul.s-slides li {
	position: absolute;
	z-index: 50;
}
Ecco il nostro risultato fino qui:
Adesso miglioriamo il tutto grazie al CSS3 con l’uso di angoli arrotondati e ombre.
ul.s-thumbs li {
	float: left;
	margin-bottom: 10px;
	margin-right: 11px;
}

ul.s-thumbs li:last-child {
	margin-left: 1px;
	margin-right: 0;
}

ul.s-thumbs a {
	display: block;
	position: relative;
	width: 55px;
	height: 55px;
	border: 4px solid transparent;

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	font: bold 12px/25px Arial, sans-serif;
	color: #515151;
	text-decoration: none;
	text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}

ul.s-thumbs img {
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

ul.s-thumbs a:hover,
ul.s-slides {
	border: 4px solid #141517;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
	-moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
	box-shadow: 0px 1px 0px rgba(255,255,255,.05);
}
Ecco il risultato
Se volessimo aggiungere una descrizione alla miniatura, ecco il codice in Html:

	elegante/8377.html#slide-2">elegante/8377.html#slide-3">elegante/8377.html#slide-4">elegante/8377.html#slide-5">elegante/8377.html#slide-6">elegante/8377.html#slide-7"> quindi andiamo sul nostro CSS e scriviamo:ul.s-thumbs li a:hover span {
	position: absolute;
	z-index: 101;
	bottom: -30px;
	left: -22px;
	display: block;
	width: 100px;
	height: 25px;
	text-align: center;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
	-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
	box-shadow: 0px 1px 0px rgba(0,0,0,.4);

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* W3C */
}

ul.s-thumbs li a:hover span:before {
	width: 0;
	height: 0;
	border-bottom: 5px solid #ffffff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	content: '';
	position: absolute;
	top: -5px;
	left: 44px;
}

ul.s-thumbs li:first-child a:hover span {
	left: -3px;
}

ul.s-thumbs li:first-child a:hover span:before {
	left: 25px;
}

ul.s-thumbs li:last-child a:hover span {
	left: auto;
	right: -3px;
}

ul.s-thumbs li:last-child a:hover span:before {
	left: auto;
	right: 26px;
}
Fatto! Adesso non manca niente, tranne di definire le transizioni tra le immagini. Vogliamo creare una transazione diversa per ogni immagine. Quindi nel codice Html daremo una classe diversa ad ogni immagine nella classe s-slides (immagini grandi).

	mg/slide2.png" alt="" />
	mg/slide4.png" alt="" />
	mg/slide6.png" alt="" />
	’animazione e quando finisce useremo le percentuali da 0% a 100%.Andiamo nel nostro CSS e scriviamo un’animazione alla volta.
SLIDELEFT
/* Slide Left */

@-webkit-keyframes 'slideLeft' {
	0% { left: -500px; }
	100% { left: 0; }
}

ul.s-slides li.slideLeft:target {
	z-index: 100;

	-webkit-animation-name: slideLeft;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
SLIDERIGHT
/* Slide Right */

@-webkit-keyframes 'slideRight' {
	0% { left: 500px; }
	100% { left: 0; }
}

ul.s-slides li.slideRight:target {
	z-index: 100;

	-webkit-animation-name: slideRight;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
SLIDEBOTTOM
/* Slide Bottom */

@-webkit-keyframes 'slideBottom' {
	0% { top: 350px; }
	100% { top: 0; }
}

ul.s-slides li.slideBottom:target {
	z-index: 100;

	-webkit-animation-name: slideBottom;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
SLIDETOP
/* Slide Top */

@-webkit-keyframes 'slideTop' {
	0% { top: -350px; }
	100% { top: 0; }
}

ul.s-slides li.slideTop:target {
	z-index: 100;

	-webkit-animation-name: slideTop;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
ZOOMIN
/* Zoom In */

@-webkit-keyframes 'zoomIn' {
	0% { -webkit-transform: scale(0.1); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.zoomIn:target {
	z-index: 100;
	top: 4px;

	-webkit-animation-name: zoomIn;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
ZOOMOUT
/* Zoom Out */

@-webkit-keyframes 'zoomOut' {
	0% { -webkit-transform: scale(2); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.zoomOut:target {
	z-index: 100;

	-webkit-animation-name: zoomOut;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
ROTATE
/* Rotate */

@-webkit-keyframes 'rotate' {
	0% { -webkit-transform: rotate(-360deg) scale(0.1); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.rotate:target {
	z-index: 100;
	top: 4px;

	-webkit-animation-name: rotate;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
Siccome stiamo usando il comando z-index e perfar si che durante la transizione tra un’immagine e la successiva si veda l’ultima come sfondo applichiamo un @keyframes no-target, in questo modo:
/* Not Target */

@-webkit-keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}

ul.s-slides li:not(:target) {
	-webkit-animation-name: notTarget;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}
Per definire la prima immagine da caricare stabiliamo uno z-index superiore per la prima immagine che verra’ caricata
/* First Slide */

ul.s-slides li.first {
	z-index: 60;
}
Adesso definiamo la dissolvenza tra un’animazione e l’altra e il tempo che dovra’ intercorrere tra una slide e l’altra
/* Slider Load */

@-webkit-keyframes 'load' {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.slider-wrapper {
	-webkit-animation-name: load;
	-webkit-animation-duration: 2s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}
Ecco abbiamo creato uno slide perfetto in CSS3.
Alla prossima!