Decorazioni Underlines

« Older   Newer »
  Share  
Yolia
view post Posted on 13/7/2011, 16:07





Molti si sono chiesti come decorare e rifinire i propri link nelle skin,vi faccio un esempio? http://kostjaskin.forumfree.net
se cliccate sulle varie sezioni, vedrete che appare una decorazione in basso al nome della sezione, essa č stata creata attraverso un codice nel css.



CITAZIONE

Questo tutorial non necessita di Credits ma č Gradito un Ringraziamento al Forum nei credits in fondo al forum.


Nel css della vostra skin,troverete sempre il .web, e in questo caso ci occuperano della decorazione del web.

  • Primo Punto: intanto bisogna creare 2 immagini, una per il .web e una per il web a:hover(esattamente ciņ che noi vogliamo che spunti quando passiamo con il mouse sul nome della sezione) vi mostrerņ come esempi,quelle fatte per la Skin Kostja:

  • underline1 underline

    Praticamente la prima immagine č semplicemente il colore di sfondo della mia skin, in questo modo ho voluto lasciare intatto il web. ma potreste anche fare una decorazione che non sia il colore di sfondo. la seconda immagine invece sono due quadratini,uno grigio e uno rosa, questi appariranno ripetuti per tutta la lunghezza del nome della sezione, e faranno appunto da effetto decorativo. Naturalmente tutte queste decorazioni dovreste crearle con un qualsiasi programma grafico, consiglio inoltre a tutti, motivi semplici e sopratutto non molto grandi.

  • Secondo Punto: andiamo a inserire i nostri codici che qui di seguito vi riporto, nel nostro codice css,esattamente sotto il .web, i codici da inserire sono:


  • CODICE
    .web a:link, .web a:visited {text-decoration: none; background: url(inserire link dell'immagine con il colore di sfondo della skin) repeat-x left bottom; padding-bottom: 4px}
    .web a:hover {color: #inserire-colore; text-decoration: none;
    background: url(inserire link dell'immagine con decorazione) repeat-x left bottom}


    il padding-bottom: 4px in questo caso ci serve per regolare la distanza tra la decorazione e la scritta che ci sta sopra.


    Questa Guida č Conclusa,spero vi possa essere utile.
    Keyz

     
    Top
    0 replies since 13/7/2011, 16:07   164 views
      Share