Frammenti di codice 2025, Luglio
.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px dashed "
P (font-size: 24px! important;) La regola! important alla fine di un valore sovrascriverà qualsiasi altra dichiarazione di stile di quell'attributo, incluso inline "
A (/ * URL completamente valido, probabile collegamento esterno * /) a (/ * collegamento a sito Web specifico * /) a, a (/ * collegamento relativo interno * /) a (/ * collegamento e-mail * /) a (/ * "
Una tecnica di progettazione popolare consiste nel creare un contenitore di contenuti che assomigli a un foglio di carta e impilare altri fogli di carta sotto di esso, aggiungendo un "
Home Catalogo Prezzo Informazioni Contattaci nav (larghezza: 960px; altezza: 100px; margine: 120px auto; text-align: center;) .top-menu li (display: inline-block; "
Ecco per Google Code Prettify (trovato a questa fonte). .prettyprint (color: # 839496; background-color: # 002b36;) .prettyprint .pln (color: inherit;) "
H1 # logo (width: 200px; // width of image height: 100px; // height of image background: url (../ path / to / image.jpg.webp); text-indent: -9999px;) Questa tecnica "
La blockquote viene visualizzata nei browser conformi agli standard con l'effetto "virgolette prima" e in IE con un bordo sinistro spesso e un grigio chiaro "
Richiede jQuery e jQuery UI per lo slider effettivo. La faccia è composta da elementi trasformati in cerchi con raggio di confine. La bocca, che indica la felicità "
Dal piè di pagina del design v8 di CSS-Tricks. Visualizza il piè di pagina della demo (chiaro: entrambi; overflow: nascosto; dimensione carattere: 16px; altezza riga: 1.3;) # footer-box ("
Per impostazione predefinita, tutte le versioni di IE hanno una barra di scorrimento nelle aree di testo, anche quando sono vuote. Nessun altro browser lo fa, quindi se vuoi rimuoverlo in modo che IE possa "
Qualsiasi vecchio collegamento di ancoraggio può essere un collegamento a un documento PDF, ma fare clic su un collegamento del genere pensando diversamente può essere sorprendente e scomodo per un utente. Questo"
Ciò presuppone l'uso di un autoprefixer. .face: hover (animation: shake 0.82s cubic-bezier (.36, .07, .19, .97) both; transform: translate3d (0, 0, 0); "
Standard: -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * verifica futura * / -khtml-border-radius: 10px; / * per vecchi "
Porta i tuoi prefissi! .grow (transizione: all .2s easy-in-out;) .grow: hover (transform: scale (1.1);) "
Tutti amano i nastri
.ribbon (font-size: 16px! important; / * This ribbon "Per includere grafica ad alta risoluzione, ma solo per schermi che possono utilizzarli. "Retina" significa "2x": @media (-webkit-min-device-pixel-ratio: 2), "
Ci sono momenti in cui una stringa di testo molto lunga può traboccare dal contenitore di un layout. Ad esempio: gli URL in genere non contengono spazi, quindi "
Per le lingue da destra a sinistra, puoi scambiare il layout predefinito da sinistra a destra nella maggior parte dei browser semplicemente tramite l'attributo dir. testo da destra a sinistra "
A (outline: 0;) Fai attenzione a rimuovere gli stili di struttura dai collegamenti, poiché sono una caratteristica di usabilità. Se lo fai, assicurati di definire stili di messa a fuoco chiari. Se"
A volte può essere desiderabile rimuovere il margine superiore o sinistro dal primo elemento in un contenitore. Allo stesso modo, il margine destro o inferiore dall'ultimo "
Questa pagina elenca una tonnellata di diversi dispositivi e media query che mirerebbero specificamente a quel dispositivo. Probabilmente non è generalmente un'ottima pratica, ma è utile sapere quali sono le dimensioni di tutti questi dispositivi in un contesto CSS ".
Webkit-tap-highlight-color: rgba (0,0,0,0); E poi per consentire a: stili attivi di funzionare nel tuo CSS su una pagina in Mobile Safari: "
I bordi punteggiati attorno ai collegamenti sono una funzione di accessibilità che la maggior parte dei browser ha per impostazione predefinita. È per gli utenti che devono o scelgono di navigare con la tastiera "
HTML: .. o .. Vai CSS: input.button (text-indent: -9000px; text-transform: capitalize;) Il solo rientro negativo purtroppo non funziona per rimuovere il testo "
Colore leggermente più chiaro (supponendo che il testo sia nero), bordo inferiore punteggiato e un cursore a punto interrogativo. Questo è diventato un approccio in qualche modo standardizzato ",
Per le immagini di sfondo CSS .yourselector (larghezza: 200 px; altezza: 100 px; sfondo: url (/folder/yourimage.png.webp) no-repeat; _background: none; "
Grande nota qui! Le porte scorrevoli sono una tecnica piuttosto vecchia. Ha avuto il suo tempo sul web, ma probabilmente non è il modo più intelligente di andare in questi giorni. Abbiamo"
Sup, sub (vertical-align: baseline; position: relative; top: -0.4em;) sub (top: 0.4em;) "
@media print (a :: after (content: "(" attr (href) ")";)) "