Fragmentos de código 2025, Enero
.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px discontinuas "
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 "
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 (/ * "
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 "
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; "
Aquí está para Google Code Prettify (que se encuentra en esta fuente). .prettyprint (color: # 839496; color de fondo: # 002b36;) .prettyprint .pln (color: heredar;) "
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 "
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 "
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 "
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 ("
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 "
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"
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); "
Estándar: -moz-border-radius: 10px; -webkit-border-radius: 10px; radio del borde: 10px; / * prueba de futuro * / -khtml-border-radius: 10px; / * para viejos "
¡Traiga sus propios prefijos! .grow (transición: todos los .2s entrada-salida fácil;) .grow: hover (transform: scale (1.1);) "
Todo el mundo ama las cintas
.ribbon (font-size: 16px! important; / * Esta cinta "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), "
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 "
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 "
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"
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 "
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 ".
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: "
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í "
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 "
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 ".
Para imágenes de fondo CSS .yourselector (ancho: 200 px; alto: 100 px; fondo: url (/carpeta/yourimagen.png.webp) no repetir; _background: ninguno; "
¡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"
Sup, sub (alineación vertical: línea de base; posición: relativa; arriba: -0.4em;) sub (arriba: 0.4em;) "
@media print (a :: after (content: "(" attr (href) ")";)) "