Archivos de la categoría HTML y CSS

Animaciones con CSS3

Las animaciones realizadas con CSS3 lentamente se abren paso en remplazo de Javascript, cierto es que con ellas no podemos lograr animaciones demasiado complejas, ni tampoco podemos esperar que funcionen en navegadores obsoletos como Internet Explorer, incluso no estoy seguro de que funcionen correctamente en la versión 10, que pocos tienen a la hora de escribir esta publicación.

Para implementar una animación con CSS3 tenemos que usar las funciones CSS3 animation y @keyframes. La sintaxis de las mismas no tiene muchas complicaciones, en el caso de animation se trata de la llamada corta, pudiendo, usando las llamadas individuales, definir todos los parámetros de la animación por separado; personalmente prefiero ésta versión por que ocupa mucho menos código. Veamos un ejemplo súper sencillo, un CD que cuando le pasamos el mouse por arriba gira utilizando la función CSS3 transform : rotate.

cd

Sigue leyendo Animaciones con CSS3

Diez atributos CSS3 imprescindibles (Segunda parte 10/10)

6 – Media Queries

Las Media Queries nos permiten “ejecutar” cierto código CSS cuando se cumple una o más condiciones. Y por “ejecutar” me refiero a que el código contenido en esta Media Querie se superpondrá al resto de los valores ya definidos para los elementos que estemos modificando con la misma. Suena un poco confuso pero es bastante sencillo, especialmente si vemos el código:

1
2
3
4
5
6
7
8
9
10
11
.caja{
      width:200px;
      height:100px;
 }
 
 @media only screen and (max-width:768px) and (min-width:480px){
     .caja{
           width:100px;
           height:50px;
     }
 }
.caja{
      width:200px;
      height:100px;
 }

 @media only screen and (max-width:768px) and (min-width:480px){
     .caja{
           width:100px;
           height:50px;
     }
 }

Sigue leyendo Diez atributos CSS3 imprescindibles (Segunda parte 10/10)

Diez atributos CSS3 imprescindibles (Primera parte 5/10)

El CSS3 es la nueva versión del lenguaje de estilos para sitios web, aunque debería ser el estándar nos encontramos muchas veces con que debemos utilizar prefijos para hacer funcionar las ultimas adiciones al lenguaje. Hoy trigo diez atributos CSS que son de mucha utilidad al hacer un sitio web moderno.

1 – Border-radius:

El atributo border-radius nos permite añadir bordes redondeados a nuestra Div, así como a otros elementos HTML (ej: inputs). La sintaxis del atributo es la siguiente:

1
2
3
4
.caja{
     border:2px solid;
     border-radius:25px;
}
.caja{
     border:2px solid;
     border-radius:25px;
}

Donde el valor da la curvatura a todos los bordes, cuanto más grande el valor mayor es la curvatura. En el caso que queramos definir la curvatura de cada uno de los bordes lo podemos hacer de la siguiente manera:

Sigue leyendo Diez atributos CSS3 imprescindibles (Primera parte 5/10)

Tooltips con qTip2

Hay veces que necesitamos que cierto texto o imagen muestre un texto descriptivo cuando pasamos el mouse por encima, aunque esto puede ser realizado a “mano”, hay disponibles en la internet muchas herramientas poderosas y compatibles con múltiples navegadores como para ponerse a realizar la uno mismo, especialmente cuando es probable que nos lleve mucho más rato y no obtengamos mejores resultados.

Sigue leyendo Tooltips con qTip2

Responsive Web Design (básico)

El Responsive Web Design es una nueva tendencia en el diseño de páginas web, donde el sitio se adapta a la resolución del dispositivo del cliente. Lo que permite esta nueva forma de diseñar es la portabilidad del sitio a dispositivos moviles como celulares o tabletas, esencialmente se trata de hacer un diseño en HTML y CSS que se adapte a las diferentes resoluciones.

En realidad aunque pueda parecer difícil de lograr que una página se vea igual de bien en un monitor 15 pulgadas que en un celular de 4 pulgadas, esto es fácil de lograr cuando uno tiene la practica suficiente. El objetivo primordial es que el usuario no tenga que hacer scroll horizontalmente por lo que todo nuestro contenido (si así lo deseamos) tendrá que pasar a formar parte de una estructura vertical básicamente del ancho del dispositivo.

Sigue leyendo Responsive Web Design (básico)