Pagina Iniziale | Preferiti Comunity: Login | Registrati | Newsletter | Forum | Concorsi Newsgroup
Canali: Hardware | Software | Files | Webmaster | Cellulari | Shop
Nel sito: News | Articoli | Files | Manuali | Consigli PC | Schede cellulari | Programmaz. | Hosting | Motori Ricerca | Glossario | Link
Servizi: Shopping | Forum | Crea un BLOG | Cartucce Compatibili | Tool News |   Sponsor: Automazione Industriale
  Articoli

Recensioni
Consigli per PC


  News e files

Software
Telefonia
Internet
Tecnologia
Files e Download


  Manualistica

Guide HW/SW
Scripts ASP
Scripts HTML
Scripts Java
Scripts Delphi
Glossario


  Shopping

Hardware
Software e Giochi
Elettronica
Cinema e Film
Console e Accessori
Prodotti Ufficio
Formazione e Corsi

Tieniti aggiornato sul mondo della tecnologia con la nostra newsletter!
La tecnologia sulla tua
casella e-mail

[Info Newsletter]


Concessionaria Pubblicitaria

<< News Precedente [Fine Pagina] News Successiva >>
Effetto ombra su testo con i CSS

Un articolo di: Fonte Esterna del 05/02/2003      Letture: 16417

Autore: Luca Ruggiero

Molti siti utilizzano intitolazioni testuali con effetto ombra, nella maggior parte dei casi si tratta di immagini che possono rallentare il caricamento della pagina vediamo com'è possibile creare lo stesso effetto usando un testo, sicuramente più leggero.

Creiamo due Tag di testo Html in cui inseriamo lo stesso testo, assegniamogli tutte le caratteristiche di stile del caso, sicuramente colori diverso, poi posizioniamole dinamicamente in modo che siano lievemente sovrapposte.

Nel caso in cui si voglia assegnare lo stesso stile ad elementi in più pagine, conviene creare due classi diverse e richiamarle sull'uno e sull'altro Tag di testo che compongono la scritta vera e propria, e l'ombra.

Vediamo un esempio:

<style type="text/css">
   h3.Ombra_01 {
      color: #000000;
      font: Bold 50px Arial;
      position: Absolute;
      left: 10px;
      top: 10px;
      z-index: 1;
   } 
   h3.Ombra_02 {
      color: #CCCCCC;
      font: Bold 50px Arial;
      position: Absolute;
      left: 15px;
      top: 15px;
      z-index: -1;
   } 
</style>

<h3 class="Ombra_01">Effetto ombra</h3>
<h3 class="Ombra_02">Effetto ombra</h3>
E' facile notare che le parti evidenziate in rosso sono lievemente diverse nelle due classi: rispetto alla primo, la seconda è posizionata dinamicamente con margini sinistro e superiore maggiore rispetto al primo, ed è indicizzato in maniera da trovarsi al di sotto del primo livello.

Per farci un'idea concreta, visualizziamo un esempio



[Indietro]    [Su]      [Home]      [Commenti]      [V. Stampabile]

Commento di Anonimo (ip: 151.36.207.207), scritto il 12/09/2005 alle 12:41:27
PROBLEMA DI COMPATIBILITA':

Probabilmente quest' articolo è un po' datato oppure semplicemente il codice dichiarato non è stato sufficientemente testato. Infatti visualizzando la pagina d'esempio con Mozilla FireFox non si ottiene alcun effetto di ombra. Il problema nasce dal fatto che la povera volpe ifuocata, ahimè, vien quasi da dire "suo malgrado", interpreta "correttamente" gli stili CSS (Ma tanto ormai ci siamo abbituati a questa situazione, non è vero?).

FireFox non supporta valori negativi per il parametro Z-INDEX, o meglio, diciamo che non gli danno alcun fastidio ma, poichè esso assegna di default il valore "0" (ZERO) al parametro z-index del <BODY>, di conseguenza un ipotetico elemento con valore z-index negativo verrà posizionato al di sotto del BODY stesso e, dunque, dal momento che non è possibile assegnare una trasparenza al tag BODY, l'elemento in questione risulterà, in pratica, nascosto dal background.

# UN IPOTETICA SINTASSI CORRETTA POTREBBE ESSERE LA SEGUENTE:

<style type="text/css">
.Ombra_01 {
position: absolute;
color: #000000;
font: Bold 50px Arial;
left: 10px;
top: 10px;
z-index: 2;
margin: 0px;
}
.Ombra_02 {
position: absolute;
color: #CCCCCC;
font: Bold 50px Arial;
left: 15px;
top: 15px;
z-index: 1;
margin: 0px;
}
</style>

<h3 class="Ombra_01">Effetto ombra</h3>
<h3 class="Ombra_02">Effetto ombra</h3>


Commento di Anonimo (ip: 87.7.194.49), scritto il 21/04/2006 alle 16:25:20
fghgfh

Commento di Anonimo (ip: 93.146.177.227), scritto il 24/11/2010 alle 15:38:06
ah, bello l''esempio!

Commenta questa notizia:
Non hai ancora fatto il
Login, puoi inserire commenti solo come anonimo.
ATTENZIONE: il tuo IP verrà memorizzato e mostrato a fianco del commento; con la pressione del tasto invia commento si esprime il consenso alla pubblicazione di tale informazione personale.
A discrezione dello staff, i commenti ritenuti non adatti od offensivi potranno essere rimossi. Nel caso di utilizzo di espressioni volgari od offensive il comportamento verrà segnalato al provider interessato.
Se non ti sei ancora registrato, cosa aspetti? Registrati subito.

Da ora puoi discutere dei problemi informatici anche sul nostro FORUM

Testo del commento:


  News correlate
 Editare codice Html sulla pagina web come testo
 TAG HTML: a cosa servono
 Centrare un'immagine di sfondo con i CSS
 Ritorno a capo nei button di form Html
 Sostituisci il puntatore del mouse con un file .ani .ico o .cur
 Inserisci un'immagine in un button
 Effetto zoom in un tag <div></div> applicato a un testo con i CSS.
 Tag hr in verticale
  Ultime dal Forum

????? ??????? ?????? ?????? ??????? ?? ??????? ?????????
Best Price Finder
Product Comparison
Compare Prices
Consumer Products
Best Buy Compare
comprar cialis sin tarjeta
cialis vs viagra flashback
cialis generico en valencia

Comunicazioni / Note Legali / Staff / Collabora / Pubblicità / Privacy / Contatti


Copyright JuiceADV S.r.l. (P.IVA : 02387250307), tutti i diritti riservati Utenti Connessi: 277


Pagina creata in 0,06sec. Powered by JuiceADV S.r.l.

Stats v0.1 (0,000sec.)