CSS: SOMBRAS EN TEXTOS HTML
Se pueden agregar sombras a cualquier tipo de texto en una página web, solo con añadir unos cortos códigos en la hoja de estilos (CSS).
Así se verá el Título con sombras:
Título con Sombras
Agregar en la hoja de estilos (.css):
h2{color:#363;text-shadow:1px -2px 2px #4545c7;filter:dropshadow(color=#4545c7, offx=1, offy=-2)}
Cambiar h2 y color:#363 por el título o texto que vaya a trabajar y su color básico. Luego puede cambiar el grosor en pixeles, el color en azul de las sombras o las distancias de las sombras en los ejes horizontal X o vertical Y (Positivo o Negativo -).
Logo de Texto que cambia de Colores
codepen.io/MoorLex
Así se verá el Logo de Texto cambiando de colores:
CóDIGos
Creamos una capa donde aparecerá el Logo de Texto cambiante, dentro del <body>.
Agregamos el estilo Css:
:root {
--color: #ffffff;
--background: #2196f3
}
#logo{
font-family: 'Baloo Tamma', cursive;
background: var(--background);
color: var(--color);
transition: 4s
}
.logo-texto{
text-align:50% 50%;
width:100%;
margin:0px auto;
font-size:250%;
letter-spacing:5px;
margin:5px;
transition: 4s;
text-shadow: -1px -1px 0px var(--background),
3px 3px 0px var(--background),
6px 6px 0px #00000055
}
Y en tercer lugar, agregamos el <script> que muestra los colores correspondientes, entre <head> y </head>:
<script>
const colors = [
'#2196f3',
'#f43f5e',
'#ec4899',
'#d946ef',
'#a855f7',
'#8b5cf6',
'#6366f1',
'#3b82f6',
'#0ea5e9',
'#06b6d4',
'#14b8a6',
'#10b981',
'#22c55e',
'#84cc16',
'#eab308',
'#f59e0b',
'#f97316',
'#ef4444',
]
setInterval(() => {
const color = colors[Math.floor(Math.random()*colors.length)]
document.body.style.setProperty('--background', color)
}, 5000)
</script>
Todos los estilos se pueden personalizar.