Fragmentos de código 2025, Enero

A, input, input, label, select, button, .pointer (cursor: pointer;) Algunos elementos en los que se puede hacer clic misteriosamente no activan un cursor de puntero en "

Html (overflow-y: scroll;) Este CSS no es válido, pero funciona en todo excepto en Opera. La razón de esto es evitar "saltos de centrado" cuando "

En el momento de escribir este artículo, esto solo funcionará en Chrome 18+, pero está estandarizado, por lo que el soporte eventualmente llegará a todas partes. @media print (cuerpo ("

Firefox e IE tienen el botón "elegir archivo" a la derecha de la ruta del archivo, mientras que WebKit lo coloca a la izquierda. Esto hace que WebKit lo coloque a la derecha como "

* Pila basada en Times New Roman * / font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New"

Cuerpo de sintaxis (fuente: estilo de fuente fuente-variante peso de fuente tamaño de fuente / altura de línea familia de fuentes;) Cuerpo en uso (fuente: cursiva minúscula normal 13px / 150% Arial, "

* (margin: 0; padding: 0;) html, body (height: 100%;) body #fixedElement (position: fixed! important; position: absolute; / * ie6 y superior * / top: 0; "

#footer (posición: fija; izquierda: 0px; inferior: 0px; alto: 30px; ancho: 100%; fondo: # 999;) / * IE 6 * / * html #footer (posición: absoluta; "

Nuestra guía completa para el diseño de CSS flexbox. Esta guía completa explica todo sobre flexbox, centrándose en todas las diferentes propiedades posibles para el elemento padre (el contenedor flexible) y los elementos secundarios (los elementos flexibles). También incluye historial, demostraciones, patrones y un gráfico de compatibilidad del navegador ".

Dan Cederholm ha utilizado durante mucho tiempo el ampersand de Baskerville Italic y nos dice que usemos el mejor ampersand disponible (también aquí). Para bien o para mal, esto tiene "

¡Puedes voltear imágenes con CSS! Escenario posible: tener solo un gráfico para una "flecha", pero darle la vuelta para apuntar en diferentes direcciones ".

Desde el diseño v8 de CSS-Tricks. Ver navegación de demostración (fondo: # 444; borde inferior: 8px sólido # E6E2DF; desbordamiento: oculto; posición: relativa; ancho: 100%;) "

La forma accesible Su mejor opción es ver el video de 5 minutos de Ethan y luego hacer referencia a esto: CodePen Embed Fallback La forma de varios navegadores (marcado adicional) "

.center (ancho: 300 px; alto: 300 px; posición: absoluta; izquierda: 50%; arriba: 50%; margen izquierdo: -150 px; margen superior: -150 px;) Los márgenes negativos son exactamente "

P: last-child: after (content: "2766"; / * Aquí viene la hoja de hiedra * / font-size: 150%; / * Hace que la hoja sea más grande que el texto normal * / padding-left: 10px; "

# example-gradient (altura: 200px; margen: 0 0 20px 0; color de fondo: #eaeaea; tamaño de fondo: 20px 20px; imagen de fondo: "

HTML Puede hacerlos con un solo div. Es bueno tener clases para cada posibilidad de dirección. CSS La idea es una caja con ancho y alto cero. Los"

Si está interesado en el estilo específico de Webkit / Blink / Chrome, hay un pseudo elemento patentado para ocultar, y luego use un "

Se utiliza para proyectar sombras en elementos a nivel de bloque (como divs). .shadow (-moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; "

#foo: comprobado :: antes, entrada (posición: absoluta; clip: rect (0,0,0,0); clip: rect (0 0 0 0);) #foo: comprobado, entrada + etiqueta :: antes ( contenido:"

Los degradados repetidos requieren un truco que ya podemos hacer con el uso creativo de paradas de color en las notaciones de degradado lineal () y degradado radial (), y "

Los selectores aquí son específicos del marcado de Wufoo, pero los conceptos en funcionamiento pueden funcionar para cualquier forma. La idea general es que usted haga la radio predeterminada "

Sombra de texto normal: p (text-shadow: 1px 1px 1px # 000;) Varias sombras: p (text-shadow: 1px 1px 1px # 000, 3px 3px 5px azul;) Los dos primeros valores "

Esta es una colección de plantillas de inicio para diseños y patrones que utilizan CSS Grid. La idea aquí es mostrar lo que la técnica es capaz de hacer y "

Firefox 2 html> / ** / body .selector, x: -moz-any-link (color: lime;) Firefox 3 html> / ** / body .selector, x: -moz-any-link, x: predeterminado (color: lima;) Cualquiera "

Una gran razón para usar la precarga de imágenes es si desea usar una imagen para la imagen de fondo de un elemento en un evento mouseOver o: hover. Si solo "

Encuentra errores en HTML y resalta la basura. / * Elementos vacíos * / div: vacío, span: vacío, li: vacío, p: vacío, td: vacío, th: vacío (relleno: "

Sans-Serif Arial, sans-serif; Helvética, sans-serif; Gill Sans, sans-serif; Lucida, sans-serif; Helvetica Estrecha, sans-serif; sans-serif; Serif Times, "

Tbody tr: nth-child (impar) (color de fondo: #ccc;) "

En estos días, realmente no tiene que preocuparse de que la opacidad sea algo difícil entre navegadores. Solo usa la propiedad de opacidad, así: .thing ("