Fragmentos de código 2025, Enero
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: "
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: "
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;) "
Nombre del color HEX Color AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "
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 "
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 : "
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; "
@media pantalla y (ancho mínimo: 320px) y (ancho máximo: 767px) y (orientación: paisaje) (html (transform: rotate (-90deg); transform-origin: left top; "
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 "
Imagen de fondo:"
¡Booyah! Esto no es un fieldset
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 "
Declaración básica y uso @ -webkit-keyframes NAME-YOUR-ANIMATION (0% (opacity: 0;) 100% (opacity: 1;)) @ -moz-keyframes NAME-YOUR-ANIMATION (0% ("
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 "
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 "
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, "
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 "
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) "
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 "
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 "
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 "
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 "
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 + "
Hemos trasladado este fragmento a nuestro fragmento canónico sobre este tema. Consulte: Manejo de URL y palabras largas "
@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: "
* 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 (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 "
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: "
A (posición: relativa; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absoluta; bottom: 2px; left: 0; height: 1px; "
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 "