Frammenti di codice 2025, Luglio

Look "cucito" - Trucchi CSS

Look "cucito" - Trucchi CSS

.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px dashed "

Tecnica di sostituzione dello stile - Trucchi CSS

Tecnica di sostituzione dello stile - Trucchi CSS

P (font-size: 24px! important;) La regola! important alla fine di un valore sovrascriverà qualsiasi altra dichiarazione di stile di quell'attributo, incluso inline "

Collegamenti di stile a seconda della destinazione - Trucchi CSS

Collegamenti di stile a seconda della destinazione - Trucchi CSS

A (/ * URL completamente valido, probabile collegamento esterno * /) a (/ * collegamento a sito Web specifico * /) a, a (/ * collegamento relativo interno * /) a (/ * collegamento e-mail * /) a (/ * "

Effetto carta impilata - Trucchi CSS

Effetto carta impilata - Trucchi CSS

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 "

Menu foglia spinny - Trucchi CSS

Menu foglia spinny - Trucchi CSS

Home Catalogo Prezzo Informazioni Contattaci nav (larghezza: 960px; altezza: 100px; margine: 120px auto; text-align: center;) .top-menu li (display: inline-block; "

Tema solarizzato per CodeMirror e Prettify - Trucchi CSS

Tema solarizzato per CodeMirror e Prettify - Trucchi CSS

Ecco per Google Code Prettify (trovato a questa fonte). .prettyprint (color: # 839496; background-color: # 002b36;) .prettyprint .pln (color: inherit;) "

Sostituzione dell'immagine CSS standard - Trucchi CSS

Sostituzione dell'immagine CSS standard - Trucchi CSS

H1 # logo (width: 200px; // width of image height: 100px; // height of image background: url (../ path / to / image.jpg.webp); text-indent: -9999px;) Questa tecnica "

Stile Blockquote semplice e piacevole - Trucchi CSS

Stile Blockquote semplice e piacevole - Trucchi CSS

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 "

Smiley Slider - Trucchi CSS

Smiley Slider - Trucchi CSS

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

Scorri nelle caselle immagine - Trucchi CSS

Scorri nelle caselle immagine - Trucchi CSS

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

Rimuovere la barra di scorrimento da Textarea in IE - Trucchi CSS

Rimuovere la barra di scorrimento da Textarea in IE - Trucchi CSS

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 "

Significa "PDF Bombs" - Trucchi CSS

Significa "PDF Bombs" - Trucchi CSS

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"

Animazione CSS Keyframe "Shake" - Trucchi CSS

Animazione CSS Keyframe "Shake" - Trucchi CSS

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

Angoli arrotondati - Trucchi CSS

Angoli arrotondati - Trucchi CSS

Standard: -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * verifica futura * / -khtml-border-radius: 10px; / * per vecchi "

Scala al passaggio del mouse con transizione - Trucchi CSS

Scala al passaggio del mouse con transizione - Trucchi CSS

Porta i tuoi prefissi! .grow (transizione: all .2s easy-in-out;) .grow: hover (transform: scale (1.1);) "

Ribbon - Trucchi CSS

Ribbon - Trucchi CSS

Tutti amano i nastri

.ribbon (font-size: 16px! important; / * This ribbon "

Retina Display Media Query - Trucchi CSS

Retina Display Media Query - Trucchi CSS

Per includere grafica ad alta risoluzione, ma solo per schermi che possono utilizzarli. "Retina" significa "2x": @media (-webkit-min-device-pixel-ratio: 2), "

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

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 "

Inversione del testo - Trucchi CSS

Inversione del testo - Trucchi CSS

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 "

Rimozione del contorno punteggiato - Trucchi CSS

Rimozione del contorno punteggiato - Trucchi CSS

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"

Rimuovi margini per primo / ultimo elemento - Trucchi CSS

Rimuovi margini per primo / ultimo elemento - Trucchi CSS

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 "

Media query per dispositivi standard - Trucchi CSS

Media query per dispositivi standard - Trucchi CSS

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

Rimuovi l'evidenziazione grigia quando si toccano i collegamenti in Safari mobile - Trucchi CSS

Rimuovi l'evidenziazione grigia quando si toccano i collegamenti in Safari mobile - Trucchi 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: "

Rimuovi i bordi dei collegamenti punteggiati - Trucchi CSS

Rimuovi i bordi dei collegamenti punteggiati - Trucchi CSS

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 "

Rimuovi testo pulsante in IE7 - Trucchi CSS

Rimuovi testo pulsante in IE7 - Trucchi CSS

HTML: .. o .. Vai CSS: input.button (text-indent: -9000px; text-transform: capitalize;) Il solo rientro negativo purtroppo non funziona per rimuovere il testo "

Abbreviazioni di qualità - Trucchi CSS

Abbreviazioni di qualità - Trucchi CSS

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

PNG Hack / Fix per IE 6 - Trucchi CSS

PNG Hack / Fix per IE 6 - Trucchi CSS

Per le immagini di sfondo CSS .yourselector (larghezza: 200 px; altezza: 100 px; sfondo: url (/folder/yourimage.png.webp) no-repeat; _background: none; "

Pulsante Perfect CSS Sprite / Sliding Doors - Trucchi CSS

Pulsante Perfect CSS Sprite / Sliding Doors - Trucchi CSS

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"

Impedire che apici e pedici influiscano sull'altezza della riga - Trucchi CSS

Impedire che apici e pedici influiscano sull'altezza della riga - Trucchi CSS

Sup, sub (vertical-align: baseline; position: relative; top: -0.4em;) sub (top: 0.4em;) "

Stampa URL dopo i collegamenti - Trucchi CSS

Stampa URL dopo i collegamenti - Trucchi CSS

@media print (a :: after (content: "(" attr (href) ")";)) "