Umbra textului CSS
Proprietatea text-shadow adaugă o umbră textului.
În forma sa cea mai simplă, îi dai offsetul orizontal și vertical al umbrei. Poți adăuga de asemenea o culoare a umbrei și un efect de estompare.
Umbră orizontală și verticală
Umbra este deplasată 2px la dreapta și 2px în jos.
Prompt
O pagină HTML care adaugă o umbră simplă textului.
Într-un bloc intern
<style>, dă lui <h1> text-shadow: 2px 2px (doar offset orizontal și vertical). Adaugă un titlu.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Umbră cu culoare
Aceleiași umbre i se dă o culoare roșie.
Prompt
O pagină HTML care adaugă o umbră colorată textului.
Într-un bloc intern
<style>, dă lui <h1> text-shadow: 2px 2px red. Adaugă un titlu.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Umbră cu estompare
Se adaugă o estompare de 5px umbrei roșii.
Prompt
O pagină HTML care adaugă o umbră colorată și estompată textului.
Într-un bloc intern
<style>, dă lui <h1> text-shadow: 2px 2px 5px red (offset, blur, culoare). Adaugă un titlu.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Mai multe exemple de umbră a textului
Iată câteva efecte suplimentare de text-shadow.
Text alb cu umbră
Text alb cu o umbră întunecată, difuză.
Prompt
O pagină HTML cu text alb și o umbră întunecată.
Într-un bloc intern
<style>, fă <h1> alb cu text-shadow: 2px 2px 4px #000000. Adaugă un titlu.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Strălucire neon roșie
O umbră fără offset și cu o estompare roșie creează o strălucire.
Prompt
O pagină HTML cu o umbră roșie de tip neon pentru text.
Într-un bloc intern
<style>, dă lui <h1> text-shadow: 0 0 3px #ff0000 (fără offset, doar o estompare roșie pentru o strălucire). Adaugă un titlu.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 0 0 3px #ff0000;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Umbre multiple
Proprietatea text-shadow acceptă de asemenea mai mult de o umbră. Listează fiecare umbră separată prin virgule.
Strălucire roșie și albastră
Două umbre suprapuse creează o strălucire neon roșie și albastră.
Prompt
O pagină HTML cu două umbre suprapuse pentru o strălucire neon roșie și albastră.
Într-un bloc intern
<style>, dă lui <h1> text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff (două umbre separate prin virgulă). Adaugă un titlu.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Strălucire neagră, albastră și roșie
Text alb cu trei umbre suprapuse pentru o strălucire neagră, albastră și roșie.
Prompt
O pagină HTML cu text alb și trei umbre suprapuse pentru o strălucire neagră, albastră și roșie.
Într-un bloc intern
<style>, fă <h1> alb cu text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red. Adaugă un titlu.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}
</style>
</head>
<body>
<h1>Text shadow effect!</h1>
</body>
</html>
Proprietatea CSS Umbra Textului
Proprietatea acoperită pe această pagină este text-shadow, care setează efectul de umbră adăugat textului.