CSS
Sombra de Texto
A text-shadow
é a propriedade para adicionar sombra no texto.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px
3px;
}
</style>
</head>
<body>
<h1>Efeito de sombra de texto! </h1>
</body>
</html>
Efeito
no texto com sombra cor azul
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px
3px blue;
}
</style>
</head>
<body>
<h1>Efeito de sombra de texto! </h1>
</body>
</html>
Efeito
desfoque (6px)
no texto com sombra cor azul
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px
3px 6px blue;
}
</style>
</head>
<body>
<h1>Efeito de sombra de texto! </h1>
</body>
</html>
Na prática
1
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:black;
text-shadow: 2px
2px 4px #ffffff;
}
</style>
</head>
<body>
<h1>Efeito de sombra de texto! </h1>
</body>
</html>
Na prática
2
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0
3px #FF0000;
}
</style>
</head>
<body>
<h1>Sombra de texto com brilho neon vermelho! </h1>
</body>
</html>
Na
pratica 3
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0
3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>Sombra de texto com brilho neon vermelho e azul!
</h1>
</body>
</html>
Na prática
4
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: black;
text-shadow: 1px
1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1> Efeito de sombra de texto! </h1>
</body>
</html>