[+/-] CSS3: Propiedad Transition, crea animaciones solo con CSS

Para nosotros los creadores de la magia en internet, los que hacemos posible que los internautas pasen un buen (o mal) rato navegando por internet, para nosotros que siempre estamos tratando de llevar lo mejor a nuestros amigos lectores, hay una buena noticia. Gracias a los ultimos desarrollos del lenguaje CSS podremos ofrecer una mejor experiencia en nuestros sitios con el menor esfuerzo.

Esta es una de esas propiedades que cambian por completo la forma de renderizar las páginas web para un navegador web, o al menos para los que estamos acostumbrados al oscuro CSS2. Y es que Mediante esta propiedad de CSS3 podemos crear cualquier tipo de animación en nuestro sitio web. Ya sea girar, aumentar de tamaño, cambiar color de fondo, color de letra o el color de sombra a cualquier elemento de nuestros sitios web, veamos de que hablo:

CSS funny!

Aunque se vea un poco lento y feo, se ve interesante no? la mejor parte de esto es que podremos hacer que este tipo de cosas funcionen sin tocar una sola línea de código de programación y lo haremos de una manera tan sencilla que en menos de lo que piensas lo estarás aplicando a tu sitio.

Leer la entrada completa

[+/-] CSS3: Cambiar color de fondo dinámicamente

Ahora seguimos creando estas animaciones con CSS3 puro. En la categoría de CSS3 puedes ver todas las nuevas propiedades que tiene la tercera versión del CSS. Esta vez veremos como cambiar el color de fondo de cualquier elemento de nuestra página web. Aqui el ejemplo:

Texto de ejemplo

Muy pocos sitios web utilizaban este tipo de efectos con Javascript, debido a la dificultad del Javascript para crear este tipo de efectos. Por lo que con la facilidad para aplicarlo con CSS se espera que se difunda por muchos sitios web.

Leer la entrada completa

[+/-] CSS3: Agrandar imágenes ó texto al pasar el mouse

En esta ocasión explicaré como crear un elegante efecto con CSS3 para las imágenes, texto o cualquier parte de tu sitio web o blog. Se trata de hacer que cuando el mouse de nuestras visitas pasen por encima de alguna imagen o texto, se agrande animadamente, un ejemplo lo explica mejor:

Este mismo efecto es el que puedes ver en la cabecera de Santyweb y se ve bastante bien, tanto que, podría incluso cambiar las imágenes del ejemplo con algunas otras que vayan mejor con la temática del blog y nos creamos un menú, bastante sencillo de maquetar. Y lo mejor, no utiliza nada de pesados códigos Javascript!

Leer la entrada completa

[+/-] CSS3: Anima todos los enlaces en tu Blog

Los enlaces en una página web no siempre son bonitos, claro que se puede cambiar esto con un que otro efecto con pesados algoritmos Javsacript. Pero sin duda CSS3 es la manera mas rápida y facil de lograr crear un efecto con los enlaces en nuestro blog, mira un ejemplo:

Un enlace

Se ve bastante bien, solo necesitamos de CSS3 y lo mejor de todo es que Firefox, Chrome y Opera soportan esta propiedad. Si te interesa el efecto, manos a la obra!

Leer la entrada completa

[+/-] CSS3: Rotar/Girar elementos al pasar mouse o raton

Alguna vez en toda tu vida de webmaster o diseñador web, ¿te imaginaste que algún día podrías utilizar CSS para crear una animación?. Yo tampoco(si la respuesta fue no xD) pero ahora es posible, gracias a CSS3 y a sus nuevas características podemos fácilmente prescindir de flash u otras tecnologías.

El CSS desde la llegada de su tercera versión, ha dejado de ser unas simples reglas para modificar la apariencia de elementos web, a ser un complejo lenguaje de diseño y animación web y aquí en santyweb nos estamos volviendo locos con estas nuevas funcionalidades que estan por aparecer masivamente en la web 3.0

Bien, basta de preambulos.

El efecto es el siguiente:

Leer la entrada completa