Koda fragmenti 2025, Maijs

Novērst atlēcienu ritināšanu lauvā CSS-triki

Novērst atlēcienu ritināšanu lauvā CSS-triki

Vienkārši pārliecinieties, ka arī šie elementi ir nullei atstarpi un pildījumu (normāli jebkurā atiestatīšanas vai normalizācijas gadījumā). html, body (augstums: 100%; pārpilde: "

Pikrosa stila pogas CSS-triki

Pikrosa stila pogas CSS-triki

Tāpat kā spēlē PICROSS3D. CSS3 tehnikas pogas pogas poga .btn (krāsa: balta; fontu saime: Helvetica, Arial, Sans-Serif; fonta lielums: "

Veiciet ievades, kas nav parole, izmantot aizzīmes (vai aizzīmju alternatīvas) - CSS-triki

Veiciet ievades, kas nav parole, izmantot aizzīmes (vai aizzīmju alternatīvas) - CSS-triki

Tas darbojas ar tekstveida ievadi (piemēram, tekstu, e-pastu utt.), Taču jūs nevarat mainīt faktiskās paroles ievades. Lietojuma gadījums = ???. ievade (-webkit-text-security: nav;) "

Nosauktas krāsas un sešstūra ekvivalenti CSS-triki

Nosauktas krāsas un sešstūra ekvivalenti CSS-triki

Krāsas nosaukums HEX Color AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "

Ligzdotas un izvēršamas mapes CSS-triki

Ligzdotas un izvēršamas mapes CSS-triki

Šis sākotnēji bija Martin Ivanova demonstrējums, izmantojot slēptās izvēles rūtiņas un blakus esošos brāļu un māsu kombinatorus, lai iestatītu katras mapes "stāvokli". Tiešraides demonstrācija "

Vairākas kolonnas - CSS-triki

Vairākas kolonnas - CSS-triki

Šeit ir vienkāršas trīs kolonnu klases piemērs: .three-col (-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : "

Lapu čokurošanās ēnas - CSS-triki

Lapu čokurošanās ēnas - CSS-triki

Ul.box (pozīcija: relatīvais; z-indekss: 1; / * novērš ēnu nokrišanu aiz konteineriem ar foniem * / pārpilde: slēpta; saraksta stils: nav; piemale: 0; "

Orientācijas bloķēšana - CSS-triki

Orientācijas bloķēšana - CSS-triki

@media ekrāns un (min-width: 320px) un (max-width: 767px) un (orientation: landscape) (html (transform: rotate (-90deg); transform-origin: kreisā augšdaļa; "

Nav ļoti briesmīga attēla lieluma maiņa IE - CSS-triki

Nav ļoti briesmīga attēla lieluma maiņa IE - CSS-triki

Img (-ms-interpolation-mode: bicubic;) Ja samazināsiet attēlu ar platuma un / vai augstuma atribūtiem, tas IE izskatīsies briesmīgi, ja vien neizmantosit "

Ārpus formas lauka izskats - CSS-triki

Ārpus formas lauka izskats - CSS-triki

Tas nav lauka kopa

Booyah!

.fieldset (position: suhtīgs; apmale: 1px ciets "

Vairākas robežas CSS-triki

Vairākas robežas CSS-triki

Pseidoelementa (-u) izmantošana Pseidoelementu var novietot tā, lai tas būtu vai nu aiz elementa, un lielāks, padarot apmales efektu ar savu "

Keyframe animācijas sintakse - CSS-triki

Keyframe animācijas sintakse - CSS-triki

Pamata deklarācija un lietošana @ -webkit-keyframes NOSAUKUMS-JŪSU ANIMĀCIJA (0% (necaurredzamība: 0;) 100% (necaurredzamība: 1;)) @ -moz-keyframes NOSAUKUMS-JŪSU-ANIMĀCIJA (0% ("

Ritināšana uz iOS pārpildes elementiem CSS-triki

Ritināšana uz iOS pārpildes elementiem CSS-triki

Tīmekļa lapām iOS ierīcēs pēc noklusējuma ir ritināšanas stils "impulss", kur ar pirksta kustību tiek sūtīta Web lapas ritināšana, un tā turpinās līdz galam "

Vairāku fonu sintakse CSS-triki

Vairāku fonu sintakse CSS-triki

Pārlūkprogrammas, kas atbalsta vairākus fonus (WebKit jau no paša sākuma, Firefox 3+), izmanto šādu sintaksi: #box (background: url (icon.png.webp) augšējā kreisajā stūrī "

Meyer Reset - CSS-triki

Meyer Reset - CSS-triki

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, röv, akronīms, adrese, big, citēt, kods, del, dfn, em, fonts, "

Veiciet teksta iesaiņošanu pirms CSS-triki

Veiciet teksta iesaiņošanu pirms CSS-triki

Teksts

 tagos pēc noklusējuma netiek ietīts. Piemēram, skatiet koda fragmentu zemāk! Ja tas rada izkārtojuma problēmas, viens no risinājumiem ir

Monotons attēls ar CSS CSS-triki

Monotons attēls ar CSS CSS-triki

Vienmēr varat elementam lietot filtru, lai padarītu to monotonu pelēktoņu izpratnē: skatiet Krista Koijera (@chriscoyier) pildspalvas monotonu - attēlu. "

Slāņveida papīrs CSS-triki

Slāņveida papīrs CSS-triki

Howdy .layered-paper (background: #eee; box-shadow: 0 1px 1px rgba (0,0,0,0,15), / * Augšējā slāņa ēna * / 0 10px 0 -5px #eee, / * Otrais slānis * / 0 "

Miksi Rem fonta lielumam - CSS-triki

Miksi Rem fonta lielumam - CSS-triki

Rem fonta lieluma vienība ir līdzīga em, tikai kaskādes vietā tā vienmēr ir saistīta ar saknes (html) elementu (vairāk informācijas). Tas ir diezgan "

Saistīt pseidoklases (kārtībā) - CSS-triki

Saistīt pseidoklases (kārtībā) - CSS-triki

A: saite (krāsa: zila;) a: apmeklēta (krāsa: violeta;) a: lidināties (krāsa: sarkana;) a: aktīva (krāsa: dzeltena;) saite, apmeklēta, virzīta, aktīva L, V, H, A Mīlestība naids"

Slēpt ritjoslu Edge, IE 10/11 - CSS-triki

Slēpt ritjoslu Edge, IE 10/11 - CSS-triki

Varat to automātiski paslēpt, nevis vienmēr rādīt: html (-ms-overflow-style: -ms-autohiding-scrollbar;) Izrādās šādi: Kredīts Thierry "

Šķidruma tipogrāfija CSS-triki

Šķidruma tipogrāfija CSS-triki

Lai piekļūtu kodam, lūk, darbojas ieviešana: html (font-size: 16px;) @ media ekrāns un (min-width: 320px) (html (font-size: calc (16px + ")

Apstrāde ar gariem vārdiem un vietrāžiem URL (pārtraukumu piespiešana, defisēšana, elipses utt.) CSS-triki

Apstrāde ar gariem vārdiem un vietrāžiem URL (pārtraukumu piespiešana, defisēšana, elipses utt.) CSS-triki

Mēs esam pārvietojuši šo fragmentu uz savu kanonisko fragmentu par šo tēmu. Skatīt: garu vārdu un URL apstrāde "

IPad specifiskais CSS - CSS-triki

IPad specifiskais CSS - CSS-triki

Tikai @media ekrāns un (ierīces platums: 768px) (/ * Vispārīgiem iPad izkārtojumiem * /) Tikai @media ekrāns un (min-device-width: 481px) un (max-device-width: "

Internacionalizācijas valoda CSS CSS-triki

Internacionalizācijas valoda CSS CSS-triki

* Konkrētajai valodai * /: lang (af) (pēdiņas: '201E' '201D' '201A' '2020-2021';): lang (ak) (fontu saime: Lucida, "DejaVu Sans", mantot; ): lang (ar) (fontu saime: Tahoma "

Sešstūris ar ēnu - CSS-triki

Sešstūris ar ēnu - CSS-triki

. sešstūris (platums: 100 pikseļi; augstums: 55 pikseļi; pozīcija: relatīvs;). sešstūris,. sešstūris: pirms,. sešstūris: pēc (fons: sarkans; lodziņa ēna: 0 0 10 pikseļi "

Gradienta teksts CSS-triki

Gradienta teksts CSS-triki

Tas ir tikai WebKit, taču ir tīrākais veids, kā to paveikt, jo teksts paliek rediģējams un atlasāms tīmekļa teksts. h1 (fonta lielums: 72 pikseļi; fons: "

Gradienta pasvītrojums CSS-triki

Gradienta pasvītrojums CSS-triki

A (pozīcija: relatīvais; polsterējums-apakšā: 2 pikseļi; teksta rotājums: nav;) a: virziet kursoru :: pēc (saturs: ""; pozīcija: absolūts; apakšā: 2 pikseļi; pa kreisi: 0; augstums: 1 pikseļi; "

Kvēlojošas zilās ievades izcelšanas vietas CSS-triki

Kvēlojošas zilās ievades izcelšanas vietas CSS-triki

Tāpat kā 2012. gada vidū Twitter. ievade, textarea (-webkit-pāreja: visas 0.30s. viegli-ārā; -moz-pārejas: visas 0.30s.