Duda webkit

Cotelandia · #1 (**permalink**) 03/03/2012, 05:43

Hola! Tengo una duda, estaba tratando de aplicarle un efecto a un texto y por alguna razón no funciona en Chrome

. Acá les dejo el codigo así pueden ayudarme ^^ .. Además de la solución si ven que estoy metiendo la pata en otra cosa haganmelo saber por favor, gracias

Capaz me llamen la atención por tener un article haciendo el trabajo de un nav

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="estilos/menu.css" />
	<link href='http://fonts.googleapis.com/css?family=Henny+Penny' rel='stylesheet' type='text/css'>
	<title>Cotelandia</title>

</head>
<body>

	<section>
		<article>
			<a href="#" id="sobreMi">Sobre mi</a>
			<a href="#" id="creaciones">Mis creaciones</a>
			<a href="#" id="contacto">Contactame</a>
		</article>
		<article>
			<img src="imagenes/bichos.png">
		</article>
	</section>

</body>
</html>

Código HTML:

a{
	text-decoration: none;
	color: #000;
}
li{
	list-style: none;
	display: inline-block;
}
body{
	font-size: 16px;
	width: 1024px;
	margin: 0 auto;
}
section{
	margin: 10em 0 0 0;
	text-align: center;
}
section article a{
	color: rgb(60, 60, 53);
	font-family: 'Henny Penny', cursive;
	font-size: 2.5em;
	padding: 0 1em;
}
#sobreMi, #creaciones, #contacto{
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

#sobreMi:hover, #contacto:hover{
	-webkit-transform: rotate(10deg) scale(1.5);
	-moz-transform: rotate(10deg) scale(1.5);
	-o-transform: rotate(10deg) scale(1.5);
	transform: rotate(10deg) scale(1.5);
}
#creaciones:hover{
	-webkit-transform: rotate(-10deg) scale(1.5);
	-moz-transform: rotate(-10deg) scale(1.5);
	-o-transform: rotate(-10deg) scale(1.5);
	transform: rotate(-10deg) scale(1.5);	
}

emprear · #2 (**permalink**) 03/03/2012, 08:03

En primer lugar, bienvenido/a a FDW @Cotelandia

Ese problema ya lo vi varias veces, conozco la solución, pero o he visto ninguna documentación que se refiera a el.

Al parecer, los transforms y transitions no funcionan en webkit a menos que trabaje sobre un elemento de tipo bloque, (ni siquiera si estuviese definido como inline-block), lo que debes hacer es

#sobreMi, #creaciones, #contacto{
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
display: block;
float: left;
}

En negrita los agregados
El display para darle block a tus <a> y el float para alinearlos horizontalmente. Probablemente requiera de algna corrección extra para centralo.

Saludos

Cotelandia · #3 (**permalink**) 04/03/2012, 20:48

Cita:

Iniciado por emprear

...

Gracias por la bienvenida ;) ! ahora quedo bien

Edit:

En vez de : display: block; float: left; use display:inline-block y va bien