Con CSS Grids a la vuelta de la esquina en cuanto a soporte cross-browser, podemos ya considerarlo para centrar horizontal y verticalmente. De todos los artículos escritos anteriormente esta es lejos la manera más simple y fácil de lograr centrar […]

Centrando verticalmente IV: CSS Grid
18/Dic/2017 674

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 4107

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 2205

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 1027

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 591

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 466

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 3839

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 351

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 269

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 358

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 176

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 258

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 211

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 544

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 1014

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 233

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 182

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 235

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 337

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 158

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 293

CSSLab

⤷ Etiqueta tecnicas