Los pseudo-elementos (y pseudo-clases) son selectores CSS virtuales que no existen esplícitamente en el árbol de DOM. Pero aparte de esa característica, puede ser manipulado con propiedades CSS como cualquier otra, a excepción que agrega una nueva propiedad content la […]

Alcanzar y manipular pseudo-elementos CSS con JavaScript
9/jul/2015 0

Las pseudo-clases y los pseudo-elementos son tipos de selectores CSS que permiten alcanzar estados y elementos que no están en el DOM original. La lista de pseudo-clases es amplia, la de pseudo-elementos no ha crecido hasta la actual versión de […]

Sobre pseudo-clases y pseudo-elementos
2/jul/2015 2

La utilidad (y poca accesibilidad) de los menúes dropdown son conocidos e incuestionables. Pero existe un pequeño problema cuando el usuario navega sobre ellos, el cual se puede apreciar a continuación:

Hover Intent moderno en menues dropdown
7/may/2015 0

El siguiente es un mixin para LESS que creé que genera el efecto de bordes doblados dado un elemento HTML y con colores sólidos asociados.

Bordes Doblados Flat – LESS mixin
8/oct/2014 1

Un pequeño efecto que realicé para este nuevo diseño de CSSLab fue agregar borde a un caracter dentro de los blockquote, pero este efecto puede aplicarse a textos de cualquier tipo y con cualquier fuente, incluso si son @font-face. Entre […]

Textos con borde
17/sep/2014 4

No he escrito nada sobre la propiedad flexbox debido a su poco alcance en los browsers pero creo que ya es el momento. Se puede utilizar display: flex desde IE10+ (con prefijo -ms-) y Firefox / Chrome / Opera lo […]

Centrando texto verticalmente III: flexbox
13/ago/2014 6

Sucede que creamos lindos estilos para elemento con CSS3 y queremos aplicar la propiedad transform para darle profundidad 3D. Observamos que ocurre lo siguiente en Firefox:

3D CSS3 transform con bordes dentados en Firefox
16/may/2014 3

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

Calc() es una propiedad CSS3 que permite realizar operaciones matemáticas simples sustituyendo un valor fijo por una expresión dinámica de medida, por ejemplo, sumando o dividiendo anchos de un contenedor.

CSS3: calc()
18/nov/2013 1

Con HTML5 llegaron muchas nuevas etiquetas y atributos, y se nota que en la W3C se esforzaron en la captura de datos. Los formularios tuvieron muchas mejoras y en este artículo mostraré como manipular un útil atributo: placeholder. Placeholder permite […]

Dando estilos a placeholder
23/oct/2013 1

Es un acrónimo ya muy utilizado y, la mayoría de las veces, mal denominado. Conocemos lo que es, trabajamos con él a diario, pero hay mucha gente que aún no conoce el real significado y por ende, sus limitaciones y […]

¿Qué no es HTML5?
14/may/2013 5

Codear HTML/CSS es una tarea cada vez más requerida, y más exigente debido a lo rápido que avanza la tecnología web (gracias al aporte de muchos contribuidores anónimos, y al silent upgrade de los browsers entre otros factores). Por esto […]

Review: CSS Hat
6/may/2013 1

Nuevos conceptos pero no tan nuevas técnicas. La moda del diseño/desarrollo responsive hace necesaria una aclaración de algunas definiciones. Y qué mejor que hacerlo con un ejemplo utilizando las mismas técnicas descritas, para que puedan bucear por el código fuente.

Layout Responsive / Adaptativo / Flexible
4/feb/2013 4

Problema: a través de CSS, necesitaba entregar estilos al primer hijo de un elemento sin afectar la herencia (nietos y más allá); sólo necesito darle estilo al hijo directo de un selector. Además: debiera ser genérico, sin restringirse al tipo […]

Alcanzar el primer hijo de un selector pero no su descendencia
18/dic/2012 4

Me entretengo mucho inventando proyectos donde pueda aplicar CSS3 a destajo sin importarme un carajo las limitaciones de los browsers. Buscando una solución elegante para aplicar el mismo efecto reflejo que tan fácil es hacer en Photoshop, pero con CSS3, […]

Reflejo horizontal y vertical con CSS3
12/dic/2012 5

Situación: tenemos un menú con N elementos, los cuales se van activando (opacity: 1) a medida que el mouse pasa sobre cada uno, mientras el resto de los elementos permanecen inactivos (opacity: 0.5). Un efecto simple que se puede realizar […]

FadeIn/Out en menú con CSS
8/oct/2012 0

Tonteando con una idea que tuve de un bookmarklet (una analogía gráfica que contamina visualmente un sitio web de la misma manera en que estamos contaminados quienes vivimos en grandes ciudades), tuve una epifanía y pude resolverla. La idea es […]

Pointer-Events en CSS3
27/jul/2012 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

Contexto: día de semana laboral, cliente envía sus observaciones: Después de leer un poco, dí con la solución la que presento a continuación. Básicamente con CSS2 existió una propiedad que permitía que se definiera el modo de impresión a través […]

Impresión portarretrato con CSS3
29/may/2012 1

La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores […]

Aceleración por hardware con CSS3
17/may/2012 1

CSSLab

⤷ Etiqueta CSS3