[+/-] CSS3: Media Queries, tu sitio web dinamico

Después de mucho tiempo lejos de mi estimado blog, estoy de regreso con algunas propuestas nuevas, poco a poco estaré haciendo algunos cambios. Claro que después de haberlas probado extensamente en mi blog de pruebas. Pero por ahora aquí les dejo algunas opciones que se pueden utilizar en cuanto a la maquetación en nuestro sitio web, en esta ocasión hablaremos de la regla @media, que podemos utilizar para que nuestro sitio web se muestre de manera diferente adaptándose al tamaño de la pantalla de nuestros lectores o visitantes.

Puedes ver un claro ejemplo de esto al hacer mas pequeña la ventana del navegador y automáticamente SantyWeb se adapta al tamaño de la ventana, no importando si el lector tiene una tablet o una computadora completa también es independientemente del dispositivo.

Perfecto, comencemos a comprender como es que esto se puede aplicar a nuestros blogs!..

Leer la entrada completa

[+/-] Background o Fondo de página aleatorio

Que pasa cuando diseñamos varios fondos para nuestro sitio y no nos decidimos por cual colocar, para esas situaciones tenemos dos opciones: escoger una imagen de fondo y resignarnos o podemos utilizar un sistema que coloque varios fondos de manera aleatoria.

El concepto consiste en que cada vez que alguien ingrese en nuestra página web le aparezca una imagen de fondo diferente. Imágen que es escogida al azar, para ver algo similar puedes hacer clic en el siguiente botón:

Leer la entrada completa

[+/-] 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