-
-spiker
| .
|
|
|
|
Se volete fare un logo che si illumina al passaggio del mouse (Esempio), basta che inseriate in colori e stili questo codice:
CODICE /* LOGO - con opacità. */
.logo img {margin: 0 0 30px 0; filter: alpha(opacity=40); opacity: 0.4} .logo a:hover img {border: 0; filter: alpha(opacity=100); opacity: 1; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s}
Praticamente .logo img regola l'opacità del logo quando NON è selezionato.
Se aumentate l'opacity il logo sarà sempre più luminoso (100/1 è il massimo).
Se impostate opacity "0", il logo sarà completamente invisibile.
Invece .logo img a:hover regola l'opacità al passaggio del mouse.
E' stata aggiunta la propietà transizione per non rendere l'effetto di passaggio "netto".
Maggiori informazioni sulla propietà qui.
!Importante: se avete lo Standard Layout il procedimento è terminato, per il Quicks ci sono 2 passaggi in più poichè non è possibile applicare l'effetto alla classe .logo direttamente (come nello standard) ma bensì gli va attribuita:
1. andate in amministrazione > grafica > logo e menu e lasciate il campo vuoto, procedete su "salva modifiche"
2. in HTML, dove volete posizionare il logo, inserite:
CODICE <div class="logo"><a href="LINK_FORUM"><img src="URL_LOGO"></a></div>
Adesso avrete il vostro logo che si illumina al passaggio del mouse =)
Tutorial a cura di -spiker per lo SkinFactory.
Edited by .|Ye|. - 24/6/2013, 20:24
|
|
|
| .
|
12 replies since 24/6/2013, 15:03 2401 views
.
.
.
Web