Come si possono apportare degli effetti sui link con il linguaggio CSS?
La riposta è semplice, perché le potenzialità di questo linguaggio di programmazione sono veramente notevoli e ci permettono di organizzare con molta facilità lo stile dei link di una pagina, creando anche diversi effetti accattivanti.
Prendiamo oggi in considerazione il linguaggio di programmazione CSS, che serve a progettare i fogli di stile per i documenti XML o HTML.
Diamo uno sguardo ad alcune scorciatoie per quanto riguarda l’elemento font, che va a controllare lo stile di un testo.
Normalmente la struttura che si scrive è questa:
Proseguiamo nella descrizione della parte script, per quanto riguarda la creazione di immagini ad opacità variabile con CSS e Javascript.
Siamo arrivati al punto in cui si da un valore di riferimento alla funzione con la proprietà opacity, ed un numero intero compreso tra 0 e 100 che permette di distinguere l’opacità: al valore 0 corrisponde un’opacità nulla, mentre all’altro estremo 100, si riferisce un’opacità totale, che copre tutto lo schermo quindi.
Uno dei più interessanti script è quello che permette di avere un effetto di trasparenza che cambia sulle immagini cross-browser.
Questo script trova applicazione con Internet Explorer 5.5 o superiore, Mozilla, Firefox, Safari e Konqueror, insomma è compatibile i principali browser web.
In questo articolo suddiviso in più parti proveremo alcune possibili dinamiche sviluppando questo script dalle enormi e accattivanti potenzialità grafiche.
Vi piacerebbe applicare un’immagine ad un box e renderlo trasparente per visualizzare gli elementi sottostanti? Ecco il codice:
#BOX { filter: alpha(opacity=80); position: Absolute; top: 25px; left: 25px; background-color: #EEEEEE; width: 130px; height: 50px; padding: 5px; border: Solid 1px #CCCCCC; }
Utilizzando il codice Css si può scrivere il testo in verticale, applicando una stilizzazione all’elemento testuale. Effetto molto utile nella creazione di report a colonna, ecco il codice completo:
td { text-align: center; font-size: 11px; font-family: verdana; } td.verticale { writing-mode: tb-rl; filter: flipv fliph; } <table border="1"> <tr> <td class="verticale"><b>Valore 1</b></td> <td class="verticale"><b>Valore 2</b></td> <td class="verticale"><b>Valore 3</b></td> <td class="verticale"><b>Valore 4</b></td> <td class="verticale"><b>Valore 5</b></td> </tr> <tr> <td>1</td> <td>0</td> <td>2</td> <td>2</td> <td>5</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>1</td> </tr> <tr> <td>5</td> <td>0</td> <td>2</td> <td>4</td> <td>4</td> </tr> </table>
Ecco il codice per inserire nei vostro sito una barra di scorrimento, tramite l’utilizzo del codice css.
#BARRA { overflow: Auto; background-color: #EEEEEE; color: #000000; font: Normal 12px Verdana; width: 150px; height: 200px; margin: 0px; padding: 5px; border: Solid 1px #000000; scrollbar-base-color: #000000; scrollbar-arrow-color: #CCCCCC; scrollbar-track-color: #CCCCCC; }
Di solito l’impaginazione dei form html viene effettuata con le tabelle, per dare una forma gradevole e ordinata alla pagina. I Nuovi standard sconsigliano però l’utilizzo della tabelle, ecco il codice per effettuare l’impaginazione tramite Css
:
<form name="modulo" method="" action=""> <div class="FrmLabel">Nome</div> <div class="FrmInput"></div> <div class="FrmLabel">Cognome</div> <div class="FrmInput"></div> <div class="FrmLabel">Email</div> <div class="FrmInput"></div> <div class="FrmSubmit"> </div> </form>
Stile per elementi div e input:
div, input { font-size: 12px; font-family: Verdana; } div.FrmLabel { float: Left; width: 100px; } div.FrmInput { text-align: Right; width: 150px; }
Volete tagliare un’immagine da inserire sul vostro sito senza utilizzare sofisticati programmi di grafica?
Create l’immagine assegnandola a una classe, nell’esempio è stata scelta Rid:
img src=”immagine.jpg” class=”RID”
Infine inserite questo codice css:
img.RID { position: Absolute; clip: Rect(0px 50px 200px 0px); }
Oggi vi presento un semplice codice per eseguire un effetto grafico che permette di centrare nello schermo un box overlayer.
Script per disegnare overlayer:
Ed ecco il codice Css:
style type="text/css" body { margin: 0px; height: 100%; background: #FFFFFF; } div.LayerCentrato { background: #DDDDDD; border: 1px solid #808080; position: absolute; top: 50%; left: 50%; width: 350px; height: 200px; margin: -100px, -175px; /style <pre lang="css">
