JMiur [E]

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>

REFERENCIAS:line25.com

8 comentarios:

LNR  

COPADAZO!

Responder
Unknown  

Me encantan los efectos, por ahí no me importa como se vea en IE, es muy difícil compatibilizar.

Responder
JMiur  

Las sombras, diría que es imposible; en IE se ven muy rígidas.

Responder
PedroX  

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

Responder
JMiur  

No sé donde lo has colocado.

Responder
PedroX  

Donde dice "NEON"... Exactamente igual al ejemplo de aquí. Y también en el menu debajo de eso. Pero nada.

Responder
JMiur  

¿Y dónde está el ejemplo para que lo vea?

Responder
Allan Fixnet Uster  

show!lindosss!

Responder

¿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 ...

 
CERRAR