Creare uno slideshow in CSS3 semplice ed elegante

creare-slider-in-css3

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.

button_demo slider css3

Iniziamo subito!

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

<pre><div class="slider-wrapper">
<ul class="s-thumbs"> <!-- miniature immagini -->
	<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /></a></li>
	<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /></a></li>
	<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /></a></li>
	<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /></a></li>
	<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /></a></li>
	<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /></a></li>
	<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /></a></li>
</ul>
<ul class="s-slides"> <!-- immagini grandi-->
	<li id="slide-1"><img src="img/slide1.png" alt="" /></li>
	<li id="slide-2"><img src="img/slide2.png" alt="" /></li>
	<li id="slide-3"><img src="img/slide3.png" alt="" /></li>
	<li id="slide-4"><img src="img/slide4.png" alt="" /></li>
	<li id="slide-5"><img src="img/slide5.png" alt="" /></li>
	<li id="slide-6"><img src="img/slide6.png" alt="" /></li>
	<li id="slide-7"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>

Adesso vediamo il CSS associato per posizionare tutti i nostri elementi.

<pre>.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:

slider css3 passo1

Adesso miglioriamo il tutto grazie al CSS3 con l’uso di angoli arrotondati e ombre.

<pre>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

slider css3 passo2

Se volessimo aggiungere una descrizione alla miniatura, ecco il codice in Html:

<pre><ul class="s-thumbs">
	<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
	<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
	<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
	<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
	<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
	<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
	<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
</ul>

Poi bisogna centrare il box della descrizione al centro della miniatura, 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).

<pre><ul class="s-slides">
	<li id="slide-1" class="slideleft"><img src="img/slide1.png" alt="" /></li>
	<li id="slide-2" class="slideright"><img src="img/slide2.png" alt="" /></li>
	<li id="slide-3" class="slidetop"><img src="img/slide3.png" alt="" /></li>
	<li id="slide-4" class="slidebottom"><img src="img/slide4.png" alt="" /></li>
	<li id="slide-5" class="zoomin"><img src="img/slide5.png" alt="" /></li>
	<li id="slide-6" class="zoomout"><img src="img/slide6.png" alt="" /></li>
	<li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>

Adesso per creare la transizione usiamo la funzione @keyframes e per specificare quando inizia l’animazione e quando finisce useremo le percentuali da 0% a 100%.

Andiamo nel nostro CSS e scriviamo un’animazione alla volta.

SLIDELEFT

<pre>/* 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:

<pre>/* 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.

button_demo slider CSS3

creare slider css3

Alla prossima!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *