Fragmentos de código 2025, Enero

Funciones de Px a Em - Trucos CSS

Funciones de Px a Em - Trucos CSS

Hemos hablado de "¿Por qué Ems?" Aquí antes. Para aquellos nuevos en los valores de em, The Mozilla Developer Network hace un excelente trabajo al explicar ems: ... an em is "

Funciones auxiliares de activos simples - Trucos CSS

Funciones auxiliares de activos simples - Trucos CSS

Tratar con caminos siempre es un poco molesto, lo reconocerás. Afortunadamente, es extremadamente fácil con Sass tener una API atractiva para administrar activos y "

Función de potencia - Trucos CSS

Función de potencia - Trucos CSS

Si bien es muy útil con la aritmética, Sass se queda un poco corto con las funciones de ayuda matemática. Ha habido un problema abierto en el repositorio oficial de "

Cosas Sass para Enlaces - Trucos CSS

Cosas Sass para Enlaces - Trucos CSS

A través de Alex King, puede usar variables para los selectores: $ a-tags: 'a, a: active, a: hover, a: viewed'; $ a-tags-hover: 'a: active, a: hover'; # ($ a-tags) (color: "

Función de dirección opuesta - Trucos CSS

Función de dirección opuesta - Trucos CSS

Sass framework Compass proporciona una función útil para obtener la dirección opuesta de una posición, por ejemplo, izquierda cuando se pasa a la derecha como argumento. Esta"

Propiedades de Mixin para prefijar - Trucos CSS

Propiedades de Mixin para prefijar - Trucos CSS

En caso de que esté interesado en manejar su propio prefijo de proveedor de CSS (en lugar de, digamos, Autoprefixer o Compass), aquí hay un mixin para ayudar con eso. Bastante"

Mixin para calificar a un selector - Trucos CSS

Mixin para calificar a un selector - Trucos CSS

No existe una forma sencilla de calificar un selector desde su conjunto de reglas asociado. Al calificar me refiero a anteponer un nombre de elemento (por ejemplo, a) a una clase "

Mantener la relación de aspecto Mixin - Trucos CSS

Mantener la relación de aspecto Mixin - Trucos CSS

Este artículo de julio de 2013 describe un método para usar elementos psuedo para mantener la relación de aspecto de los elementos, incluso cuando se escala. Aquí hay una mezcla de Sass que "

Material Shadows Mixin - Trucos CSS

Material Shadows Mixin - Trucos CSS

Material Design ha estado por todos lados últimamente. Una parte consiste en apilar capas unas sobre otras como hojas de papel reales. Conseguir"

Mixin para posicionamiento offset - Trucos CSS

Mixin para posicionamiento offset - Trucos CSS

Si hay una abreviatura CSS que falla dramáticamente, es la que permite definir la propiedad de posición, así como las cuatro propiedades de desplazamiento "

Mixin para gestionar los puntos de interrupción - Trucos CSS

Mixin para gestionar los puntos de interrupción - Trucos CSS

Las creaciones de diseño web receptivo a menudo existen en varios puntos de interrupción diferentes. Gestionar esos puntos de ruptura no siempre es fácil. Utilizándolos y actualizándolos "

Función de luminancia de color - Trucos CSS

Función de luminancia de color - Trucos CSS

Al profundizar en la teoría del color, existe algo llamado luminancia de color relativa. En pocas palabras, la luminancia de un color define si su "

Funciones de programación funcional - Trucos CSS

Funciones de programación funcional - Trucos CSS

Para los creadores de bibliotecas y constructores de frameworks, tener un par de funciones adicionales para aplicar funciones dinámicamente a elementos de una lista puede resultar útil. Aquí"

@extend Wrapper también conocido como Mixtend - Trucos CSS

@extend Wrapper también conocido como Mixtend - Trucos CSS

Al extender un selector con la directiva @extend, Sass no toma el contenido CSS del selector extendido para ponerlo en el extensor. Eso"

Fijar un número a N dígitos - Trucos CSS

Fijar un número a N dígitos - Trucos CSS

Cuando se trata de números en JavaScript o cualquier otro lenguaje de programación, existe una forma de truncar un número después de n dígitos. Desafortunadamente no hay"

Facilitar la función Obtener mapa - Trucos CSS

Facilitar la función Obtener mapa - Trucos CSS

Las curvas de Bézier se pueden usar para agregar hermosos efectos a las transiciones y animaciones CSS. Escribir la notación funcional completa (por ejemplo, cubic-bezier (0.550, "

Deep Get / Set en mapas - Trucos CSS

Deep Get / Set en mapas - Trucos CSS

Cuando se trabaja en arquitecturas Sass complejas, no es raro utilizar mapas Sass para mantener la configuración y las opciones. De vez en cuando, verá mapas "

Barras de desplazamiento personalizadas Mixin - Trucos CSS

Barras de desplazamiento personalizadas Mixin - Trucos CSS

Las barras de desplazamiento son uno de esos componentes de la interfaz de usuario que están presentes en casi todas las páginas de Internet, pero nosotros (los desarrolladores) tenemos poco o ningún control sobre ellas ".

CSS Triangle Mixin - Trucos CSS

CSS Triangle Mixin - Trucos CSS

Existe un truco de CSS bastante popular que usa bordes transparentes en un elemento de 0 de ancho / 0 de alto para imitar triángulos. Aquí hay un fragmento de CSS sobre Trucos de CSS "

Mixin de centrado - Trucos CSS

Mixin de centrado - Trucos CSS

Suponiendo que el elemento padre tiene posición: relativa;, estas cuatro propiedades centrarán un elemento hijo tanto horizontal como verticalmente en el interior, sin importar "

Sumar correctamente la unidad al número - Trucos CSS

Sumar correctamente la unidad al número - Trucos CSS

Cuando se convierte un número sin unidades a una longitud, duración, ángulo o lo que sea, la gente tiende a agregar la unidad como una cadena, así: $ valor: 42; "

Sujetar un número - Trucos CSS

Sujetar un número - Trucos CSS

En informática, usamos la palabra abrazadera como una forma de restringir un número entre otros dos números. Cuando se fija, un número mantendrá su propio valor "

Cubriendo Mixin - Trucos CSS

Cubriendo Mixin - Trucos CSS

Me encuentro usando estas propiedades juntas todo el tiempo, lo que suele ser una buena oportunidad para una abstracción como un mixin: @mixin coverer ("

BEM Mixins - Trucos CSS

BEM Mixins - Trucos CSS

La mejor introducción a BEM es de Harry Roberts: BEM, que significa bloque, elemento, modificador, es una metodología de nomenclatura de front-end ideada por los chicos de "

Almacenamiento en caché del selector de corriente (&) en Sass - Trucos CSS

Almacenamiento en caché del selector de corriente (&) en Sass - Trucos CSS

El carácter & en Sass es único porque representa el selector actual. Cambia a medida que anida. Supongamos que está anidado, pero desea acceder a un "

Funciones de opacidad en blanco y negro - Trucos CSS

Funciones de opacidad en blanco y negro - Trucos CSS

Es bastante común necesitar un poco de blanco o negro transparente. En CSS, puede hacer: .half-black (background: rgba (0, 0, 0, 0.5);) Se vuelve más fácil en "

Comprobación de tipo avanzada - Trucos CSS

Comprobación de tipo avanzada - Trucos CSS

Esta colección de funciones es para probar si el valor de una variable es de cierto tipo. Por ejemplo, ¿13rem es una longitud relativa? ¡CIERTO! Es "helada"

Números acolchados con cero - Trucos CSS

Números acolchados con cero - Trucos CSS

Function getZeroPaddedNumber ($ valor, $ padding) (return str_pad ($ valor, $ padding, "0", STR_PAD_LEFT);) Uso echo getZeroPaddedNumber (123, 4); // salidas "

Probador de rango de código postal simple - Trucos CSS

Probador de rango de código postal simple - Trucos CSS

Esta expresión regular a continuación prueba el código postal proporcionado si comienza con los números 096 y si hay exactamente 2 números después. Si lo hace, hace eco Sí, si "

Validación de URL - Trucos CSS

Validación de URL - Trucos CSS

$ url = 'http://example.com'; $ validación = filter_var ($ url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED); if ($ validación) $ salida = 'URL adecuada'; "