I cursori sono moltissimi e ciascuno è in genere associato a una particolare azione.
In Blogger vi sarete accorti che, quando puntiamo un link, il cursore si trasforma in una mano con in dito indice verso il collegamento. Se invece scriviamo un articolo con l'Editor di Blogger o con Windows
LIve Writer prende la forma di una linea verticale lampeggiante. Ecco un elenco dei principali tipi di cursori. Se puntate con il mouse un elemento, potrete visualizzarne la forma del cursore che vi è associato
ne-resize col-resize progress text vertical-text help e-resize se-resize s-resize sw-resize nw-resize w-resize move wait crosshair no-drop row-resize not-allowed
Vediamo come sia possibile visualizzare un particolare tipo di cursore nel blog o in un singolo elemento. Il metodo consiste nell'inserimento di questo codicecursor: NOME DEL CURSORE;
all'interno del foglio di stile corrispondente. Al posto di NOME DEL CURSORE va inserito quello che abbiamo scelto. Notate il punto e virgola finale della riga. Ecco alcune delle possibili applicazioni
Visualizzare il cursore personalizzato quando si punta un link del blog
Dobbiamo cercare in Design > Modifica HTML un codice simile a questo
a:hover {
text-decoration:underline;
color: $(link.hover.color);
cursor:nome-cursore; }
e inserire la riga colorata di rosso.text-decoration:underline;
color: $(link.hover.color);
cursor:nome-cursore; }
Modificare il cursore solo in link specifici
In questo caso dobbiamo creare una classe espressamente per i link che vogliamo abbiano questa proprietà. Potrebbe essere così
.cursore1:hover{cursor: NOME CURSORE; text-decoration: none;}
Questo codice va inserito subito sopra alla riga ]]></b:skin>. Quando si vuole inserire un collegamento che permetta di visualizzare il cursore personalizzato dobbiamo richiamare la classe con questo codice
<a class="codice1" href="URL DEL LINK">ANCHOR TEXT</a>
Possiamo creare anche la classe .cursore2, .cursore3, ecc ciascuna da applicare a link particolari.
Modificare il cursore quando viene puntata una immagine
Anche in questo caso si va su Design > HTML e si cerca la riga ]]></b:skin>. Subito sopra si inserisce la classe
.post img a:hover {cursor: NOME DEL CURSORE;}
Quando una immagine sarà puntata dal mouse, si vedrà il cursore che abbiamo scelto
Modificare il cursore nella sidebar, nel titolo o nel footer
Questo concetto si può applicare a tutti gli elementi del blog. Non sto a entrare nel dettaglio ma è sufficiente creare delle classi per modificare l'aspetto del cursore in un particolare elemento
.sidebar ul li a:hover{
cursor: NOME DEL CURSORE;
text-decoration: none;
}
oppure
.post-footer ul li a:hover{
cursor: NOME DEL CURSORE;
text-decoration: none;
}
Se una classe già esiste è sufficiente incollare la riga cursor: NOME DEL CURSORE; al suo interno prima della parentesi graffa finale.
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy