-Ecco altri suggerimenti e tags sui fogli di stile, per abbellire le tue pagine web

<<     | << premessa | | << tags di base | | << tags 1 | | >> links utili |

--------------------------------

1) Come cambiare il puntatore del mouse?
R) Puoi modificare il puntatore del tuo mouse trasformando la classica freccia in altre "forme" utilizzando uno script che va inserito all'interno dell' HEAD della tua pagina web. Questo è lo script di base:

<STYLE>
A:hover {
CURSOR: stile che vuoi
}BODY {
CURSOR: stile che vuoi
}
TD {
CURSOR: stile che vuoi}
</STYLE>
 

il parametro A:HOVER indica lo stile del mouse al passaggio su un link, per cui se desideri che il puntatore cambi forma su un Link dovete modificare quella voce.

al posto di "stile che vuoi" potrete inserire uno degli stili possibili da attribuire al puntatore del mouse, per esempio:

hand=mano
crosshair=crocetta
move=quattro frecce
w-resize=freccia che punta verso sx
e-resize=freccia che punta verso dx
n-resize=freccia che punta verso l'alto
s-resize=freccia che punta verso il basso
help=punto interrogativo

Oppure puoi inserire un'immagine al posto del classico puntatore, un'immagine che abbia un'estensione come .ICO o .CUR o .ANI e che abbia una dimensione in pixel molto piccola (come quelle che trovi in questo sito nella sezione GRAPHICS), con questo codice:

<style>
body { cursor:url('tuaimmagine.cur');}
</style>
 

--------

2) Come posso colorare le barre di scorrimento delle mie pagine?
R) Devi utilizzare questo style:

<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color:colore che vuoi;
scrollbar-highlight-color:colore che vuoi;
scrollbar-3dlight-color:colore che vuoi;
scrollbar-darkshadow-color:colore che vuoi;
scrollbar-shadow-color:colore che vuoi;
scrollbar-arrow-color:colore che vuoi;
scrollbar-track-color:colore che vuoi;
}
-->
</STYLE>

ognuno di queste voci attribuisce un colore alle varie parti della tua barra di scorrimento, vediamole una per una con l'aiuto di questa immagine d'esempio:

CONSIGLIO: scegliete dei colori che non entrino in contrasto con lo sfondo della pagina e cercate di armonizzare il più possibile i colori delle scrolls, nell'immagine dell'esempio i colori sono molto in contrasto,ma solo perchè rendessero meglio l'idea nell'esempio ^^

-------

3) Come personalizzo lo stile dei links?
R) Come abbiamo già visto, basta utilizzare e personalizzare questo style:

<STYLE type=text/css>

A:link {COLOR: colore che vuoi; TEXT-DECORATION: none}
A:visited {COLOR: colore che vuoi; TEXT-DECORATION: none}
A:hover {FONT-WEIGHT: bold; COLOR: colore che vuoi; BACKGROUND-COLOR: colore che vuoi se lo vuoi; decoration: none}

</STYLE>

al posto di "colore che vuoi" inserisci il colore che preferisci, puoi anche attribuire delle DECORATION sostituendo il "none" con altri attributi, per esempio underline, overline o entrambi insieme, togliere il colore di sfondo (BACKGROUND) scrivendo NONE, attribuire anche un font-size superiore in modo che il testo linkato appaia più grande passando su il mouse, attribuire delle caratteristiche al bordo attraverso "border-botton" insomma puoi sbizzarrirti come preferisci.. provare per credere! Ovviamente queste decorazioni puoi combinarle in maniera differente per le varie posizioni, cioe' puoi mettere il background anche in "A:link" o in "A:visited", ect, e cio' vale per tutti i parametri e tutti i possibili "stili"!

ricorda che:

A:link=è il colore dei collegamenti nella tua pagina
A:visited=è il colore dei collegamenti già visitati
A:hover=è il colore del collegamento nel momento in cui passiamo sopra il mouse.

----------------------------------------------------------

<<     | << premessa | | << tags di base | | << tags 1 | | >> links utili |