Efecte de Umbră CSS
Efectele de umbră sunt ceva ce CSS poate crea pentru tine!
Umbra Textului în CSS
Ca să pui o umbră pe text, folosește proprietatea CSS text-shadow.
Trebuie să setezi cel puțin umbra orizontală și cea verticală. Culoarea umbrei și efectul de blur sunt opționale.
Umbră de text de bază
Aici doar o umbră orizontală și una verticală, fără culoare și fără blur.
Prompt
Afișează un titlu h1 cu textul „Efect de umbră text!” care are o umbră orizontală de 2px și o umbră verticală de 2px, fără culoare sau blur specificate.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Text Shadow</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px;">Text shadow effect!</h1>
</body>
</html>
Umbră de text cu culoare
Aceeași umbră, acum colorată în roșu.
Prompt
Afișează un titlu h1 cu textul „Efect de umbră text!” care are o umbră orizontală de 2px, o umbră verticală de 2px și culoare roșie.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow with Color</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px red;">Text shadow effect!</h1>
</body>
</html>
Umbră de text cu blur
Umbra își păstrează culoarea și primește un efect de blur.
Prompt
Afișează un titlu h1 cu textul „Efect de umbră text!” care are o umbră orizontală de 2px, o umbră verticală de 2px, un efect de blur de 5px și culoare roșie.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow with Blur</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px 5px red;">Text shadow effect!</h1>
</body>
</html>
Text alb cu umbră neagră
O umbră neagră stă în spatele textului alb.
Prompt
Afișează un titlu h1 cu textul „Efect de umbră text!” în culoare albă, cu un text-shadow de 2px 2px 4px #000000. Folosește un fundal închis sau contrastant pentru ca textul alb să fie vizibil.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Text with Black Shadow</title>
</head>
<body>
<h1 style="color: white; text-shadow: 2px 2px 4px #000000;">Text shadow effect!</h1>
</body>
</html>
Strălucire neon roșie
Umbra de aici creează o strălucire neon roșie.
Prompt
Afișează un titlu h1 cu textul „Efect de umbră text!” care are un efect de strălucire neon roșie folosind text-shadow: 0 0 3px #ff0000.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Neon Glow</title>
</head>
<body>
<h1 style="text-shadow: 0 0 3px #ff0000;">Text shadow effect!</h1>
</body>
</html>
Umbre Multiple
Un text poate avea mai multe umbre: doar le enumeri, separate prin virgulă.
Strălucire neon roșie și albastră
Două umbre se combină într-o strălucire neon roșie și albastră.
Prompt
Afișează un titlu h1 cu textul „Efect de umbră text!” care are două umbre de text: o strălucire roșie (0 0 3px #ff0000) și o strălucire albastră (0 0 5px #0000ff).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows Neon Glow</title>
</head>
<body>
<h1 style="text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;">Text shadow effect!</h1>
</body>
</html>
Text alb cu umbre multiple
Umbre negre, albastre și albastru închis stau în spatele textului alb.
Prompt
Afișează un titlu h1 cu textul „Efect de umbră text!” în culoare albă, cu trei umbre de text: 1px 1px 2px negru, 0 0 25px albastru și 0 0 5px albastru închis.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows on White Text</title>
</head>
<body>
<h1 style="color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">Text shadow effect!</h1>
</body>
</html>
Chenar în jurul textului
Fără nicio umbră propriu-zisă, text-shadow poate desena și un chenar simplu în jurul textului.
Prompt
Afișează un titlu h1 cu textul „Chenar în jurul textului!” în culoare coral, cu text-shadow folosit pentru a crea un efect simplu de chenar negru: -1px 0 negru, 0 1px negru, 1px 0 negru, 0 -1px negru.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Around Text</title>
</head>
<body>
<h1 style="color: coral; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Border around text!</h1>
</body>
</html>