Evidenziare i link su blogger con una linea tratteggiata

11 commenti:
 

linkSu alcuni siti web e su alcuni blog che visito di frequente, i link del menu o quelli all'interno dei testi sono evidenziati non dalla classica underline che appare o scompare al passaggio del mouse, ma da una linea tratteggiata. 

Questa scelta da un tocco di originalità in più alla grafica di un sito web, in cui i link sono troppo spesso marcati da una sottolineatura classica. Ma questo è un parere personale, esistono molti blog che puntano sui contenuti, più che sull'aspetto grafico, riscuotendo un enorme successo.

Sono sempre stato incuriosito da questo tipo di visualizzazione dei link, per la sua originalità e ho spesso tentato di inserirla nel template, ma senza riuscirci. Questo perché tentavo di inserirla tramite la proprietà CSS "text-decoration" che definisce la formttazione del testo. Questa proprietà può avere diversi valori:


text-decoration: none; 1293619058_arrow nessuna formattazione
     
text-decoration: underline; 1293619058_arrow testo sottolineato
     
text-decoration: line through; 1293619058_arrow testo barrato
     
text-decoration: blink; 1293619058_arrow testo a intermittenza
     
text-decoration: overline; 1293619058_arrow testo soprallineato


e tra questi non ce n'è uno che definisce il testo sottolineato con una linea tratteggiata, che in genere nel linguaggio html viene chiamata "dashed".

Il trucco sta nel non usare questa proprietà, ma un'altra: border.

Per inserire la linea tratteggiata sotto (o sopra) i link su blogger, dobbiamo modificare il codice html del template, quindi andiamo dal pannello di controllo "Layout" alla voce "Modifica HTML" e cerchiamo le righr di CSS che definiscono le proprietà dei link, che dovrebbero essere simili a queste:

a {
color: #fff;
text-decoration: underline;
}
a:visited {
color: #fff;
}
a:hover {
text-decoration: underline;
color: #fff;
}


Può essere che i valori siano differenti, perché ognuno imposta il colore che preferisce per i link, dal pannello di controllo "Layout" alla voce "Caratteri e Colori", ma la "a" iniziale significa che quelle sono le proprietà dei link.

Se modifichiamo queste righe inserendo la proprietà border-bottom, e modificando la "text-decoration" in "none", in questo modo:

a {
color: #fff;
text-decoration: none;
border-bottom: dashed 1px #fff;
}
a:visited {
color: #fff;
}
a:hover {
text-decoration: none;
border-bottom: dashed 1px #fff;
color: #fff;
}


i link saranno sottolineati con una linea tratteggiata.

Se vogliamo invece che la linea stia sopra i link sostituiamo "border-top" a "border-bottom".

In questo modo la linea sarà visibile sempre. Se vogliamo invece che la linea appaia solo al passaggio del mouse, dobbiamo inserire il border solo nelle ultime righe (a.hover): in questo modo:
 

a {
color: #fff;
text-decoration: none;
border-bottom: none;
}
a:visited {
color: #fff;
}
a:hover {
text-decoration: none;
border-bottom: dashed 1px #fff;
color: #fff;
}



se vogliamo invece che sia visibile inizialmente ma scompaia al passaggio del mouse dobbiamo inserire il border solo nelle righe iniziali (.a):

a {
color: #fff;
text-decoration: none;
border-bottom: dashed 1px #fff;
}
a:visited {
color: #fff;
}
a:hover {
text-decoration: none;
border-bottom: none;
color: #fff;
}



I vari "color" possono essere modificati a nostro piacimento, ricordandoci di inserire il cancelletto "#" prima del valore. Un elenco di colori con i rispettivi valori, e un picker utilissimo per trovare il colore che vogliamo, lo potete trovare su http://html-color-codes.info/.

11 commenti:

  1. Complimenti per il blog..
    Veramente curato nei minimi dettagli.
    Io anche mio occupo di grafica 2d e 3d.. con particolare rilievo sullo speed painting e il digital artwork ;)
    Se sei interessato potremmo fare uno scambio link!! :)

    Ciao a presto!

    RispondiElimina
  2. Ti ho già inserito nel mio blogroll... se vuoi fallo anche tu!
    Angelo

    RispondiElimina
  3. Complimenti Angelo!
    I blog come il tuo sono sempre utilissimi a chi come me non ha alcuna conoscenza di HTML e per sistemicchiare il proprio blog attinge da persone generose e competenti come te! :)

    RispondiElimina
  4. Ti ho aggiunto anche io nel blogroll. Grazie
    Rinnovo i complimenti.
    Credo avremo modo di conoscerci meglio, anche io faccio parte dello staff di G+F risorse grafiche e fotografiche ;)

    RispondiElimina
  5. Ciao Angelo, blog interessante credo che ogni tanto vi farò qualche visita. Il template mi piace molto! Ti ringrazio per essere passato nel mio blog.
    Ti aggiungo al mio blogroll.

    Lucia Alocchi

    RispondiElimina
  6. Grazie Lucia, anche io ti ho aggiunta al mio blogroll!

    RispondiElimina
  7. Segnalo che la proprietà blink non funziona su Explorer.

    RispondiElimina
  8. Eh sì, purtroppo alcune proprietà CSS su Explorer non funzionano, grazie a Markdvl per la precisazione! in ogni caso consiglio sempre a tutti di usare Firefox.

    RispondiElimina
  9. Ciao Angelo, sicuramente questa non è la sezione giusta , ma vorrei chiederti un consiglio. Ho la necessità di cambiare colore ai link esci e iscriviti per email (sono di colore blu) che si trovano rispettivamente a lato, il primo, e un pochino più sotto, il secondo, a posta un commento. Dopo tanti tentativi fatti nel blog di prova ancora non ci sono riuscito. Mi è venuto un dubbio, sono forse link a riposo? Sono di questo colore perché stò lavorando nel blog di prova? Solamente una volta, non ricordo dove, modificando i colori, la scritta esci è cambiata da blu a viola. Sto cambiando totalmente la veste grafica del mio blog, optando per il UrbanArtist (http://btemplates.com/2008/08/02/urbanartist/#comments), premetto che sono alle prime armi, ma il fatto di modificare e soprattutto di apprendere come è formato un template mi affascina molto.
    Nonostante tutto … Stò inpazzendo!!! Puoi darmi una mano?
    Grazie per le dritte che stai dando a quelli come me !!!

    RispondiElimina
  10. Ciao CS, mandami l'indirizzo del blog su cui stai cercando di fare la modifica. Intanto ho provato a trovare la stringa di CSS che regola l'aspetto di quei link, ma credo che si trovi nei CSS esterni di Google, e quindi non modificabili.

    In ogni caso sono dei link, quindi il loro colore (come il colore di tutti i link del blog) puoi cambiarlo dal pannello di controllo nel menu LAYOUT alla voce "caratteri e colori".
    Ci dovrebbe essere l'opzione "colore dei link".

    In alternativa, le modifiche puoi farle incollando la stringa di cui parlo nel post, al posto di quella originale del template. In questo modo puoi controllare maggiormente l'aspetto dei link da CSS e applicare proprietà aggiuntive, che non trovi dal pannello di controllo (come "background", "text-decoration", "border", e tutte quelle che puoi applicare al passaggio del mouse).

    In più ti segnalo questo articolo in cui trovi 3 alternative esterne alla gestione dei commenti: http://creareblog.blogspot.com/2008/05/tre-servizi-per-sostituire-la-gestione.html

    Angelo

    RispondiElimina

 
© 2016 LUCYDREAMS - Tutti i diritti riservati - P.IVA 13151341008 | Template Designed by Main-Blogger.