02 Gennaio 2015 15:36:14 · [Pulsanti 3D]
Postato da
Ciao a tutti! Inizio il nuovo anno con un semplice esperimento di css... sto parlando di pulsanti 3D davvero accattivanti   Quello che dobbiamo fare è semplice, quindi procuratevi fin da ora una icona di 32x32 pixel in formato png e poi una volta scaricata mettetela da parte... ci servirà in seguito   Se non volete perdere tempo affidatevi a servizi come http://www.iconarchive.com/ o http://findicons.com/. Adesso iniziamo dalla base, supponiamo che abbiate un file da condividere sul vostro sito web... io ad esempio userò uno dei miei link e per l'appunto A71Mail.zip, quindi voi dovrete modificare "A71Mail.zip" con il vostro file   Non fate confusione!!! Adesso quello che dovremo fare è usare il tag span a cui assegneremo una classe che nel nostro caso sarà "download", all'interno di span mettiamo un link a cui assegneremo una classe che nel nostro caso sarà "download-me"... fatto questo il nostro codice apparirà più o meno così:

<div><span class="download"><a href="dat/A71Mail.zip" class="download-me">A71Mail.zip</a></span></div>

Adesso andiamo a stilizzare il link dandogli un gradevole aspetto 3D... per farlo usiamo il seguente codice da mettere nel vostro foglio di stile (css)... sapete come si fa? Suppongo di si... quindi procederò oltre senza spiegarvi come funziona un foglio di stile altrimenti faremmo notte   Però prima vorrei fare una piccola precisazione, io ho voluto usare lo pseudo elemento :before per limitare il codice necessario allo stretto indispensabile, tanto non credo che ci sarà in giro qualcuno che naviga con web browser paleolitici   Quindi copiate e incollate quando segue:

/* Importo il Font Oswald da Google Font */
@import url(http://fonts.googleapis.com/css?family=Oswald);
/* Stile Immagine Download File */
.download:before {
  content: url("grafica/file32x32.png"); /* Qui va la vostra icona (32x32) */
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
}
/* Stile Pulsante Download File */
.download {
  display: inline-block;
  vertical-align: middle;
  border: #C0C0C0 3px solid;
  border-radius: 7px;
  width: auto;
  height: 42px;
  font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  line-height: normal;
  font-weight: normal;
  font-variant: normal;
  margin-left: 20px;
  background-color: #006699;
  box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
}
/* Stile Pulsante Download File */
.download:hover {
  background-color: #006600;
}
/* Stile Link Download File */
.download-me:link {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  padding-right: 10px;
  color: #E6E6FA;
}
/* Stile Link Download File */
.download-me:visited {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  padding-right: 10px;
  color: #E6E6FA;
}
/* Stile Link Download File */
.download-me:hover {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  padding-right: 10px;
  color: #E6E6FA;
}

Abbiamo finito!!! Semplice no?   Se volete vedere il lavoro ultimato, ho preparato una demo. L'aspetto del pulsante sarà come questo: Pulsante 3D. Buon divertimento  




Copyright © 2002-2018, Alessandro Marinuzzi