Creare Targhette Luminose al Passaggio del Puntatore [CSS/HTML/PS]

« Older   Newer »
 
  Share  
.
  1. Massimo™
        Like  
     
    .

    User deleted



    Cosa ci serve?

    1. Photoshop CS3

    2. Conoscere le basi di HTML e CSS

    1 - Aprite Photoshop, aprite un nuovo documento con dimensioni 80x15 px (è un esempio)
    2 - Fate la vostra targhetta, sarà la base della targhette che si illuminerà (esempio:)
    3 - Aprite un nuovo documento con dimensioni 100x30 px (ho aggiunto 20px e raddoppiato l'altezza, voi dovete cercare di aggiungere 20/30px alla targhetta, più grande se volete una illuminazione maggiore)
    4 - Incollate la vostra targhetta , salvate l'immagine.
    5 - Ora fate, Opzioni di Fusione ---> Bagliore Esterno e settate la vostra illuminazione ;)
    6 - Ora settate il Riempimento della targhetta a 0% e avrete solo l'illuminazine , salvate l'immagine.
    Ora passiamo ai CSS
    7 - Andate su Modifica Colori e Stili, andate in fondo e incollate il seguente codice:
    CODICE
    /* Targhette Luminose by Massimo™ */
    .targhetta a:hover img {background-image: url(http://LINK_IMMAGINE_SOLO_ILLUMINAZIONE.png); background-repeat: repeat-none}

    Ora passiamo all'HTML
    8 - Andate in Gestione codici HTML e incollate il seguente codice:
    CODICE
    <div class="targhetta">

    <a href="LINK1"><img src="http://LINK_IMMAGINE_SENZA_ILLUMINAZIONE_1.png"></a>
    <br>
    <a href="LINK2"><img src="http://LINK_IMMAGINE_SENZA_ILLUMINAZIONE_2.png"></a>

    </div>


    Abbiamo finito! ;)

    Tutorial di Massimo™, non rippate la targhetta nel tutorial, vietata la modifica dei crediti nel CSS.
     
    .
4 replies since 6/5/2009, 16:22   771 views
  Share  
.