Tutorial CSS3: Disegnamo un logo animato.
In questo tutorial vedrai come realizzare un logo animato che ruoti su se stesso tramite l’evento :hover, ovvero quando il cursore del mouse finirà sopra al logo.
Di seguito vedrai trattate le seguenti proprietà dei CSS:
- Gradient: Proprietà che crea una sfumatura tra due o più colori.
- Border radius: Arrotonda a piacere agli angoli un elemento HTML.
- Transform: Permette di modificare inclinazione e posizione di un elemento HTML.
- Transition: Per determinare la durata di un animazione.
- Text-shadow: Proprietà che permette di assegnare ombre ad un testo.
Per la realizzazione del tutorial sono necessari due soli file, il file logo.html e il rispettivo foglio di stile, stile.css.
HTML
l’HTML del nostro logo sarà molto semplice, basterà inserire tra i tag body il div id logo, tutto il resto del tutorial avverrà modificando il file CSS.
<body> ... <div id="logo"><p>A<sup>2</sup></p></div> ... </body>
il tag sup introdotto con HTML5 è utile per iserire testi in apice rispetto ad altri testi, quindi può essere molto utile per formule matematiche e fisiche, in questo caso lo utilizzeremo semplicemente come decorazione.
CSS
Stili per il div Logo
La prima cosa che andremo ad aggiungere nella pagina stile.css saranno i parametri per la visualizzazione del div logo nella pagina web.
#logo { margin:auto; /* Posiziona automaticamente al centro della pagina il logo */ background-color:#FF0000; /* Decidiamo la dimensione che avrà il logo */ width:250px; height:250px; /* Arrotondiamo gli angoli del div logo con la proprietà Css3 Border radius */ -moz-border-radius: 200px; border-radius: 200px; /* Creiamo un effetto gradiente tra due colori con la proprietà Css3 Gradient */ background: #a90329; /* old browsers */ background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* ie */ }
Stili per il div logo :hover
Adesso Settiamo le opzioni CSS per lo stato :hover del logo, grazie al quale decidiamo cosa accadrà quando il mouse si posizionerà sopra al logo.
#logo:hover { /* Facciamo ruotare il logo con la proprietà CSS3 Transform */ -moz-transform: rotate(45deg); /* FF3.5+ */ -o-transform: rotate(45deg); /* Opera 10.5 */ -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ -ms-transform: rotate(45deg); /* IE9 */ transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6,IE7 */ M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476,sizingMethod='auto expand')"; /* IE8 */ zoom: 1; /* Deciciamo il tempo in Sec dell'animazione del logo con la proprietà CSS3 Transition */ -moz-transition: all 0.5s ease-out; /* FF3.7+ */ -o-transition: all 0.5s ease-out; /* Opera 10.5 */ -webkit-transition: all 0.5s ease-out; /* Saf3.2+, Chrome */ transition: all 0.5s ease-out; }
Stili per il testo
Adesso aggiungiamo anche degli effetti al tag p e di conseguenza anche al tag sup contenuto dentro p
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 90px; font-style: italic; font-weight: bold; text-decoration: none; text-transform: capitalize; color: #000000; /* Modificando il padding decideremo dove posizionare il testo all'interno del div logo */ padding-top: 70px; padding-right: 70px; padding-bottom: 70px; padding-left: 90px; /* Aggiungiamo le ombre solo al testo con la proprietà CSS3 text shadow */ text-shadow: 1px 1px 1px #ccc; filter: dropshadow(color=#ccc, offx=1, offy=1); }
Naturalmente ricordatevi di collegare alla pagina HTML lo stile CSS per fare in modo che vengano applicati gli effetti tramite questa linea di codice da inserire tra i tag head della pagina HTML:
<head> ... <link href="stile.css" rel="stylesheet" type="text/css" /> ... </head>
Conclusione
Lo scopo di questo tutorial è stato quello di osservare alcune tra le principali caratteristiche dei nuovi CSS3 e metterle in pratica per mostrarne una possibile applicazione, si nota come con uno sforzo minimo dal lato codice si possono creare elementi web nuovi, in grado di dare più vitalità ad una pagina, di contro i CSS3 sono ancora in fase di definizione per cui per molte proprietà bisogna scrivere diverse linee di codice per adattarle alla visualizzazione sui differenti browser:
- -moz- per Firefox
- -o- per Opera
- -webkit- per Safari e Chrome
- -ms- Per Internet Explorer
La scelta a voi se utilizzarli o attendere ancora qualche anno.
bravo bravo, mi piace
Bene! mi fa piacere
Ottima l’idea. Anche io sono ansioso di utilizzare a pieno le funzioni CSS3.
Peccato che ‘sti maledetti browsers ancora non li supportino a dovere.
IE9 sbrigati ad uscire ! (…ma pure Firefox4 visto che le transitions non le supporta…)
Grazie. Infatti non so se continuare a scrivere sul blog delle cose su css3 o smettere, tu che dici?
Ho visto l’anteprima del tuo portfolio, promette bene.
Ma si! Continua. Quando un tutorial è ottimo è sempre gradito.
Che poi mi chiedo se dopo l’uscita di questi “browsers moderni” (come li chiamano ultimamente)
gli “utenti medi” (sciagura dell’informatica) aggiorneranno o resteranno aggrappati ai loro vari IE6,
Firefox 3 e quant’altro… Aggiornate gente! Aggiornate!
Detto questo, ti ringrazio per aver dato un’occhiata all’under construction del mio sito. Dovrebbe uscire a breve. Un saluto. Filippo