Reto: diseñador envió una interfaz donde un color diferente no sólo al placeholder, sino al background-color del mismo input como se ve a continuación:

Input vacío con CSS
5/jul/2017 0

Grillas CSS abundan y son múltiples sus utilidades (aunque se sigan usando de forma incorrecta y abusando de sus componentes asociados pero enfin, herrar es umano). Vinieron para quedarse por mucho más tiempo y nos han acostumbrado a los layout […]

Grilla CSS Responsive / Fluid + Fixed
1/jun/2016 2

Este útil mixin de SCSS me ha ayudado a mantener consistencia y legibilidad en el código de un proyecto donde estamos muchas personas trabajando de manera remota.

SCSS @media mixin
6/abr/2016 1

Estos días se anunció que Google Chrome incluye soporte para CSS Variables, lo que finalmente abre las puertas a que los nuevos features de CSS sean finalmente adquirido por los browsers. Pero una variable poco conocida y con buen soporte […]

La variable CSS currentColor
9/feb/2016 0

Esta es una de las pseudo-clases menos utilizadas pero con gran utilidad al momento de alcanzar selectores CSS que no comparten cierta regla. La pseudo-clase :not permite seleccionar todos los selectores excepto que satisfacen cierta condición. Esto es muy útil […]

La pseudo-class :not
22/dic/2015 3

Sólo un experimento utilizando emojis como nombre de clase CSS. No se atrevan a usarlo en producción. HTML: <p class=”🍻”>Emojis can be styled</p> CSS: .🍻 { font-size: 10vmin; text-align: center; color: green; } .🍻:before { content: “🍻”; } JS Bin […]

🍻 can be styled
10/jul/2015 0

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 4

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 5

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

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

Hace unos 4 proyectos atrás, me enfrenté al dilema de crear y recorrer un array de elementos -en este caso colores en hexacromía- y crear clases CSS dinámicamente a partir de cada uno de los colores contenidos en el arreglo. […]

Recorrer arreglos en pre-processors
5/nov/2014 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 2

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

Recuerdas las tablas? Sabes que aún son útiles? No como etiqueta HTML, sino la propiedad CSS display: table. Aquí presento una técnica sencilla y rápida que permite centrar verticalmente cualquier bloque de texto dado cierto elemento HTML con alto fijo.

Centrando texto verticalmente II
1/ago/2014 2

No hay cosa peor de que transfieras un diseño para web y que se vea mal en el computador de tu cliente que justo tiene una tipografía mala o una versión de sistema operativo que no te imaginabas aún existía. […]

Familias tipográficas web-safe
23/jul/2014 1

Una de las muchas ventajas de los CSS pre-processors es permitir utilizar JavaScript nativamente -bueno, el pre-processor mismo está escrito en JavaScript– y con ello extender su uso antes de procesar el archivo y transformarlo en nuestro querido .css. En […]

Aleatoriedad en LESS
10/jul/2014 1

Desde IE10 quer ya no existen los comentarios condicionales, ese útil invento de Microsoft para que nosotros desarrolladores front-end pudiéramos lidiar con los estilos específicos para IE5, 6, 7, 8…. y 9. Los quitaron porque creían que con IE10 todo […]

Estilos para IE9, IE10 e IE11
18/jun/2014 7

Crear formas geométricas con puro CSS y 1 elemento HTML ha sido una tarea creada hace años ya y que tiene recopilaciones varias de métodos y usos. Personalmente para crear triángulos con CSS uso un generador genial que espero nunca […]

Triángulos con CSS: LESS Mixin
10/jun/2014 2

CSSLab

⤷ Categoría CSS