-
+6
.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
. -
.|Ye|. .
User deleted
Facile da eseguire ed efficace al 100%. Naturalmente questo codice si può applicare a qualunque altra immagine, non solo per il logo 
. -
Cometa Gabry .
User deleted
Io ci ho provato, ma non lo fa... :-( . -
Valls ~ .
User deleted
Puoi postare il tuo codice? (: . -
Cometa Gabry .
User deleted
mi sa che sto facendo un gran pasticcio, quale codice quello del logo?
quello del logo è questo
. -
.|Ye|. .
User deleted
Tutti e due
Se hai dei codici simili a questi:
nel colori e stiliCODICE/* 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}
in htmlCODICE<div class="logo"><a href="LINK_FORUM"><img src="URL_LOGO"></a></div>. -
Cometa Gabry .
User deleted
tutti e due non capisco?
li ho tolti perchè non funzionavano, devo rimetterli tutti e due di nuovo?
ho provato a mettere il primo nel colori e stili e NISBA
poi ho messo il secondo in html ed è uscita la scritta con il codice, così ho tolto tutto :/. -
.|Ye|. .
User deleted
Sì però il codice in HTML deve essere così: CODICE<div class="logo"><a href="#"><img src="http://images.cooltext.com/3187442.png"></a></div>
cioè con l'indirizzo del tuo logo!. -
Cometa Gabry .
User deleted
avevo messo proprio quelli che hai postato tu... dove ho sbagliato?
Proooooooooooooovo!!!
SIIIIIIIIIIIIIIIIII ce l'ho fatta!!! GRAAAAAAAAAAAAAAZIE!!!
Questo è il mio forum dove sto pasticciando di tutto per imparare, come si fa a togliere la scritta piccola di giorni infiniti sopra a forum libero?
http://giorniinfiniti.forumcommunity.net/. -
.
Vediamo di rispettare il tema del topic, apri un topic in supporto per il secondo problema (basta un topic unico) =) . -
Cometa Gabry .
User deleted
Chiedo scusa . -
Sasuke '95 .
User deleted
Come faccio ad applicare la transition anche all'effetto inverso? Nel senso: quando sovrappongo il mouse effettua la transizione, se invece voglio che la faccia anche quando lo tolgo? . -
+1 .
la metti anche in .logo img 
.
Logo che si Illumina al passaggio del Mouse[ HTML | Css ] Logo con Effetto "Spento/Accesso" al passaggio del mouse. |
Web