Tema: Como hacer este efecto en texto?
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 04/01/2011, 14:11
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 8 meses
Puntos: 539
Respuesta: Como hacer este efecto en texto?
Ese es el camino, Fsg, siga leyendo un poco más y experimentando, que así es como más se divierte uno y de paso se aprende.

Mire en chrome, ya que sólo apliqué el prefijo -webkit-
Es sólo un ejercicio lúdico, sin prestar atención a detalles:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6. <style type="text/css">
  7. * { margin:0; padding:0; position: relative;}
  8. html, body {
  9.   width: 100%;
  10.   height:100%;
  11.   font-size: 1em;
  12.   background: #444;
  13. }
  14. .contenedor {
  15. width: 500px;
  16. margin: 0 auto;
  17. background: #fe0;
  18. z-index: 5;
  19. -webkit-box-shadow: 0 0 10px #444;
  20. }
  21. p {
  22.     font-size: 1em;
  23.     position: relative;
  24.     color: red;;
  25. }
  26. h1 {
  27.   background: #fff;
  28.   font-size: 5em;
  29.   color: #green;
  30.   text-align: center;
  31.   text-shadow: 1px 1px 0 #000, -1px -1px 0 #222;
  32.   z-index: 2;
  33.   -webkit-transform: rotate(-10deg);
  34.   -webkit-transition-duration: 3s;
  35. }
  36.  
  37. h1:hover {
  38.   color: blue;
  39.   text-shadow: 0 0 10px #000;
  40.   background: red;
  41.   margin-top: 1em;
  42.   font-size: 10em;
  43.   z-index: 10;
  44.   -webkit-transform: rotate(360deg);
  45.   -webkit-transition-duration: 10s;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="contenedor">
  51. <p>Lorem ipsum dolor sit amet consectetuer tellus Vestibulum ut malesuada eros. Felis mus faucibus velit Maecenas id Phasellus sem Sed Aenean Curabitur. Maecenas tellus dui ac purus ut in sed quis Nulla Donec.</p>
  52. </div>
  53. <h1>Hola Mundo</h1>
  54. </body>
  55. </html>