Frammenti di codice 2025, Luglio
Assicurati solo di azzerare il margine e il riempimento anche su quegli elementi (normale in qualsiasi ripristino o normalizzazione). html, body (altezza: 100%; overflow: "
Come nel gioco PICROSS3D. CSS3 Technique Button Button Button .btn (colore: bianco; famiglia di caratteri: Helvetica, Arial, Sans-Serif; dimensione del carattere: "
Funziona su input di testo (ad esempio testo, e-mail, ecc.) Ma non è possibile modificare gli input di password effettivi. Caso d'uso = ???. input (-webkit-text-security: none;) "
Nome colore Colore HEX AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "
Questa era una demo originariamente di Martin Ivanov, che utilizzava caselle di controllo nascoste e combinatori fratelli adiacenti per impostare lo "stato" di ogni cartella. La demo live "
Ecco un esempio di una semplice classe a tre colonne: .three-col (-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : "
Ul.box (position: relative; z-index: 1; / * evita che le ombre cadano dietro i contenitori con sfondi * / overflow: hidden; list-style: none; margin: 0; "
@media screen and (min-width: 320px) and (max-width: 767px) and (guidance: landscape) (html (transform: rotate (-90deg); transform-origin: left top; "
Img (-ms-interpolation-mode: bicubic;) Se riduci un'immagine con attributi di larghezza e / o altezza, sembrerà terribile in IE a meno che tu non usi "
Immagine di sfondo:"
Booyah! Questo non è un fieldset
Usare uno o più elementi pseudo Puoi posizionare uno pseudo elemento in modo che sia dietro l'elemento o più grande, creando un effetto bordo con il suo "
Dichiarazione e utilizzo di base @ -webkit-keyframes NAME-YOUR-ANIMATION (0% (opacity: 0;) 100% (opacity: 1;)) @ -moz-keyframes NAME-YOUR-ANIMATION (0% ("
Le pagine Web su iOS per impostazione predefinita hanno uno stile di scorrimento "momentum" in cui un movimento del dito invia lo scorrimento della pagina Web e continua fino alla fine "
I browser che supportano più sfondi (WebKit dai primissimi giorni, Firefox 3+) utilizzano una sintassi come questa: #box (background: url (icon.png.webp) in alto a sinistra "
Html, corpo, div, span, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, address, big, cite, code, del, dfn, em, font "
Il testo nei tag
non va a capo per impostazione predefinita. Ad esempio, vedere lo snippet di codice di seguito! Se questo sta causando problemi di layout, una soluzione è dare il "
Puoi sempre applicare un filtro a un elemento per renderlo monotono nel senso della scala di grigi: guarda la penna Monotone-ing an Image di Chris Coyier (@chriscoyier) "
Howdy .layered-paper (background: #eee; box-shadow: 0 1px 1px rgba (0,0,0,0.15), / * The top layer shadow * / 0 10px 0-5px #eee, / * The second layer * / 0 "
L'unità rem font-size è simile a em, solo che invece di ricadere è sempre relativa all'elemento radice (html) (maggiori informazioni). Questo è abbastanza "
A: link (colore: blu;) a: visitato (colore: viola;) a: hover (colore: rosso;) a: attivo (colore: giallo;) Link, Visitato, Hover, Attivo L, V, H, A Amore odio"
Puoi farlo nascondere automaticamente invece di mostrare sempre: html (-ms-overflow-style: -ms-autohiding-scrollbar;) Risulta così: Credito a Thierry "
Arrivando direttamente al codice, ecco un'implementazione funzionante: html (font-size: 16px;) @media screen e (min-width: 320px) (html (font-size: calc (16px + "
Abbiamo spostato questo snippet nel nostro snippet canonico su questo argomento. Vedi: Gestione di parole lunghe e URL "
@media only screen and (device-width: 768px) (/ * For general iPad layouts * /) @media only screen and (min-device-width: 481px) and (max-device-width: "
* Specifico della lingua * /: lang (af) (virgolette: '201E' '201D' '201A' '2020-2021';): lang (ak) (famiglia di caratteri: Lucida, "DejaVu Sans", inherit; ): lang (ar) (famiglia di caratteri: Tahoma "
.hexagon (larghezza: 100 px; altezza: 55 px; posizione: relativa;) .hexagon, .hexagon: prima, .hexagon: dopo (sfondo: rosso; box-shadow: 0 0 10px "
Questo è solo WebKit, ma è il modo più pulito per farlo poiché il testo rimane testo web modificabile e selezionabile. h1 (dimensione carattere: 72 px; sfondo: "
A (position: relative; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absolute; bottom: 2px; left: 0; height: 1px; "
Come Twitter a metà 2012. input, textarea (-webkit-Transition: all 0.30s Easy-In-Out; -moz-Transition: All 0.30s Age-In-Out; -ms-Transition: All 0.30s "