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">
Ecco un esempio di codice che permette di creare una finestra pop-up che appare quando viene cliccato un link o un pulsante.
function ApriFinestra() { msg=open("","schermo","toolbar=no,directories=no,menubar=no,width=110,height=300,resizable=yes") msg.document.write("<a href="http://www.programmando.net">Sito Informatico</a>"); msg.document.write("<a href="#">Chiudi</a>"); } <form> </form>
Con l’utilizzo del codice css è possibile creare degli effetti alla grafica davvero spettacolari, vi piacerebbe realizzare un box con angoli smussati senza utilizzare immagini? Ecco il codice per realizzare questa magia.
<div class="BORDI">
<span class="TOP">
<span class="RIGA1"></span>
<span class="RIGA2"></span>
<span class="RIGA3"></span>
<span class="RIGA4"></span>
</span>
</div>
<div class="CONTENUTO">
<b>MRW Corsi</b><br><br>
Scopri un sacco di trucchi visitando questo sito
<a href="http://www.programmando.net">www.programmando.net</a>
</div>
<div class="BORDI">
<span class="BOTTOM">
<span class="RIGA4"></span>
<span class="RIGA3"></span>
<span class="RIGA2"></span>
<span class="RIGA1"></span>
</span>
</div>Ed ecco il codice css:
/* STILIZZAZIONI DI BASE DELLA PAGINA */ body { background-color: #FFFFFF; } div { font: Normal 10px Verdana; } a { color: #FFFFFF; } /* CONTENITORI DEI BORDI E DEL CONTENUTO DEL BOX */ div.BORDI { width: 120px; } div.CONTENUTO { background-color: #FF6600; color: #FFFFFF; width: 120px; padding: 5px; } /* CREAZIONE DEGLI ANGOLI SMUSSATI */ span.TOP, span.BOTTOM { display: Block; background-color: #FFFFFF; } span.TOP span, span.BOTTOM span { display: Block; overflow: Hidden; background-color: #FF6600; height: 1px; } span.RIGA1 { margin: 0 5px; } span.RIGA2 { margin: 0 3px; } span.RIGA3 { margin: 0 2px; } span.TOP span.RIGA4, span.BOTTOM span.RIGA4 { margin: 0 1px; height: 2px; }
