Effetti d'animazione al hover seconda parte.

Proseguiamo la lezione precedente circa effetti animazione con CSS3 al evento hover(passaggio del puntatore del mouse sopra gli elementi in CSS)
Sta volta saro un puo piu breve ti faccio vedere i 6 effetti rimasti che puoi sempre utilizzare sul tuo sito web, sara un blog o un sito portafoglio, tocca a te scegliere dove utilizzarli. Non riporterò piu il codice ma ve lo do sotto in un unico fail di stili css nella aria da scaricare.

 Vediamo animazioni rimasti.

Efetto numero cinque con utilizzo della calsseview view-fifth

Stile #5 view-fifth

Finalmente puoi davvero sbarazzarsi di tutti i problemi tecnici legati al tuo business in rete.

Prema mi!

Effetto numero sei con utilizzo della calsse view view-sixth

Stile #6 view-sixth

Finalmente puoi davvero sbarazzarsi di tutti i problemi tecnici legati al tuo business in rete.

Clica qui

Effetto numero sette con utilizzo della calsseview view-seventh

Stile #7 view-seventh

Finalmente puoi davvero sbarazzarsi di tutti i problemi tecnici legati al tuo business in rete.

Vediamo

Effetto numero otto con utilizzo della calsseview view-eighth

Stile #8 view-eighth

Finalmente puoi davvero sbarazzarsi di tutti i problemi tecnici legati al tuo business in rete.

Prova!

Effetto numero nove con utilizzo della calsseview view-ninth

Stile #9 view-ninth

Finalmente puoi davvero sbarazzarsi di tutti i problemi tecnici legati al tuo business in rete.

Bottone

Effetto numero dieci con utilizzo della calsseview view-tenth

Stile #10 view-tenth

Finalmente puoi davvero sbarazzarsi di tutti i problemi tecnici legati al tuo business in rete.

Vado!

Quindi dopo aver visto tutti i 10 effetti potete scegliere quello che vi piace di più per il vostro sito web.

Come realizzare uno di esso sulla tua pagina?

Se è una semplice pagina HTML, quindi colleggiamo il fail di stile che poi scaricare qui sotto. Creiamo il blocco tipico per il nostro elemento scelto come descritto nella lezione precedente e godiamoci la nostra animazione.

Nel caso di un sito Joomla il fail di stile che scarichi qua sotto dobbiamo copiare nella cartella CSS del vostro template predefenito, collegarlo sempre al vostro template nel fail index.php o se il vostro template e molto complesso trovare i fail con estensione .php con i tag head e creare collegamento li.( di piu nei corsi CSS )

Una volta collegato il fail di stile, sto parlando di Joomla. Dovremo creare nel materiale o in un modulo (scegliendo il tipo del modulo Pesonalizzato) la nostra struttura principale come nel articolo precedente attribuire a questo blocco rispettiva classe per esempio class="view view-ninth" per ottenere effetto d'animazione del nono esempio.

Vedimo il codice HTML da inserire nel modulo personalizzato o nel articolo

<div class="view view-ninth"> <!--apriamo ellemento con la calsse class="view view-ninth -->
    <img src="/images/css/animazioneCSS/2.jpg"><!--inseriamo una imagine-->
    <div class="mask mask-1"></div> <!--nostro primo effetto -->
    <div class="mask mask-2"></div> <!-- nostro secondo effetto -->
    <div class="content"> <!--contenuto del blocco-->
    <h2>Stile #9 view-ninth</h2> <!-- titolo del blocco -->
    <p>Finalmente puoi davvero sbarazzarsi di tutti i problemi tecnici legati al tuo business in rete.</p> <!-- semplice testo -->
 <a class="info" href="http://www.ioeweb.it/momentiTecnici/">Bottone</a> <!-- pulsante se serve creare un link-->
    </div> <!-- chisura del div con la class="content"-->
</div><!-- chisura del nostro ellemento con la classe class="view view-ninth" -->

 E qui sotto poi scaricare il fail con tutti gli effetti nel formato CSS

 

Letto 1049 volte