- Web Design
- 2 comments
Sliders semplici e pulite sono in grado di rendere un sito web più dinamico e coinvolgente. Donano eleganza e stile e, se usate in maniera appropriata, possono indurre con maggiori probabilità un potenziale cliente all’acquisto. In passato abbiamo imparato a costruirle usando Javascript. Tuttavia, con l’avvento del CSS3, siamo oggi in grado di creare sliders semplici ma altrettanto funzionali.
Creiamo innanzittutto la struttura in HTML:
<div id="content-slider">
<div id="content">
<div id="content-inner-1">
<div id="content-inner-2">
<div id="content-inner-3">
<div id="content-inner-4">
<div id="content-inner-5">
<div id="content-inner-6">
<div id="content-inner">
<div class="page" id="page1">
<img src="images/test1.jpg" alt="test1" title="test1">
<div class="page-info" id="info1">
<h2>Page 1</h2>
<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>
</div>
</div>
<div class="page" id="page2">
<img src="images/test2.jpg" alt="test2" title="test2">
<div class="page-info" id="info2">
<h2>Page 2</h2>
<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>
</div>
</div>
<div class="page" id="page3">
<img src="images/test3.jpg" alt="test3" title="test3">
<div class="page-info" id="info3">
<h2>Page 3</h2>
<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>
</div>
</div>
<div class="page" id="page4">
<img src="images/test4.jpg" alt="test4" title="test4">
<div class="page-info" id="info4">
<h2>Page 4</h2>
<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>
</div>
</div>
<div class="page" id="page5">
<img src="images/test5.jpg" alt="test5" title="test5">
<div class="page-info" id="info5">
<h2>Page 5</h2>
<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>
</div>
</div>
<div class="page" id="page6">
<img src="images/test6.jpg" alt="test6" title="test6">
<div class="page-info" id="info6">
<h2>Page 6</h2>
<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul id="nav">
<li class="button" id="button1"><a href="#content-inner-1"></a></li>
<li class="button" id="button2"><a href="#content-inner-2"></a></li>
<li class="button" id="button3"><a href="#content-inner-3"></a></li>
<li class="button" id="button4"><a href="#content-inner-4"></a></li>
<li class="button" id="button5"><a href="#content-inner-5"></a></li>
<li class="button" id="button6"><a href="#content-inner-6"></a></li>
</ul>
</div>
Utilizziamo una semplice struttura con contenitori div. Il “content-slider” div è quello più esterno, all’interno del quale comprendiamo 2 sezioni principali: un “content” div in cui sono comprese le nostre pagine (“content-inner-n°“) e un elemento “nav” ul che permette l’accesso alle pagine stesse.
Il CSS:
#content-slider {
font-family: arial;
width: 640px;
margin: 0 auto;
margin-top: 100px;
}
#content {
overflow: hidden;
width: 640px;
height: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}
#content-inner {
width:10000px;
height: 480px;
}
.page {
width: 640px;
height: 480px;
float: left;
}
Prima di tutto centriamo il contenitore “content-slider” (margin: 0 auto;), dandogli un margine superiore di 100px (margin-top: 100px). Dopodichè definiamo lo stile dell’elemento “content” div, settando la proprietà “overflow” con l’attributo “hidden” che assicura l’invisibilità delle varie slides finchè non vengono selezionate. L’elemento “content-inner” deve gestire tutte le pagine della slider ed è per questo che le assegnamo un valore abbondante in larghezza (width: 10000px)
Aggiungiamo quindi altro css per lo styling degli elementi “page-info” e “nav”:
.page-info {
height: 90px;
background-color: rgba(99, 99, 99, 0.6);
position: relative;
margin-top: 0px;
bottom: 103px;
color: #dedede;
padding-left: 20px;
padding-top: 10px;
}
.page-info h2 {
font-size: 21px;
margin-bottom: 10px;
margin-top: 0px;
color: #fafafa;
}
.page-text {
font-size: 15px;
}
Altro CSS3 per lo styling dei pulsanti di scorrimento:
.button {
float: left;
background: #bababa;
width: 16px;
height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-left: 5px;
margin-right: 5px;
}
.button:hover {
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
box-shadow: inset 0px 0px 2px 2px #d4d4d4;
}
.button:active {
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
box-shadow: inset 0px 0px 2px 2px #7a7a7a;
}
.button a {
display: block;
width: 16px;
height: 16px;
}
A questo punto è necessario definire l’attributo “:target”, in modo che l’utente, cliccando su uno dei sei pulsanti, possa attivare la funzione di slider: in questo modo ogni elemento “content-inner” scorre automaticamente nella posizione appropriata. Ecco il codice:
#content-inner-1:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: 0px;
}
#content-inner-2:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -640px;
}
#content-inner-3:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1280px;
}
#content-inner-4:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1920px;
}
#content-inner-5:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -2560px;
}
#content-inner-6:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -3200px;
}
2 Comments
E’ uno slider fantastico!!! Ma avrei un piccolo problema nel renderlo Responsive…non riesco a trovare la soluzione! Potreste aiutarmi?
Salve Antonio, ha provato a chiedere al supporto?