Web 2.0 Tips

Icon

Consejos y trucos para el desarrollo y diseño de webs

Framework de CSS Talk to the Code

Hoy voy a dejarles un framework que venimos utilizando hace mucho, en proyectos de DreamDesigners.

Lo hemos bautizado “talk to the code” la idea es literalmente hablarle al código html mediante CSS.

Tiene propiedades básicas de CSS2 y CSS3.

Leer este tip »


Animación en CSS3 en un :hover (mouseover)

Les voy a dejar un buen tip que lo usamos en DreamDesigners, para varios proyectos.

Como animar un div mediante una acción con el mouse (mouse over) que en la sintaxis de css sería :hover

La idea será realizar un tooltip hecho 100% con las transiciones de CSS3 sin necesidad de utilizar Javascript o JQuery.

Antes que nada, tenemos que saber que los nuevos browsers ya soportan css3, aunque muchos todavía no de forma nativa, por lo tanto debemos utilizar a la hora de “animar” ciertos prefijos en el código del style.

Leer este tip »


No mas abuso de floats!

Estás cansado de ver algo parecido a esto en CSS?

* { float:left; }

Si bien es un poco exagerado, la realidad es que no hay forma de maquetar una web aplicando el método “tableless” y sin hacer uso de floats. A mi no me parece lógico que para ubicar 2 bloques en forma horizontal halla que flotarlos a la izquierda o a la derecha. Y si los quiero en el medio? Por qué no hay un “float:center”?

Leer este tip »


CSS3 Gradient Divs

Como hacer divs en Degrade con CSS3.

Bueno, este es un ejemplo muy sencillo y muy útil.  100% para CSS3.

Imaginen que queremos hacer un fondo en Degrade y ademas. pretendan que todos los browsers lo interpreten… bueno, para eso vamos a tener que esperar un poquito, pero aca les dejo una manera muy sencilla de lograr un degrade sin necesidad de utilizar imagenes. Este código fue pensado para Webkit y para Mozilla. Proximamente será un standard.

Leer este tip »


Variables en CSS3

Como sabrán, hace un tiempo los mejores browsers (firefox, safari…etc) todos menos IE8 (que tampoco forma parte de los mejores browsers) ya dan soporte a css3, lo cual significa que aunque un 70% use explorer, ya se pueden empezar a hacer pruebas con css3, que realmente nos van a simplificar la vida a la hora de maquetar, o codear xhtml + css.

En esta oportunidad, voy a hablar de declarar las variables en css3.

Leer este tip »


Categoria

Haste fan

Web Analytics