1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
---
title: text-shadow
slug: Web/CSS/text-shadow
translation_of: Web/CSS/text-shadow
---
<p> </p>
<div style="margin: 10px 0px; padding: 0px 10px; background-color: rgb(254, 244, 156); font-weight: bold; text-align: center;">
<p style="margin: 4px 0px;">Introdotto in Gecko 1.9.1</p>
<div>
Si applica a Firefox 3.5, Thunderbird 3 e superiori</div>
</div>
<p> </p>
<div id="section_1">
<h3 class="editable" id="Sommario"><span>Sommario</span></h3>
<div class="editIcon">
<a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<p>La proprietà CSS <span class="lang lang-en"><code><strong>text-shadow</strong></code></span> accetta una lista di effetti di ombreggiatura separata da virgole, che viene applicata al testo e alle <span class="lang lang-en"><code><a href="../../../../en/CSS/text-decoration" rel="internal">text-decoration</a></code></span> dell'elemento.</p>
<ul>
<li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: <span class="lang lang-en"><code><a href="../../../../en/CSS/none" rel="internal">none</a></code></span></li>
<li>Si applica a: tutti gli elementi</li>
<li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: sì</li>
<li>Percentuali: no</li>
<li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li>
<li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: un colore e tre lunghezze</li>
</ul>
</div>
<div id="section_2">
<h3 class="editable" id="Sintassi"><span>Sintassi</span></h3>
<div class="editIcon">
<a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<pre>text-shadow: none | [<shadow>,]* <shadow>
dove <shadow> è:
[ <colore> <lunghezza> <lunghezza> <lunghezza>? | <lunghezza> <lunghezza> <lunghezza>? <colore>? ]</pre>
</div>
<div id="section_3">
<h3 class="editable" id="Valori"><span>Valori</span></h3>
<div class="editIcon">
<a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<dl>
<dt>
<colore></dt>
<dd>
Opzionale, prima o dopo i valori di <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal"><lunghezza></a></code></span> </span>. Se il <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/color_value" rel="internal"><colore></a></code></span> </span>non è specificato, viene usato un colore predefinito. Gecko/Firefox usa il valore della proprietà <span class="lang lang-en"><code><a href="../../../../en/CSS/color" rel="internal">color</a></code></span> dell'elemento. Gli altri browser potrebbero comportarsi diversamente.<span class="lang lang-en"> </span>
<div class="note">
<span class="lang lang-en"><strong>Nota:</strong> Specifica un colore per la compatibilità tra browser.</span></div>
</dd>
<dt>
<lunghezza> <lunghezza></dt>
<dd>
Vedi <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal"><length></a></code></span> </span>per le possibili unità di misura.<br>
Questi valori di <code><lunghezza> </code>stabiliscono la distanza dell'ombreggiatura. Il primo parametro<code> <lunghezza> </code>specifica la distanza orizzontale. Valori negativi spostano l'ombreggiatura a sinistra del testo. Il secondo parametro<code> <lunghezza> </code>specifica la distanza verticale. Valori negativi spostano l'ompreggiatura sopra il testo. Se entrambi i valori sono <code>0</code> l'ombreggiatura si sposta dietro al testo (e potrebbe generare un effetto di sfocato se è specificato il terzo parametro<code> <lunghezza></code>).</dd>
</dl>
<dl>
<dt>
<lunghezza></dt>
<dd>
Opzionale. Il terzo parametro <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal"><lunghezza></a></code></span> </span> specifica <em>il raggio dell'effetto sfocato</em>. Se non viene specificato, è <code>0</code>. Più alto è il valore, più grande è l'effetto sfocato, quindi l'ombreggiatura diventa più estesa e più chiara.</dd>
</dl>
</div>
<div id="section_4">
<h3 class="editable" id="Examples"><span>Examples</span></h3>
<div class="editIcon">
<a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273985" rel="external nofollow" title="https://bugzilla.mozilla.org/attachment.cgi?id=273985">Esempio 1</a> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=197360" rel="external nofollow" title="https://bugzilla.mozilla.org/attachment.cgi?id=197360">Esempio 2</a> da Bugzilla</p>
<pre> h1 { text-shadow: black 0 0 0.4em; }
</pre>
<pre> h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; }
</pre>
</div>
<div id="section_5">
<h3 class="editable" id="Specifiche"><span>Specifiche</span></h3>
<div class="editIcon">
<a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<p>Nota: <code>text-shadow </code>era stata definita impropriamente in CSS2 e scartata in CSS2.1. La specifica <em>Text </em>di<em> CSS3</em> ha migliorato la sintassi.</p>
<ul>
<li><a class="external" href="http://www.w3.org/TR/css3-text/#text-shadow" rel="external nofollow" title="http://www.w3.org/TR/css3-text/#text-shadow">CSS 3 Text #text-shadow</a> Bozza, sono stati proposti alcuni cambiamenti.</li>
</ul>
</div>
<div id="section_6">
<h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3>
<div class="editIcon">
<a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<table class="standard-table">
<tbody>
<tr>
<th>Browser</th>
<th>Versione più vecchia</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>No<br>
La versione 5.5 supporta il Filter <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539%28VS.85%29.aspx" rel="external nofollow" title="http://msdn.microsoft.com/en-us/library/ms673539(VS.85).aspx"><em>Shadow</em> e <em>DropShadow</em></a></td>
</tr>
<tr>
<td>Firefox (Gecko)</td>
<td><strong>3.5</strong> (1.9.1)</td>
</tr>
<tr>
<td>Opera</td>
<td><strong>9.5</strong></td>
</tr>
<tr>
<td>Safari (WebKit)</td>
<td><strong>1.1</strong> (100), ombreggiature multiple dalla versione 4.0 (528)</td>
</tr>
</tbody>
</table>
<p>Al momento di scrittura:</p>
<ul>
<li><strong>Opera 9.x</strong> supporta al massimo 6 ombreggiature, e aderisce al CSS2 per il colore (la prima ombreggiatura specificata è l'ultima).</li>
<li><strong>Gecko 1.9.1</strong> (Firefox 3.5) teoricamente supporta infinite ombreggiature (ma non provarci!) e aderisce al CSS3 per il colore (la prima ombra specificata è la prima).</li>
</ul>
</div>
<div id="section_7">
<h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3>
<div class="editIcon">
<a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div>
<p><span class="lang lang-en"><code><a class="internal" href="/../../en/CSS/-moz-box-shadow" rel="internal" title="../../en/CSS/-moz-box-shadow">-moz-box-shadow</a></code></span></p>
</div>
<p> </p>
|
