Foros del Web » Creando para Internet » CSS »

Como hacer este efecto en texto?

Estas en el tema de Como hacer este efecto en texto? en el foro de CSS en Foros del Web. Saludos. Hace tiempo habia visto unos efectos que con webkit en css, se podria hacer animaciones de transicion (de un color a otro en el ...
  #1 (permalink)  
Antiguo 03/01/2011, 00:31
Fsg
 
Fecha de Ingreso: junio-2009
Mensajes: 155
Antigüedad: 8 años, 6 meses
Puntos: 5
Pregunta Como hacer este efecto en texto?

Saludos.
Hace tiempo habia visto unos efectos que con webkit en css, se podria hacer animaciones de transicion (de un color a otro en el caso que presento duda), pero no recuerdo como hacerlo.
Para todos, les traigo esta pagina, muestra un efecto similar al que digo :

www.alkon.com.ar

El efecto es al pasar el mouse encima de la div de la noticia, cambia de color el borde y el titulo del post.

Recuerdo que en el tutorial en donde lo vi hace tiempo,se usaba tambien javascript, pero hace tiempo fue de eso, y no recuerdo la pagina.

¿Alguien sabe como se hace?.

Última edición por Fsg; 03/01/2011 a las 00:37
  #2 (permalink)  
Antiguo 03/01/2011, 02:28
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Mensaje Respuesta: Como hacer este efecto en texto?

No es necesario javascript, en principio bastaría con algo del tipo:

Código CSS:
Ver original
  1. .div-noticia:hover
  2. {
  3.     border-right: 3px solid blue;
  4. }
  5.  
  6. .divnoticia:hover .titulo-noticia
  7. {
  8.     color: blue;
  9. }
  10.  
  11. .divnoticia:hover .link-leer-noticia
  12. {
  13.     display: block;
  14.     /*position: ....; definir posicionamiento coordenadas X e Y de este enlace*/
  15. }

Un saludo
  #3 (permalink)  
Antiguo 03/01/2011, 12:12
Fsg
 
Fecha de Ingreso: junio-2009
Mensajes: 155
Antigüedad: 8 años, 6 meses
Puntos: 5
Respuesta: Como hacer este efecto en texto?

El efecto en css si lo se hacer, pero si te das cuenta y checas en la hoja de estilo, se utiliza unas propiedades con webkit, de tal manera, que cuando pases el mouse por el enlace, toma un tiempo en cambiar el color; es lo que me interesaria saber como se hace, el cambio de color pero a un tiempo determinado.
  #4 (permalink)  
Antiguo 04/01/2011, 01:53
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Respuesta: Como hacer este efecto en texto?

Bueno, yo eso se hacerlo con la librería JQuery de javascript, con la función animate, en la que puedes definir un tiempo de transición hacia un estilo.
  #5 (permalink)  
Antiguo 04/01/2011, 03:17
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Como hacer este efecto en texto?

Hola:

Posiblemente este ejemplo de Mikmoro te sea útil.

Saludos.

  #6 (permalink)  
Antiguo 04/01/2011, 06:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como hacer este efecto en texto?

Y dale con las librerías js en el foro de css, y eso que lo pone bien clarito.

Fsg:
"transition-duration" es la propiedad con valor en unidades de tiempo para hacer esos efectos demorados en el tiempo.
Con el prefijo privativo de cada navegador.
-webkit- para ese motor (chrome y safary)
-o- para ópera y -moz- para ff

Pero ff de momento no la implementa (ya veremos si en la ver 4)

un ejemplo:
Código CSS:
Ver original
  1. .elemento:hover {
  2. -webkit-transform: rotate(-15deg) translate(15px,-50px);
  3. -webkit-transition-duration: 1.5s;
  4. }
al recibir el hover el elemento rotará 15 grados y se trasladará la distancia indicada, y hacer esos efectos le tomará 1.5 segundos.
  #7 (permalink)  
Antiguo 04/01/2011, 12:36
Fsg
 
Fecha de Ingreso: junio-2009
Mensajes: 155
Antigüedad: 8 años, 6 meses
Puntos: 5
Respuesta: Como hacer este efecto en texto?

kseso? y con ese valor, -webkit-transform, ¿hay alguna manera de aplicarlo para cambio de color?

Busque y solo vi estas :
scale, scaleX, scaleY
translate, translateX, translateY –
matrix

Gracias por tu respuesta.
  #8 (permalink)  
Antiguo 04/01/2011, 13:20
Fsg
 
Fecha de Ingreso: junio-2009
Mensajes: 155
Antigüedad: 8 años, 6 meses
Puntos: 5
Respuesta: Como hacer este efecto en texto?

Cita:
Iniciado por PosProdukcion Ver Mensaje
Bueno, yo eso se hacerlo con la librería JQuery de javascript, con la función [URL="http://api.jquery.com/animate/"]animate[/URL], en la que puedes definir un tiempo de transición hacia un estilo.
Estuve leyendo , y al parecer el background-color no se puede animar,¿el color para fuentes si se puede?. Tambien queria saber, como hacerlo pero de modo "hover", sin necesidad de hacer clic en algo.
  #9 (permalink)  
Antiguo 04/01/2011, 14:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  4. <title>Kseso? Jugando con css</title>
  5. <style type="text/css">
  6. * { margin:0; padding:0; position: relative;}
  7. html, body {
  8.   width: 100%;
  9.   height:100%;
  10.   font-size: 1em;
  11.   background: #444;
  12. }
  13. .contenedor {
  14. width: 500px;
  15. margin: 0 auto;
  16. background: #fe0;
  17. z-index: 5;
  18. -webkit-box-shadow: 0 0 10px #444;
  19. }
  20. p {
  21.     font-size: 1em;
  22.     position: relative;
  23.     color: red;;
  24. }
  25. h1 {
  26.   background: #fff;
  27.   font-size: 5em;
  28.   color: #green;
  29.   text-align: center;
  30.   text-shadow: 1px 1px 0 #000, -1px -1px 0 #222;
  31.   z-index: 2;
  32.   -webkit-transform: rotate(-10deg);
  33.   -webkit-transition-duration: 3s;
  34. }
  35.  
  36. h1:hover {
  37.   color: blue;
  38.   text-shadow: 0 0 10px #000;
  39.   background: red;
  40.   margin-top: 1em;
  41.   font-size: 10em;
  42.   z-index: 10;
  43.   -webkit-transform: rotate(360deg);
  44.   -webkit-transition-duration: 10s;
  45. }
  46. </head>
  47. <div class="contenedor">
  48. <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>
  49. </div>
  50. <h1>Hola Mundo</h1>
  51. </body>
  52. </html>
  #10 (permalink)  
Antiguo 04/01/2011, 14:23
Fsg
 
Fecha de Ingreso: junio-2009
Mensajes: 155
Antigüedad: 8 años, 6 meses
Puntos: 5
Respuesta: Como hacer este efecto en texto?

Vaya que buen efecto, pense que habia que ponerle despues del webkit-transform algun valor para cambio de color.

La duda la has aclarado, muchas gracias, y disculpa , no me empeñe en leer mas que solo un sitio, ojala y que no te haya sacado canas verdes (desperado xD).

Saludos

Etiquetas: efecto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:45.