Alchimie Grafiche
  • Contattaci: +39 328 1323121
Alchimie Grafiche
  • Home
  • Servizi web
    • Ottimizzazione SEO
    • Campagne Adwords
    • Email Marketing
    • Article Marketing
  • Blog
  • Contatti

Creare una semplice content slider in HTML e CSS3

Home| Web Design| Creare una semplice content slider in HTML e CSS3

07
Set, 2011
By Enrico Rombaldoni
Creare una semplice content slider in HTML e CSS3
  • 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;
}

About Enrico Rombaldoni

2 Comments

  • By Antonio

    E’ uno slider fantastico!!! Ma avrei un piccolo problema nel renderlo Responsive…non riesco a trovare la soluzione! Potreste aiutarmi?

    • By Enrico Rombaldoni

      Salve Antonio, ha provato a chiedere al supporto?

Lascia un commento Annulla risposta

Web Hosting

Categorie Articoli

  • Apple
  • Applicazioni
  • Arte
  • Biglietti da Visita
  • Brochure
  • Campagne pubblicitarie
  • Cataloghi
  • Colore
  • Comunicazione
  • Contest
  • Corsi
  • Cover
  • Curriculum
  • Domini e Hosting
  • Drupal
  • E-Commerce
  • eBay
  • Ebook
  • Email Marketing
  • Facebook
  • Flyers
  • Fonts
  • Fotografia
  • Freelancers
  • Grafica
  • Grafica Teorica
  • Icone
  • Immagini
  • Infografiche
  • Inviti
  • Joomla
    • Template
  • Keynote
  • Landing Page
  • Locandine
  • Loghi
  • Magento
  • Marketing
  • Mockup
  • Newsletter
  • Opuscoli
  • Packaging
  • Photoshop
  • Powerpoint
  • Presentazioni
  • Prestashop
  • Promozioni
  • Recensioni
  • Senza categoria
  • SEO
  • T-shirt
  • Template
  • Textures
  • Traduzioni
  • Tumblr
  • Twitter
  • Video
  • Wallpaper
  • Web Design
    • JQuery
    • Mobile
    • Risorse
    • Tools
  • Wordpress
    • Javascript
    • Plugin
    • Temi

Archivio Articoli

logo

Ultime dal blog

19 Maggio 2017 | Enrico Rombaldoni Redazione (e non...

La nostra particolarità è la passione. Il testo di un

28 Luglio 2016 | Federico Antonioni Temi WordPress...

La leggenda narra che il termine “grunge” fu utilizzato per

Contatti

  • Alchimie Grafiche
    Via Cà Lupo, 16A
    61043 Cagli, Pesaro
    Italia
  • Telefono: +39 328 1323121
  • info@alchimiegrafiche.com

Social Networks

© 2015 Alchimie Grafiche | Cagli, Pesaro | Tutti i Diritti Riservati | P.IVA 02167200415 | Privacy & Cookies | Contatti
Gestisci Consenso Cookie
Per fornire le migliori esperienze, utilizziamo tecnologie come i cookie per memorizzare e/o accedere alle informazioni del dispositivo. Il consenso a queste tecnologie ci permetterà di elaborare dati come il comportamento di navigazione o ID unici su questo sito. Non acconsentire o ritirare il consenso può influire negativamente su alcune caratteristiche e funzioni.
Funzionale Sempre attivo
L'archiviazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire l'uso di un servizio specifico esplicitamente richiesto dall'abbonato o dall'utente, o al solo scopo di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
L'archiviazione tecnica o l'accesso sono necessari per lo scopo legittimo di memorizzare le preferenze che non sono richieste dall'abbonato o dall'utente.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente per scopi statistici. L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente per scopi statistici anonimi. Senza un mandato di comparizione, una conformità volontaria da parte del vostro Fornitore di Servizi Internet, o ulteriori registrazioni da parte di terzi, le informazioni memorizzate o recuperate per questo scopo da sole non possono di solito essere utilizzate per l'identificazione.
Marketing
L'archiviazione tecnica o l'accesso sono necessari per creare profili di utenti per inviare pubblicità, o per tracciare l'utente su un sito web o su diversi siti web per scopi di marketing simili.
Gestisci opzioni Gestisci servizi Gestisci fornitori Per saperne di più su questi scopi
Visualizza le preferenze
{title} {title} {title}