Frammenti di codice 2025, Luglio

A, input, input, label, select, button, .pointer (cursor: pointer;) Alcuni elementi cliccabili misteriosamente non attivano il cursore del puntatore in

Html (overflow-y: scroll;) Questo non è un CSS non valido, ma funziona in tutto tranne che in Opera. La ragione di ciò è evitare "salti di centratura" quando "

Al momento della stesura di questo articolo, funzionerà solo in Chrome 18+, ma è standardizzato, quindi il supporto alla fine arriverà ovunque. @media print (body ("

Firefox e IE hanno il pulsante "scegli file" a destra del percorso del file, mentre WebKit lo mette a sinistra. Questo fa sì che WebKit lo metta a destra come "

* Stack basato su Times New Roman * / famiglia di caratteri: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New"

Corpo della sintassi (font: font-style font-variant font-weight font-size / line-height font-family;) In Usa corpo (font: corsivo minuscolo normale 13px / 150% Arial, "

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

#footer (position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: # 999;) / * IE 6 * / * html #footer (position: absolute; "

La nostra guida completa al layout CSS flexbox. Questa guida completa spiega tutto su flexbox, concentrandosi su tutte le diverse proprietà possibili per l'elemento genitore (il contenitore flessibile) e gli elementi figlio (gli elementi flessibili). Include anche cronologia, demo, modelli e una tabella di supporto del browser ".

Dan Cederholm ha usato a lungo la e commerciale corsiva Baskerville e ci dice di usare la migliore e commerciale disponibile (anche qui). Nel bene e nel male, questo ha "

Puoi capovolgere le immagini con CSS! Possibile scenario: avere un solo grafico per una "freccia", ma capovolgerlo per puntare in direzioni diverse ".

Dal design v8 di CSS-Tricks. Visualizza demo nav (sfondo: # 444; bordo inferiore: 8px solido # E6E2DF; overflow: nascosto; posizione: relativa; larghezza: 100%;) "

Il modo accessibile La soluzione migliore è guardare il video di 5 minuti di Ethan e quindi fare riferimento a questo: CodePen Embed Fallback Il modo cross-browser (markup extra) "

.center (larghezza: 300 px; altezza: 300 px; posizione: assoluto; sinistra: 50%; alto: 50%; margin-left: -150px; margin-top: -150px;) I margini negativi sono esattamente "

P: last-child: after (content: "2766"; / * Ecco la foglia di edera * / font-size: 150%; / * Rende la foglia più grande del testo normale * / padding-left: 10px; "

# example-gradient (height: 200px; margin: 0 0 20px 0; background-color: #eaeaea; background-size: 20px 20px; background-image: "

HTML Puoi crearli con un singolo div. È bello avere lezioni per ogni possibilità di direzione. CSS L'idea è una scatola con larghezza e altezza zero. Il"

Se sei interessato allo stile specifico di Webkit / Blink / Chrome, c'è uno pseudo elemento proprietario da nascondere, quindi usa anche uno non standard "

Utilizzato per proiettare ombre su elementi a livello di blocco (come i div). .shadow (-moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; "

#foo: verificato :: before, input (position: absolute; clip: rect (0,0,0,0); clip: rect (0 0 0 0);) #foo: controllato, input + label :: before ( soddisfare:"

La ripetizione dei gradienti richiede un trucco che possiamo già fare con l'uso creativo delle interruzioni di colore nelle notazioni gradiente lineare () e gradiente radiale (), e "

I selettori qui sono specifici per il markup Wufoo, ma i concetti al lavoro possono funzionare per qualsiasi forma. L'idea generale è che tu crei la radio predefinita "

Ombreggiatura normale del testo: p (text-shadow: 1px 1px 1px # 000;) Ombre multiple: p (text-shadow: 1px 1px 1px # 000, 3px 3px 5px blue;) I primi due valori "

Questa è una raccolta di modelli iniziali per layout e modelli che utilizzano CSS Grid. L'idea qui è di mostrare ciò che la tecnica è in grado di fare e "

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

Uno dei motivi principali per utilizzare il precaricamento dell'immagine è se si desidera utilizzare un'immagine per l'immagine di sfondo di un elemento su un evento mouseOver o: hover. Se solo "

Trova gli errori in HTML ed evidenzia la loro schifezza. / * Elementi vuoti * / div: vuoto, span: vuoto, li: vuoto, p: vuoto, td: vuoto, th: vuoto (padding: "

Sans-Serif Arial, sans-serif; Helvetica, sans-serif; Gill Sans, sans-serif; Lucida, sans-serif; Helvetica Narrow, sans-serif; sans-serif; Serif Times "

Tbody tr: nth-child (odd) (background-color: #ccc;) "

In questi giorni, non devi davvero preoccuparti che l'opacità sia una cosa difficile per tutti i browser. Devi solo usare la proprietà opacity, in questo modo: .thing ("