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ì:
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:
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
<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