Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Ombra del testo CSS


Ombra del testo

La text-shadowproprietà aggiunge ombra al testo.

Nel suo utilizzo più semplice, specifichi solo l'ombra orizzontale (2px) e l'ombra verticale (2px):

Effetto ombra del testo!

Esempio

h1 {
  text-shadow: 2px 2px;
}

Quindi, aggiungi un colore (rosso) all'ombra:

Effetto ombra del testo!

Esempio

h1 {
  text-shadow: 2px 2px red;
}

Quindi, aggiungi un effetto sfocato (5px) all'ombra:

Effetto ombra del testo!

Esempio

h1 {
  text-shadow: 2px 2px 5px red;
}

Altri esempi di ombre di testo

Esempio 1

Ombra di testo su un testo bianco:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Esempio 2

Ombra di testo con bagliore al neon rosso:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

Esempio 3

Ombra di testo con bagliore al neon rosso e blu:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Esempio 4

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Suggerimento: vai al nostro capitolo sui caratteri CSS per sapere come modificare i caratteri, la dimensione del testo e lo stile di un testo.

Suggerimento: vai al nostro capitolo sugli effetti di testo CSS per informazioni sui diversi effetti di testo.


Mettiti alla prova con gli esercizi

Esercizio:

Cambia il colore del testo di tutti gli elementi <p> ​​in "rosso".

<style>
p {
  : red;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


Tutte le proprietà del testo CSS

Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-align-last Specifies how to align the last line of a text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text