Algunos ejemplos del uso de la propiedad
text-shadow, ideales para hacer títulos raritos aunque es algo que no fucionará en Internet Explorer.
retro
<style>
#vintage {
background-color: #EEE;
color: #707070;
font-family: Times New Roman;
font-size: 160px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;
}
</style>
<h1 id="vintage">retro</h1>
Neon
<style>
#neon {
background-color: #000;
color: #FFF;
font-family: Garamond;
font-size: 160px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FF00DE, 0 0 70px #FFF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 150px #DD00DE;
}
</style>
<h1 id="neon">neon</h1>
Inset
<style>
#inset {
background-color: #474747;
color: #222;
font-family: Helvetica;
font-size: 200px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 0px 2px 3px #666;
}
</style>
<h1 id="neon">Inset</h1>
Arial
<style>
#anaglyphic {
background-color: #FFF;
color: rgba(0,168,255,0.5);
font-family: Arial;
font-size: 200px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
}
</style>
<h1 id="anaglyphic">Arial</h1>
Fire
<style>
#fire {
background: #000;
color: #FFF;
font-family: Courier;
font-size: 200px;
margin: 200px auto;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -60px 60px #CD4606, 0 -80px 70px #973716, 10px -90px 80px #451B0E;
}
</style>
<h1 id="fire">Fire</h1>
Game
<style>
#boardgame {
background-color: #EEE;
color: #FFF;
font-family: Arial;
font-size: 170px;
margin: 200px auto;
padding: 10px 0 50px 35px;
text-align: left;
text-transform: uppercase;
text-shadow: 10px 10px 0 #FFD217, 20px 20px 0 #5AC7FF, 30px 30px 0 #FFD217, 40px 40px 0 #5AC7FF;
}
</style>
<h1 id="boardgame">Game</h1>
8 comentarios:
COPADAZO!
Me encantan los efectos, por ahí no me importa como se vea en IE, es muy difícil compatibilizar.
Las sombras, diría que es imposible; en IE se ven muy rígidas.
JMiur, coloco el código tal cual y no se muestra la sombra. Tengo Firefox 4. Probé en Chrome y tampoco... Este es el blog http://pedrox-pruebas.blogspot.com/
Saludos
No sé donde lo has colocado.
Donde dice "NEON"... Exactamente igual al ejemplo de aquí. Y también en el menu debajo de eso. Pero nada.
¿Y dónde está el ejemplo para que lo vea?
show!lindosss!
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...