DIV effetti di rollover

October 1

tecniche di progettazione Web sono tutti basati sulla possibilità di manipolare abilmente Hypertext Markup Language e Cascading Style Sheets. CSS ha portato Web design una lunga strada dai disegni basati su tabelle del passato. E 'ora possibile produrre effetti rollover e altre animazioni sottili senza scrivere codice in JavaScript. Poche righe di CSS produrranno un piacevole effetto rollover.

Impostare

Prima di poter illustrare un effetto rollover su un DIV, è necessario impostare. Una pagina Web molto minimale potrebbe essere simile alla seguente:

<Html>

<Body>

<Style>

wrapper {width: 900px; margin: 0 auto; } Esempio {width: 300px; altezza: 300px; background-color: red}

</ Style>

<Div id = "wrapper">

<Div id = "example">

</ Div>

</ Div>

</ Body>

</ Html>

Questo crea un involucro che conterrà il contenuto di prova al centro della pagina. Inoltre, crea un quadrato rosso. È possibile salvare questo codice come un documento con l'estensione ".html" e aprirlo in un browser per vedere.

Rendere la piazza più grande

Nel web design, effetti di rollover sono usati per dare le risposte all'utente finale di come si utilizza il sito web. Un effetto rollover come la realizzazione di un pulsante più grande porta l'attenzione di un utente a quell'elemento. Utilizzando un rollover per ingrandire un elemento è una tecnica che viene normalmente utilizzata su pulsanti o link per incoraggiare gli utenti a fare clic. Per rendere la piazza nel codice di esempio più grande, aggiungere la seguente riga dopo il tag "<style>":

Esempio: hover {width: 400px; Altezza: 400px}

Modifica del colore

Cambiare il colore di un elemento può essere utilizzato anche per dare un feedback degli utenti su come egli sta usando il vostro sito. Ad esempio, collegamenti ipertestuali cambiano colore dopo che sono stati cliccato. Cambiare il colore di un elemento sul ribaltamento può anche incoraggiare gli utenti a fare clic, ed è un po 'più sottile di cambiare la dimensione di un elemento. Per fare questo, cambiare il codice seguente nell'esempio:

Esempio: hover {width: 400px; Altezza: 400px}

A:

Esempio: hover {background-color: blue}

Cambiare stili di testo

Cambiare lo stile di testo su un rollover è anche una tecnica utile. Questo è forse il modo più sottile per dare agli utenti un feedback su come utilizzare un sito. Per esempio, sottolineare il testo sul rollover viene solitamente utilizzato per indicare che il testo è un link. Questa tecnica è molto sottile, però, e altri segnali sono di solito necessari per guidare l'utente. Se si desidera che l'utente clicca su qualcosa, e utilizza gli stili di testo per dare un feedback, l'elemento avrà bisogno di distinguersi per cominciare.