Cualquier sistema de votación (star-rating system) requiere de los 3 componentes básicos de todo sitio web: HTML, CSS y JavaScript. Pero a medida que la tecnología avanza, es posible dejar la ayuda que JavaScript brindó por mucho tiempo mientras CSS […]

Star-Rating sólo con CSS
17/jun/2015 3

Estamos en pleno año 2015, la humanidad está trabajando para llevar humanos a Marte y todavía no podemos dar estilos CSS crossbrowsing a las etiquetas <select> Y para qué mencionar los <input type=”checkbox”> y <input type=”radio”>…

selects con estilo
24/mar/2015 5

Hace no más de 2 años que la tendencia de los usuarios de internet han visto cómo han crecido de manera indirecta las siguientes afirmaciones:

Conoce cómo funciona el browser y optimiza tu código frontend
26/nov/2014 12

Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con animaciones CSS3. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo tanto, la ejecutaremos sólo 1 […]

Animaciones CSS3 al fin del ciclo
26/mar/2014 0

Los formularios son una de las razones de porque el mundo corporativo entró a Internet: captura de datos de usuarios. Es la forma más fácil y rápida de obtener ese ansiado contacto, con el cual puedo convertir a ese usuario […]

Checkboxes con estilo
17/mar/2014 1

Con CSS3 el soporte a múltiple background nos permite ser mucho más creativos al momento de solucionar problemas de estilos, cuando antes sólo dependíamos de crear y anidar etiquetas y cortar esos gif’s y png’s que tanto nos han atormentado. […]

Backgrounds múltiples en CSS3 y un truco gradual
27/jun/2012 6

Entramos en una era donde cada vez más podemos aprovechar las bondades de CSS3 sin tener que parchar funcionalidad con scripts y plugins de JavaScript. En esta ocasión, utilizaremos una propiedad CSS3 para hacer que una imagen de fondo cubra […]

Tip Precoz: Background al 100% con CSS3
29/mar/2012 7

Este será un artículo corto y preciso: cómo alternar estilos dentro de un mismo elemento utilizando 3 técnicas diferentes. Con el siguiente HTML de ejemplo:

Estilos alternados con CSS3, jQuery y Mootools
13/feb/2012 4

Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos […]

Construir para Retina Display
15/dic/2011 1

Este tip es bastante específico para usuarios del browser Safari; desde su versión 2, Apple incorporó un ‘envoltorio’ que reemplaza los <input /> que tengan como atributo type="search", cambiando el campo de <input /> normal que conocemos, cuadrado con una […]

Tip Precoz 4: input type=”search”
6/mar/2009 3

Como debes saber, existe más de una manera de declarar colores en CSS: Nombres (websafe): por 17 colores en inglés : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white y yellow (actualmente los browsers modernos soportan muchos más). Sistema (no lo recomiendo): por colores del sistema operativo que […]

Tip Precoz 3: RGBa
26/feb/2009 9

Ya es lunes, llego a revisar mis 600 RSS‘s que me esperan acumulados por el fin de semana y me quedo con un artículo que me llama la atención. Lo leo, lo analizo, lo pongo en práctica y ¡Zaz! Un […]

Floatfix: un nuevo clearfix
1/dic/2008 9

Con redimensionado proporcional, me refiero a que una imagen cualquiera, se redimensione dependiendo de la proporción de la resolución del monitor, sin que se deforme o pierda calidad en el proceso. La idea es que se haga al mismo tiempo […]

Redimensionado Proporcional
25/ago/2008 17

Muchas han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras […]

clearfix ultimate
9/jun/2008 15

Luego del anterior artículo develando cómo se realiza el efecto Parallax con CSS, surgieron dudas de su real aplicación en proyectos web. Así como se presentó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se […]

Parallax en uso real
29/may/2008 23

El efecto Parallax es una técnica que consiste en aplicar el efecto de profundidad a través de capas, utlizando principalmente CSS. Con esto podemos simular un pseudo-3D dentro de un escenario. Esta técnica es prácticamente la misma utilizada en los […]

Reproduciendo Parallax
26/may/2008 11

Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama de tipografías disponibles a la que podames aspirar que posean todos los usuarios. Hablamos de Arial, Helvetica, Verdana y Tahoma para […]

Más tipografías con sIFR
8/may/2008 17

Una vez más vengo con una técnica que de tan simple dan ganas de llorar por no habérsenos ocurrido antes. Lo que mostraré ahora, es cómo lograr centrar verticalmente un texto a través de su contenedor. Esta es la clave, […]

Centrando texto verticalmente
19/mar/2008 11

Uno de los temas más complicados a la hora de estructurar y diagramar un sitio, es cuando existen formularios. Creo que es el más difícil, ya que a pesar de tener un buen CSS reseter a mano que te ayude […]

Esas botoneras: centrándolas
11/mar/2008 8

Para todos es conocido el modelo de caja y cómo la propiedad border juega un papel importante en ello. Para los que no, un brevísimo resumen: cualquier borde que definas a través de CSS, te es sumado al ancho y […]

Borde interno con CSS
26/dic/2007 8

Para quien no los conoce, los drop caps son recursos gráficos utilizados desde hace siglos, a modo de adornos de letras iniciales de los bloques de texto. Esta letra inicial es la primera de un trabajo, capítulo o parágrafo, la […]

Modernizando los drop caps
29/nov/2007 8

CSSLab

⤷ Etiqueta tecnicas