Pulsanti css3 e box-shadow

I pulsanti in CSS Con questa pillola del laboratorio spieghiamo come utilizzare al meglio la proprietà box-shadow del css3 e […]
Pulsanti css3 e box-shadow

I pulsanti in CSS

Con questa pillola del laboratorio spieghiamo come utilizzare al meglio la proprietà box-shadow del css3 e creare pulsanti accattivanti  per i nostri siti web.

pulsanti_css3

Da dove comincio?

Prendiamo in esame un solo pulsante, quindi creiamo un’ancora attribuendole due classi, “.button_one” per colore, ombre e sfumature, e “.glass” esclusivamente per l’effetto “vetro” in alto.

Ecco il codice html:

<div class="menu">
    <a href="#" class="button_one glass">BUTTON ONE</a>
</div>

La proprietà box-shadow

Prima di continuare con il codice css analizziamo la proprietà box-shadow, che effettivamente è alla base dei nostri pulsanti. Questa proprietà associa una o più ombre all’elemento. La dichiarazione è composta dalla lista di ombre separate da virgole, ciascuna con i propri valori di posizionamento, colore ed opacità.

#element{
    box-shadow: 5 1.2em 0.5em rgba(255, 255, 255, 0.40) inset, 7 0.2em 2px #8ab600, 1 0.4em 0px #536e00;
}

I valori sono rispettvamente:

Lunghezza ombra orizzontale + Lunghezza ombra verticale + Sfocatura + Diffusione + Colore (rgb e alpha oppure esadecimale) + inset (parola chiave che se dichiarata cambia lo stato da ombra esterna a ombra interna). Questo è l’elenco completo dei valori che comprendono la proprietà box-shadow, ovviamente basta omettere quello che non ci serve.

Approfondimento

Per approfondire puoi consultare il documento ufficiale del W3c.

Divertiamoci con il Css

Creato il codice html non ci resta che applicare le regole appena elencate e dare vita al nostro pulsante. Impostiamo innanzitutto la dimensione e le varie proprietà relative al font:

.button_one{
    display:block;
    width:150px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    padding:10px;

Eccoci giunti alla parte più importante, mettiamo in pratica ciò che abbiamo teorizzato poco fa:

.button_one{
    /* posizione orizzontale, posizione verticale + sfocatura + colore + inset(ombra interna) */
    box-shadow: 0 1.2em 0.5em rgba(255, 255, 255, 0.40) inset;
}

ombra_due

.button_one{
/* posizione orizzontale, posizione verticale + sfocatura + colore */
box-shadow:0 0.2em 2px #8ab600;

ombra_tre

.button_one{
/* posizione orizzontale, posizione verticale + sfocatura + colore */
box-shadow:0 0.4em 0px #536e00;

ombra_quattro

.button_one{
/* posizione orizzontale, posizione verticale + sfocatura + colore + opacità */
box-shadow:0 0.6em 4px rgba(0, 0, 0, 0.2);

ombra_cinque

Infine creiamo l’effetto vetro con la proprietà content già presentata in questo articolo. Con questa dichiarazione si va a creare un contenuto vuoto per la classe “.glass”, lo si sposta sopra al pulsante con la posizione assoluta e con il settaggio gradient della proprietà background gli si applica la sfumatura:

.button_one.glass:after{
    content:"";
    position:absolute;
    width:160px;
    height:20px;
    top:101px;
    left:6px;

    -webkit-border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em;
    -moz-border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em;

    background-image:-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
    background-image:-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );
    background-image:gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
    opacity:.7;
}

effetto glass

A te il resto

Nell’articolo ho considerato le proprietà più importanti trascurando gli arrotondamenti, il rollover e l’effetto fade del pulsante. Fonte: http://lab.simurai.com/buttons/.

Provalo subito

Prova la demo Consulta il codice
  • Ottimo tutorial davvero! molto bello come hai creato l’effetto riflesso

  • LaboratorioCSS

    Grazie mille Francesco 😉

  • Guest

    Valido!

    Grazie. 😉

  • 😉

  • E’ molto interessante ma il link al sorgente NON va! 😥

  • Grazie per la segnalazione. Effettivamente il proprietario ha cambiato la struttura del sito ma senza provvedere ad eventuali redirect 301… 😉

  • ok! Non avevo capito a quale link ti riferivi. Pensavo ti riferissi al link del sito Simurai.

    Cerchiamo di sistemarlo il prima possibile. Scusate per il problema.

  • Ho ricreato il pulsante, ora potete vederlo cliccando sul tasto DEMO. Scusate il disagio 😉

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github