Frammenti di codice 2025, Luglio

Prevenire il Bounce Scroll in Lion - Trucchi CSS

Prevenire il Bounce Scroll in Lion - Trucchi CSS

Assicurati solo di azzerare il margine e il riempimento anche su quegli elementi (normale in qualsiasi ripristino o normalizzazione). html, body (altezza: 100%; overflow: "

Pulsanti stile Picross - Trucchi CSS

Pulsanti stile Picross - Trucchi CSS

Come nel gioco PICROSS3D. CSS3 Technique Button Button Button .btn (colore: bianco; famiglia di caratteri: Helvetica, Arial, Sans-Serif; dimensione del carattere: "

Effettua input senza password Usa elenchi puntati (o alternative puntati) - Trucchi CSS

Effettua input senza password Usa elenchi puntati (o alternative puntati) - Trucchi CSS

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;) "

Colori con nome ed equivalenti esadecimali - Trucchi CSS

Colori con nome ed equivalenti esadecimali - Trucchi CSS

Nome colore Colore HEX AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "

Cartelle nidificate ed espandibili - Trucchi CSS

Cartelle nidificate ed espandibili - Trucchi CSS

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 "

Colonne multiple - Trucchi CSS

Colonne multiple - Trucchi CSS

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 : "

Pagina Curl Shadows - Trucchi CSS

Pagina Curl Shadows - Trucchi CSS

Ul.box (position: relative; z-index: 1; / * evita che le ombre cadano dietro i contenitori con sfondi * / overflow: hidden; list-style: none; margin: 0; "

Blocco orientamento - Trucchi CSS

Blocco orientamento - Trucchi CSS

@media screen and (min-width: 320px) and (max-width: 767px) and (guidance: landscape) (html (transform: rotate (-90deg); transform-origin: left top; "

Ridimensionamento dell'immagine non terribile in IE - Trucchi CSS

Ridimensionamento dell'immagine non terribile in IE - Trucchi CSS

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 "

Aspetto fieldset non in formato - Trucchi CSS

Aspetto fieldset non in formato - Trucchi CSS

Questo non è un fieldset

Booyah!

.fieldset (position: relative; border: 1px solid "

Bordi multipli - Trucchi CSS

Bordi multipli - Trucchi CSS

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 "

Sintassi dell'animazione dei fotogrammi chiave - Trucchi CSS

Sintassi dell'animazione dei fotogrammi chiave - Trucchi CSS

Dichiarazione e utilizzo di base @ -webkit-keyframes NAME-YOUR-ANIMATION (0% (opacity: 0;) 100% (opacity: 1;)) @ -moz-keyframes NAME-YOUR-ANIMATION (0% ("

Momentum Scrolling su iOS Overflow Elements - Trucchi CSS

Momentum Scrolling su iOS Overflow Elements - Trucchi CSS

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 "

Sintassi di sfondi multipli - Trucchi CSS

Sintassi di sfondi multipli - Trucchi CSS

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 "

Reset Meyer - Trucchi CSS

Reset Meyer - Trucchi CSS

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 "

Crea "pre" testo a capo - Trucchi CSS

Crea "pre" testo a capo - Trucchi CSS

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 "

Monotona un'immagine con CSS - Trucchi CSS

Monotona un'immagine con CSS - Trucchi CSS

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) "

Carta a strati - Trucchi CSS

Carta a strati - Trucchi CSS

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 "

Mixin per il dimensionamento dei caratteri Rem - Trucchi CSS

Mixin per il dimensionamento dei caratteri Rem - Trucchi CSS

L'unità rem font-size è simile a em, solo che invece di ricadere è sempre relativa all'elemento radice (html) (maggiori informazioni). Questo è abbastanza "

Collega pseudo-classi (in ordine) - Trucchi CSS

Collega pseudo-classi (in ordine) - Trucchi CSS

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"

Nascondi barra di scorrimento in Edge, IE 10/11 - Trucchi CSS

Nascondi barra di scorrimento in Edge, IE 10/11 - Trucchi CSS

Puoi farlo nascondere automaticamente invece di mostrare sempre: html (-ms-overflow-style: -ms-autohiding-scrollbar;) Risulta così: Credito a Thierry "

Tipografia fluida - Trucchi CSS

Tipografia fluida - Trucchi CSS

Arrivando direttamente al codice, ecco un'implementazione funzionante: html (font-size: 16px;) @media screen e (min-width: 320px) (html (font-size: calc (16px + "

Gestione di parole lunghe e URL (forzare interruzioni, sillabazione, ellissi, ecc.) - Trucchi CSS

Gestione di parole lunghe e URL (forzare interruzioni, sillabazione, ellissi, ecc.) - Trucchi CSS

Abbiamo spostato questo snippet nel nostro snippet canonico su questo argomento. Vedi: Gestione di parole lunghe e URL "

CSS specifico per iPad - Trucchi CSS

CSS specifico per iPad - Trucchi CSS

@media only screen and (device-width: 768px) (/ * For general iPad layouts * /) @media only screen and (min-device-width: 481px) and (max-device-width: "

Linguaggio di internazionalizzazione CSS - Trucchi CSS

Linguaggio di internazionalizzazione CSS - Trucchi CSS

* 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 "

Esagono con ombra - Trucchi CSS

Esagono con ombra - Trucchi CSS

.hexagon (larghezza: 100 px; altezza: 55 px; posizione: relativa;) .hexagon, .hexagon: prima, .hexagon: dopo (sfondo: rosso; box-shadow: 0 0 10px "

Testo sfumato - Trucchi CSS

Testo sfumato - Trucchi CSS

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: "

Sottolineati sfumati - Trucchi CSS

Sottolineati sfumati - Trucchi CSS

A (position: relative; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absolute; bottom: 2px; left: 0; height: 1px; "

Punti salienti dell'input blu brillante - Trucchi CSS

Punti salienti dell'input blu brillante - Trucchi CSS

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 "