Fragmentos de código 2025, Enero

Evitar el desplazamiento de rebote en Lion - Trucos CSS

Evitar el desplazamiento de rebote en Lion - Trucos CSS

Solo asegúrese de poner a cero el margen y el relleno en esos elementos también (normal en cualquier reinicio o normalización). html, cuerpo (altura: 100%; desbordamiento: "

Botones estilo Picross - Trucos CSS

Botones estilo Picross - Trucos CSS

Al igual que en el juego PICROSS3D. Botón de técnica CSS3 Botón Botón .btn (color: blanco; familia de fuentes: Helvetica, Arial, Sans-Serif; tamaño de fuente: "

Hacer entradas sin contraseña Use viñetas (o alternativas de viñetas) - Trucos CSS

Hacer entradas sin contraseña Use viñetas (o alternativas de viñetas) - Trucos CSS

Esto funciona con entradas de texto (por ejemplo, texto, correo electrónico, etc.) pero no puede cambiar las entradas de contraseña reales. Caso de uso = ???. input (-webkit-text-security: none;) "

Colores con nombre y equivalentes hexadecimales - Trucos CSS

Colores con nombre y equivalentes hexadecimales - Trucos CSS

Nombre del color HEX Color AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "

Carpetas anidadas y expandibles - Trucos CSS

Carpetas anidadas y expandibles - Trucos CSS

Esta fue una demostración originalmente de Martin Ivanov, que utilizaba casillas de verificación ocultas y combinadores hermanos adyacentes para establecer el "estado" de cada carpeta. La demostración en vivo "

Varias columnas - Trucos CSS

Varias columnas - Trucos CSS

Aquí hay un ejemplo de una clase simple de tres columnas: .three-col (-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : "

Sombras de curvatura de página - Trucos CSS

Sombras de curvatura de página - Trucos CSS

Ul.box (posición: relativa; índice z: 1; / * evitar que las sombras caigan detrás de los contenedores con fondos * / overflow: hidden; list-style: none; margin: 0; "

Bloqueo de orientación - Trucos CSS

Bloqueo de orientación - Trucos CSS

@media pantalla y (ancho mínimo: 320px) y (ancho máximo: 767px) y (orientación: paisaje) (html (transform: rotate (-90deg); transform-origin: left top; "

Cambio de tamaño de imagen no terrible en IE - Trucos CSS

Cambio de tamaño de imagen no terrible en IE - Trucos CSS

Img (-ms-interpolation-mode: bicubic;) Si reduce una imagen con atributos de ancho y / o alto, se verá terrible en IE a menos que use "

Aspecto de conjunto de campos sin formulario - Trucos CSS

Aspecto de conjunto de campos sin formulario - Trucos CSS

Esto no es un fieldset

¡Booyah!

.fieldset (posición: relativa; borde: 1px sólido "

Fronteras múltiples - Trucos CSS

Fronteras múltiples - Trucos CSS

Usando pseudoelemento (s) Puede colocar un pseudo elemento de manera que esté detrás del elemento y sea más grande, creando un efecto de borde con el suyo "

Sintaxis de animación de fotogramas clave - Trucos CSS

Sintaxis de animación de fotogramas clave - Trucos CSS

Declaración básica y uso @ -webkit-keyframes NAME-YOUR-ANIMATION (0% (opacity: 0;) 100% (opacity: 1;)) @ -moz-keyframes NAME-YOUR-ANIMATION (0% ("

Momentum Scrolling en iOS Overflow Elements - Trucos CSS

Momentum Scrolling en iOS Overflow Elements - Trucos CSS

Las páginas web en iOS tienen de forma predeterminada un desplazamiento de estilo "momentum" en el que un movimiento rápido del dedo envía el desplazamiento de la página web y continúa hasta que finalmente "

Sintaxis de varios fondos - Trucos CSS

Sintaxis de varios fondos - Trucos CSS

Los navegadores que admiten múltiples fondos (WebKit desde los primeros días, Firefox 3+) usan una sintaxis como esta: #box (background: url (icon.png.webp) top left "

Meyer Reset - Trucos CSS

Meyer Reset - Trucos CSS

Html, cuerpo, div, intervalo, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, grande, citar, código, del, dfn, em, fuente, "

Hacer un ajuste de texto "Pre" - Trucos CSS

Hacer un ajuste de texto "Pre" - Trucos CSS

El texto de las etiquetas

 no se ajusta de forma predeterminada. Por ejemplo, consulte el fragmento de código a continuación. Si esto causa problemas de diseño, una solución es dar el "

Monotone una imagen con CSS - Trucos CSS

Monotone una imagen con CSS - Trucos CSS

Siempre puede aplicar un filtro a un elemento para que sea monótono en el sentido de la escala de grises: vea el lápiz monótono en una imagen de Chris Coyier (@chriscoyier) "

Papel en capas - Trucos CSS

Papel en capas - Trucos CSS

Hola .layered-paper (fondo: #eee; box-shadow: 0 1px 1px rgba (0,0,0,0.15), / * La sombra de la capa superior * / 0 10px 0 -5px #eee, / * La segunda capa * / 0 "

Mixins para tamaño de fuente Rem - Trucos CSS

Mixins para tamaño de fuente Rem - Trucos CSS

La unidad de tamaño de fuente rem es similar a em, solo que en lugar de en cascada siempre es relativa al elemento raíz (html) (más información). Esto tiene bastante "

Link Pseudo-Classes (en orden) - Trucos CSS

Link Pseudo-Classes (en orden) - Trucos CSS

A: enlace (color: azul;) a: visitado (color: violeta;) a: hover (color: rojo;) a: activo (color: amarillo;) Enlace, visitado, hover, activo L, V, H, A AMOR, ODIO "

Ocultar barra de desplazamiento en Edge, IE 10/11 - Trucos CSS

Ocultar barra de desplazamiento en Edge, IE 10/11 - Trucos CSS

Puede hacer que se oculte automáticamente en lugar de que se muestre siempre: html (-ms-overflow-style: -ms-autohiding-scrollbar;) Resulta así: Crédito a Thierry "

Tipografía fluida - Trucos CSS

Tipografía fluida - Trucos CSS

Yendo directo al código, aquí hay una implementación de trabajo: html (font-size: 16px;) @media screen y (min-width: 320px) (html (font-size: calc (16px + "

Manejo de palabras largas y URL (forzar saltos, guiones, puntos suspensivos, etc.) - Trucos CSS

Manejo de palabras largas y URL (forzar saltos, guiones, puntos suspensivos, etc.) - Trucos CSS

Hemos trasladado este fragmento a nuestro fragmento canónico sobre este tema. Consulte: Manejo de URL y palabras largas "

CSS específico para iPad - Trucos CSS

CSS específico para iPad - Trucos CSS

@media solo pantalla y (device-width: 768px) (/ * Para diseños generales de iPad * /) @media solo pantalla y (min-device-width: 481px) y (max-device-width: "

CSS del lenguaje de internacionalización - Trucos CSS

CSS del lenguaje de internacionalización - Trucos CSS

* Específico del idioma * /: lang (af) (comillas: '201E' '201D' '201A' '2020-2021';): lang (ak) (familia de fuentes: Lucida, "DejaVu Sans", heredar; ): lang (ar) (familia de fuentes: Tahoma "

Hexágono con sombra - Trucos CSS

Hexágono con sombra - Trucos CSS

.hexágono (ancho: 100 px; alto: 55 px; posición: relativa;) .hexágono, .hexágono: antes, .hexágono: después (fondo: rojo; caja-sombra: 0 0 10 px "

Texto degradado - Trucos CSS

Texto degradado - Trucos CSS

Esto es solo WebKit, pero es la forma más limpia de lograrlo, ya que el texto sigue siendo texto web editable y seleccionable. h1 (tamaño de fuente: 72px; fondo: "

Subrayado degradado - Trucos CSS

Subrayado degradado - Trucos CSS

A (posición: relativa; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absoluta; bottom: 2px; left: 0; height: 1px; "

Aspectos destacados de la entrada azul brillante - Trucos CSS

Aspectos destacados de la entrada azul brillante - Trucos CSS

Como Twitter a mediados de 2012. input, textarea (-webkit-transition: todos los 0.30s de entrada y salida; -moz-transición: todos los 0.30s de fácil entrada y salida; -ms-transición: todos los 0.30s "