Como hacer este efecto en texto?

Fsg · #1 (**permalink**) 03/01/2011, 00:31

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

PosProdukcion · #2 (**permalink**) 03/01/2011, 02:28

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

Código CSS:

Ver original.div-noticia:hover
{
    border-right: 3px solid blue;
}
 
.divnoticia:hover .titulo-noticia
{
    color: blue;
}
 
.divnoticia:hover .link-leer-noticia
{
    display: block;
    /*position: ....; definir posicionamiento coordenadas X e Y de este enlace*/
}

Un saludo

Fsg · #3 (**permalink**) 03/01/2011, 12:12

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.

PosProdukcion · #4 (**permalink**) 04/01/2011, 01:53

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.

jomaruro · #5 (**permalink**) 04/01/2011, 03:17

Hola:

Posiblemente este ejemplo de Mikmoro te sea útil.

Saludos.

kseso? · #6 (**permalink**) 04/01/2011, 06:57

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.elemento:hover {
-webkit-transform: rotate(-15deg) translate(15px,-50px);
-webkit-transition-duration: 1.5s;
}

al recibir el hover el elemento rotará 15 grados y se trasladará la distancia indicada, y hacer esos efectos le tomará 1.5 segundos.

Fsg · #7 (**permalink**) 04/01/2011, 12:36

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.

Fsg · #8 (**permalink**) 04/01/2011, 13:20

Cita:

Iniciado por PosProdukcion

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.

kseso? · #9 (**permalink**) 04/01/2011, 14:11

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
<style type="text/css">
* { margin:0; padding:0; position: relative;}
html, body {
  width: 100%;
  height:100%;
  font-size: 1em;
  background: #444;
}
.contenedor {
width: 500px;
margin: 0 auto;
background: #fe0;
z-index: 5;
-webkit-box-shadow: 0 0 10px #444;
}
p {
    font-size: 1em;
    position: relative;
    color: red;;
}
h1 {
  background: #fff;
  font-size: 5em;
  color: #green;
  text-align: center;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #222;
  z-index: 2;
  -webkit-transform: rotate(-10deg);
  -webkit-transition-duration: 3s;
}
 
h1:hover {
  color: blue;
  text-shadow: 0 0 10px #000;
  background: red;
  margin-top: 1em;
  font-size: 10em;
  z-index: 10;
  -webkit-transform: rotate(360deg);
  -webkit-transition-duration: 10s;
}
</style>
</head>
<body>
<div class="contenedor">
<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>
</div>
<h1>Hola Mundo</h1>
</body>
</html>

Fsg · #10 (**permalink**) 04/01/2011, 14:23

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