Fragmentos de código 2025, Enero

Aspecto "cosido" - Trucos CSS

Aspecto "cosido" - Trucos CSS

.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px discontinuas "

Técnica de anulación de estilo - Trucos CSS

Técnica de anulación de estilo - Trucos CSS

P (tamaño de fuente: 24px! important;) La regla! important al final de un valor anulará cualquier otra declaración de estilo de ese atributo, incluido en línea "

Enlaces de estilo según el destino - Trucos CSS

Enlaces de estilo según el destino - Trucos CSS

A (/ * URL completamente válida, posible enlace externo * /) a (/ * enlace a un sitio web específico * /) a, a (/ * enlace relativo interno * /) a (/ * enlace de correo electrónico * /) a (/ * "

Efecto de papel apilado - Trucos CSS

Efecto de papel apilado - Trucos CSS

Una técnica de diseño popular es crear un contenedor de contenido que parezca una hoja de papel y apilar otras hojas de papel debajo, agregando una capa "

Menú Spinny Leaf - Trucos CSS

Menú Spinny Leaf - Trucos CSS

Inicio Catálogo Precio Acerca de Contacto nav (ancho: 960px; alto: 100px; margen: 120px automático; alineación de texto: centro;) .top-menu li (display: inline-block; "

Tema solarizado para CodeMirror y Prettify - Trucos CSS

Tema solarizado para CodeMirror y Prettify - Trucos CSS

Aquí está para Google Code Prettify (que se encuentra en esta fuente). .prettyprint (color: # 839496; color de fondo: # 002b36;) .prettyprint .pln (color: heredar;) "

Reemplazo de imagen CSS estándar - Trucos CSS

Reemplazo de imagen CSS estándar - Trucos CSS

H1 # logo (width: 200px; // width of image height: 100px; // height of image background: url (../ path / to / image.jpg.webp); text-indent: -9999px;) Esta técnica "

Estilo Blockquote simple y agradable - Trucos CSS

Estilo Blockquote simple y agradable - Trucos CSS

La cita en bloque se muestra en los navegadores que cumplen con los estándares con el efecto "comillas grandes antes" y en IE con un borde izquierdo grueso y un gris claro "

Smiley Slider - Trucos CSS

Smiley Slider - Trucos CSS

Requiere jQuery y jQuery UI para el control deslizante real. La cara está hecha de elementos hechos en círculos con radio de borde. La boca, que indica felicidad "

Deslice los cuadros de imagen - Trucos CSS

Deslice los cuadros de imagen - Trucos CSS

Desde el pie de página del diseño v8 de CSS-Tricks. Ver el pie de página de demostración (clear: both; overflow: hidden; font-size: 16px; line-height: 1.3;) # footer-boxes ("

Eliminar barra de desplazamiento de Textarea en IE - Trucos CSS

Eliminar barra de desplazamiento de Textarea en IE - Trucos CSS

Por defecto, todas las versiones de IE tienen una barra de desplazamiento en las áreas de texto, incluso cuando están vacías. Ningún otro navegador hace esto, así que si quieres eliminarlo, IE puede "

Significa "bombas PDF" - Trucos CSS

Significa "bombas PDF" - Trucos CSS

Cualquier enlace de anclaje puede ser un enlace a un documento PDF, pero hacer clic en un enlace como ese pensando lo contrario puede ser sorprendente e incómodo para un usuario. Esta"

Animación de fotogramas clave CSS "Agitar" - Trucos CSS

Animación de fotogramas clave CSS "Agitar" - Trucos CSS

Esto supone el uso de un prefijo automático. .face: hover (animación: shake 0.82s cubic-bezier (.36, .07, .19, .97) ambos; transform: translate3d (0, 0, 0); "

Esquinas redondeadas - Trucos CSS

Esquinas redondeadas - Trucos CSS

Estándar: -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; / * prueba de futuro * / -khtml-border-radius: 10px; / * para viejos "

Escalar al pasar el mouse con transición - Trucos CSS

Escalar al pasar el mouse con transición - Trucos CSS

¡Traiga sus propios prefijos! .grow (transición: todos los .2s entrada-salida fácil;) .grow: hover (transform: scale (1.1);) "

Cinta - Trucos CSS

Cinta - Trucos CSS

Todo el mundo ama las cintas

.ribbon (font-size: 16px! important; / * Esta cinta "

Consulta de medios de pantalla Retina - Trucos CSS

Consulta de medios de pantalla Retina - Trucos CSS

Para incluir gráficos de alta resolución, pero solo para pantallas que pueden hacer uso de ellos. "Retina" es "2x": @media (-webkit-min-device-pixel-ratio: 2), "

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

Hay ocasiones en las que una cadena de texto muy larga puede desbordar el contenedor de un diseño. Por ejemplo: las URL no suelen tener espacios, por lo que "

Inversión de texto - Trucos CSS

Inversión de texto - Trucos CSS

Para los idiomas de derecha a izquierda, puede cambiar el diseño predeterminado de izquierda a derecha en la mayoría de los navegadores simplemente a través del atributo dir. texto de derecha a izquierda "

Eliminación de contorno punteado - Trucos CSS

Eliminación de contorno punteado - Trucos CSS

A (esquema: 0;) Tenga cuidado al eliminar los estilos de esquema de los enlaces, ya que son una característica de usabilidad. Si es así, asegúrese de definir estilos de enfoque claros. Si"

Eliminar márgenes para el primer / último elemento - Trucos CSS

Eliminar márgenes para el primer / último elemento - Trucos CSS

En ocasiones, puede ser conveniente eliminar el margen superior o izquierdo del primer elemento de un contenedor. Asimismo, el margen derecho o inferior del último "

Consultas de medios para dispositivos estándar - Trucos CSS

Consultas de medios para dispositivos estándar - Trucos CSS

Esta página enumera una tonelada de diferentes dispositivos y consultas de medios que apuntarían específicamente a ese dispositivo. Probablemente no sea una buena práctica, pero es útil saber cuáles son las dimensiones de todos estos dispositivos en un contexto CSS ".

Eliminar el resaltado gris al tocar enlaces en Mobile Safari - Trucos CSS

Eliminar el resaltado gris al tocar enlaces en Mobile Safari - Trucos CSS

Webkit-tap-highlight-color: rgba (0,0,0,0); Y luego permitir que: los estilos activos funcionen en su CSS en una página en Mobile Safari: "

Eliminar bordes de enlaces con puntos - Trucos CSS

Eliminar bordes de enlaces con puntos - Trucos CSS

Los bordes punteados alrededor de los enlaces son una característica de accesibilidad que la mayoría de los navegadores tienen de forma predeterminada. Es para usuarios que deben o eligen navegar por teclado, allí "

Eliminar el texto del botón en IE7 - Trucos CSS

Eliminar el texto del botón en IE7 - Trucos CSS

HTML: .. o .. Ir a CSS: input.button (text-indent: -9000px; text-transform: capitalize;) La sangría negativa por sí sola desafortunadamente no funciona para eliminar texto "

Abreviaturas de calidad - Trucos CSS

Abreviaturas de calidad - Trucos CSS

Color un poco más claro (asumiendo que el texto es negro), borde inferior punteado y un cursor de interrogación. Esto se ha convertido en un enfoque algo estandarizado ".

PNG Hack / Fix para IE 6 - Trucos CSS

PNG Hack / Fix para IE 6 - Trucos CSS

Para imágenes de fondo CSS .yourselector (ancho: 200 px; alto: 100 px; fondo: url (/carpeta/yourimagen.png.webp) no repetir; _background: ninguno; "

Botón de puertas correderas / Sprite CSS perfecto - Trucos CSS

Botón de puertas correderas / Sprite CSS perfecto - Trucos CSS

¡Gran nota aquí! Las puertas corredizas son una técnica bastante antigua. Tuvo su tiempo en la web, pero probablemente no sea la forma más inteligente de hacerlo en estos días. Tenemos"

Evitar que los superíndices y subíndices afecten la altura de la línea - Trucos CSS

Evitar que los superíndices y subíndices afecten la altura de la línea - Trucos CSS

Sup, sub (alineación vertical: línea de base; posición: relativa; arriba: -0.4em;) sub (arriba: 0.4em;) "

Imprimir URL después de los enlaces - Trucos CSS

Imprimir URL después de los enlaces - Trucos CSS

@media print (a :: after (content: "(" attr (href) ")";)) "