Fragmente de cod 2025, Ianuarie

Uite "Cusute" - CSS-Tricks

Uite "Cusute" - CSS-Tricks

.cusut (umplutură: 20 px; marjă: 10 px; fundal: # ff0030; culoare: #fff; dimensiunea fontului: 21 px; greutatea fontului: aldin; înălțimea liniei: 1,3em; chenar: 2 px punctat "

Tehnica de suprascriere a stilului - CSS-Tricks

Tehnica de suprascriere a stilului - CSS-Tricks

P (font-size: 24px! important;) Regula! important de la sfârșitul unei valori va suprascrie orice alte declarații de stil ale atributului respectiv, inclusiv inline "

Linkuri de stil în funcție de destinație - CSS-Tricks

Linkuri de stil în funcție de destinație - CSS-Tricks

A (/ * URL complet valid, probabil link extern * /) a (/ * link către un anumit site web * /) a, a (/ * link relativ intern * /) a (/ * link e-mail * /) a (/ * "

Efect de hârtie stivuite - CSS-Tricks

Efect de hârtie stivuite - CSS-Tricks

O tehnică de proiectare populară este crearea unui container de conținut care să arate ca o foaie de hârtie și stivuirea altor foi de hârtie sub aceasta, adăugând un strat "

Meniu Spinny Leaf - CSS-Tricks

Meniu Spinny Leaf - CSS-Tricks

Acasă Catalog Preț Despre Contact nav (lățime: 960px; înălțime: 100px; marjă: 120px automat; text-align: center;). Top-menu li (afișaj: inline-block; "

Tema solarizată pentru CodeMirror și Prettify - CSS-Tricks

Tema solarizată pentru CodeMirror și Prettify - CSS-Tricks

Iată pentru Google Code Prettify (găsit la această sursă). .prettyprint (color: # 839496; background-color: # 002b36;) .prettyprint .pln (color: inherit;) "

Înlocuirea standard a imaginii CSS - CSS-Tricks

Înlocuirea standard a imaginii CSS - CSS-Tricks

H1 # logo (lățime: 200px; // lățimea înălțimii imaginii: 100px; // înălțimea fundalului imaginii: url (../ cale / către / imagine.jpg.webp); text-indent: -9999px;) Această tehnică "

Stil simplu și plăcut Blockquote - CSS-Tricks

Stil simplu și plăcut Blockquote - CSS-Tricks

Cota de blocare se afișează în browsere conforme cu standardele cu efectul „ghilimele mari înainte” și în IE cu o margine stângă groasă și un gri deschis ”

Smiley Slider - CSS-Tricks

Smiley Slider - CSS-Tricks

Necesită jQuery și jQuery UI pentru glisorul real. Fața este realizată din elemente transformate în cercuri cu raza de margine. Gura, indicând fericirea "

Glisați în casetele de imagine - CSS-Tricks

Glisați în casetele de imagine - CSS-Tricks

Din subsolul proiectării v8 a CSS-Tricks. Vizualizați subsolul demonstrației (clar: ambele; depășire: ascuns; dimensiunea fontului: 16 px; înălțimea liniei: 1,3;) # footer-boxes ("

Eliminați bara de derulare din Textarea din IE - CSS-Tricks

Eliminați bara de derulare din Textarea din IE - CSS-Tricks

În mod implicit, toate versiunile IE au o bară de defilare pe zone text, chiar și atunci când acestea sunt goale. Niciun alt browser nu face acest lucru, deci dacă doriți să îl eliminați, astfel încât IE să poată "

Semnificați „Bombe PDF” - CSS-Tricks

Semnificați „Bombe PDF” - CSS-Tricks

Orice link de ancorare poate fi un link către un document PDF, dar dacă faceți clic pe un link de genul acesta, poate fi surprinzător și inconfortabil pentru un utilizator. Acest"

"Shake" CSS Keyframe Animation - CSS-Tricks

"Shake" CSS Keyframe Animation - CSS-Tricks

Aceasta presupune utilizarea unui autoprefixer. .face: hover (animație: shake 0.82s cubic-bezier (.36, .07, .19, .97) ambele; transformare: translate3d (0, 0, 0); "

Colțuri rotunjite - CSS-Tricks

Colțuri rotunjite - CSS-Tricks

Standard: -moz-border-radius: 10px; -webkit-border-radius: 10px; raza chenarului: 10px; / * verificare viitoare * / -khtml-border-radius: 10px; / * pentru vechi "

Scară pe Hover cu tranziție - CSS-Tricks

Scară pe Hover cu tranziție - CSS-Tricks

Aduceți propriile prefixe! .grow (tranziție: toate .2s ușor de intrat;) .grow: hover (transformare: scară (1.1);) "

Panglică - CSS-Tricks

Panglică - CSS-Tricks

Toată lumea iubește panglicile

.ribbon (font-size: 16px! important; / * Această panglică "

Interogare Retina Display Media - CSS-Tricks

Interogare Retina Display Media - CSS-Tricks

Pentru includerea graficii de înaltă rezoluție, dar numai pentru ecranele care le pot folosi. „Retina” fiind „2x”: @media (-webkit-min-device-pixel-ratio: 2), „

Gestionarea cuvintelor lungi și a adreselor URL (pauze forțate, cratimare, elipsă etc.) - CSS-Tricks

Gestionarea cuvintelor lungi și a adreselor URL (pauze forțate, cratimare, elipsă etc.) - CSS-Tricks

Există momente în care un șir de text foarte lung poate revărsa containerul unui aspect. De exemplu: adresele URL nu au de obicei spații în ele, așa că „

Text invers - CSS-Tricks

Text invers - CSS-Tricks

Pentru limbile de la dreapta la stânga, puteți schimba aspectul implicit de la stânga la dreapta în majoritatea browserelor, pur și simplu prin atributul dir. text în dreapta-stânga "

Eliminarea conturului punctat - CSS-Tricks

Eliminarea conturului punctat - CSS-Tricks

A (schiță: 0;) Aveți grijă să eliminați stilurile de schiță de pe linkuri, deoarece acestea sunt o caracteristică de utilizare. Dacă da, asigurați-vă că definiți stiluri de focalizare clare. Dacă"

Eliminați marginile pentru primele / ultimele elemente - CSS-Tricks

Eliminați marginile pentru primele / ultimele elemente - CSS-Tricks

Uneori poate fi de dorit să îndepărtați marginea superioară sau stânga de la primul element dintr-un container. La fel, marja din dreapta sau de jos din ultima "

Interogări media pentru dispozitive standard - CSS-Tricks

Interogări media pentru dispozitive standard - CSS-Tricks

Această pagină listează o mulțime de diferite dispozitive și interogări media care ar viza în mod specific dispozitivul respectiv. Probabil că aceasta nu este, în general, o practică excelentă, dar este util să știm care sunt dimensiunile pentru toate aceste dispozitive într-un context CSS. "

Eliminați evidențierea gri când atingeți linkuri în Safari mobil - CSS-Tricks

Eliminați evidențierea gri când atingeți linkuri în Safari mobil - CSS-Tricks

Webkit-tap-highlight-color: rgba (0,0,0,0); Și apoi pentru a permite: stilurile active să funcționeze în CSS pe o pagină din Mobile Safari: "

Eliminați marginile link-ului punctat - CSS-Tricks

Eliminați marginile link-ului punctat - CSS-Tricks

Bordurile punctate din jurul linkurilor sunt o caracteristică de accesibilitate pe care majoritatea browserelor o au în mod implicit. Este pentru utilizatorii care trebuie sau aleg să navigheze de la tastatură, acolo "

Eliminați textul butonului în IE7 - CSS-Tricks

Eliminați textul butonului în IE7 - CSS-Tricks

HTML: .. sau .. Accesați CSS: input.button (text-indent: -9000px; text-transform: capitalize;) Indentare negativă singură, din păcate, nu funcționează pentru a elimina textul "

Abrevieri de calitate - CSS-Tricks

Abrevieri de calitate - CSS-Tricks

Culoare ușor mai deschisă (presupunând că textul dvs. este negru), marginea de jos punctată și un cursor cu semn de întrebare. Aceasta a devenit o abordare oarecum standardizată "

PNG Hack / Fix pentru IE 6 - CSS-Tricks

PNG Hack / Fix pentru IE 6 - CSS-Tricks

Pentru imagini de fundal CSS.

Buton perfect CSS Sprite / Gliding Doors - CSS-Tricks

Buton perfect CSS Sprite / Gliding Doors - CSS-Tricks

Notă mare aici! Ușile glisante sunt o tehnică destul de veche. Și-a petrecut timpul pe web, dar probabil că nu este cel mai inteligent mod de a merge în aceste zile. Avem"

Împiedicați superscriptele și indicele să afecteze înălțimea liniei - CSS-Tricks

Împiedicați superscriptele și indicele să afecteze înălțimea liniei - CSS-Tricks

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

Imprimare URL după legături - CSS-Tricks

Imprimare URL după legături - CSS-Tricks

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