L'Effetto Tipografico nel Web Design sta diventando popolare. I nuovi Browser supportano la proprietà text-shadow, diventa quindi facile utilizzare i fogli di stile in CSS (più precisamente in CSS3), per generare l'effetto senza usare Photoshop.
L'effetto che desideriamo ottenere è il seguente:
per capire meglio ecco l'esempio: . Le scritte e i rettangoli hanno una profondità (o ombra)!
Di seguito presentiamo il codice che genera l'effetto.
STEP 1
Per lo sfondo (background) possiamo usare direttamente il colore grigio (in esadecimale #474747), l'effetto che vogliamo generare si vede ugualmente, ma se vogliamo usare un background con un'immagine dobbiamo crearlo.
STEP 2
Apriamo Photoshop e creiamo un foglio di 100 pixel x 100 pixel:
STEP 3
Il quadrato generato lo coloriamo con un grigio scuro:
STEP 4
Aggiungiamo un filtro di disturbo:
e salviamo il file immagine in formato PNG: bli.it-effetto-tipografico.png.
STEP 5
Creiamo il codice HTML (nome del file: bli.it-effetto-tipografico.html) che richiamerà il foglio di stile CSS:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/bli.it-style.css" />
<title>Effetto Tipografico In CSS</title>
</head>
<body>
<h1><a href="http://www.bli.it">bli.it</a></h1>
<h2>Effetto Tipografico In CSS</h2>
<pre>
<code>
color: #222;
text-shadow: 0px 2px 3px #555;
</code>
</pre>
<h3>Effetto Tipografico In CSS</h2>
<pre>
<code>
color: #222;
text-shadow: 1px 1px 1px #555555;
</code>
</pre>
</body>
</html>
É vero, abbiamo aggiunto del codice in più e più precisamene i TAG <pre> </pre> e <code> </code>: servono per generare i rettangoli con effetto di profondità, e i loro valori sono stati inizializzati (generati) all'interno del foglio di stile in CSS (che vedremo tra un po').
Per una introduzione su CSS leggi l'articolo Tutorial CSS: Guida Introduttiva Con Esercitazione Pratica
STEP 6
Prima di proseguire con il codice del foglio di stile in CSS spieghiamo brevemente la proprietà text-shadow.
text-shadow era inizialmente presente solo sul Browser Apple Safari, successivamente la sua funzionalità è stata estesa ad altri Browser, e lo si trova in quasi tutte le ultime versioni.
Per la proprietà text-shadow servono 4 parametri:
dove:
- destra : viene espressa in pixel e corrisponde allo spostamento verso destra dell'ombra
- basso : viene espresso in pixel e corrisponde allo spostamento verso il basso dell'ombra
- sfocatura : viene espressa in pixel e corrisponde alla profondità dell'ombra
- colore : viene espressa in esadecimale ed è il colore che viene dato all'ombra
Per il primo esempio useremo: text-shadow: 1px 1px 1px #555555;
Abbiamo effettuato i test su quattro Browser ottenendo che la proprietà text-shadow è presente sui Browser Mozilla Firefox (versione 3 e successive), Google Chrome (versione 3 e successive), Apple Safari. Il test con Microsoft Internet Explorer (fino alla versione 8 compresa) ha dato esito negativo: si vedrà il testo, ma non l'ombra.
Per approfondire i test sui Browser leggi l'articolo Le 5 Migliori Applicazioni Di Analisi Di Un Sito Web in Open Source
Per approfondire la proprietà text-shadow vai al Sito Web CSS3: text-shadow
I test sui Browser indicati li trovi in fondo all'articolo.
STEP 7
Creiamo il codice che conterra il foglio di stile in CSS (nome del file: bli.it-effetto-tipografico.css):
body {
background: #474747 url(bli.it-background.png);
margin: 70px;
}
h1 a {
display: block; text-decoration: none;
font: 150px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
text-align: center;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
h1 a:hover {
color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222; text-shadow: 0px 2px 3px #555;
}
h3 {
font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222; text-shadow:1px 1px 1px #555555;
}
pre {
width: 500px; margin: 0 auto; background: #222; padding: 20px;
font-size: 22px; color: #555; text-shadow: 0px 2px 3px #171717;
-webkit-box-shadow: 0px 2px 3px #555;
-moz-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Conclusione
I files che avete creato e quindi salvato inseriteli in una cartella e lanciate il file con nome: .
Ecco il risultato ottenuto con i 4 maggiori Browser:
Mi auguro di essere stato sufficientemente chiaro. Se così non fosse lasciate un commento indicando cosa non si è compreso, risponderò con un'altro commento.
Circa L'Autore: Lorenzo Bergamini |
|
 |
Ciao, sono Lorenzo Bergamini e sono un Libero Professionista (freelance) in Italia, specializzato nel Project e Program Management (gestione progetti dal pc al mainframe e Convalida), nell'analisi e sviluppo di programmi (dal pc al mainframe) e nel design e graphics designer di Siti Web, ed altro ancora legato all'I.T. e alla gestione aziendale. Mi occupo anche di scrittura pubblicando racconti. Puoi seguirmi sul mio sito web Lorenzo Bergamini. |
 Introduzione Al PHP - Lezione 1 di 3
Il PHP è un linguaggio (o codice) di sviluppo che può essere utilizzato dai maggiori Sistemi Operativi (non solo PC, MAC o Linux, ma anche... Leggi tutto...  Ispirazione Settimana 0947: Classic American Pinups
Come Ispirazione della Settimana 0947 proponiamo un'interessante e singolare collezione di 106 Immagini Classic American Pinups, da cui prendere... Leggi tutto...  Ispirazione Settimana 0946: Layout Web Home Pages Argomenti Misti
Come Ispirazione della Settimana 0946 proponiamo un'interessante collezione di 87 Layout Web Home Pages con argomenti misti, da cui prendere... Leggi tutto...  Ispirazione Settimana 0945: Layout Web Home Pages Da DeviantArt
Come Ispirazione della Settimana 0945 proponiamo una splendida collezione di 76 Layout Web Home Pages a soggetto misto, realizzata da Artisti di... Leggi tutto... |
|
Per condividere questo articolo con i Bookmarks clicca su Share o Condividi
|
Per essere sempre aggiornato iscriviti alla BLI.IT RSS FEED |
Per inserire un link di questo articolo sul tuo blog o sito web clicca su Quote this article on your site e ottieni il codice.
|
o al numero +39 388 9328157, o invia un fax al numero +39 051 19901217.Per ulteriori dettagli, richieste e consulenze contattaci utilizzando i moduli presenti in Richiesta Informazioni, telefona durante gli orari di ufficio con Skype
Condividi
Twitter
Myspace
Bookmarks.cc
Digg
Del.icio.us
Reddit
Slashdot
Netscape
Furl
Yahoo
Technorati
Newsvine
Blinkbits
Ma.Gnolia
Smarking
Googlize this
Blinklist
Facebook
Wikio
Diggita
Kipapa.cc
Notizieflash
OKnotizie
Segnalo
Ziczac
