Kodebiter 2025, April

Forhindre sprett av sprett i løven - CSS-triks

Forhindre sprett av sprett i løven - CSS-triks

Bare vær sikker på at du også nullstiller margen og polstring på disse elementene (normalt i tilbakestilling eller normalisering). html, kropp (høyde: 100%; overløp: "

Picross Style knapper - CSS-triks

Picross Style knapper - CSS-triks

Som i spillet PICROSS3D. CSS3 Technique Button Button Button .btn (farge: hvit; font-familie: Helvetica, Arial, Sans-Serif; font-størrelse: "

Gjør ikke-passordinnganger Bruk punkter (eller punktalternativer) - CSS-triks

Gjør ikke-passordinnganger Bruk punkter (eller punktalternativer) - CSS-triks

Dette fungerer på tekstinnganger (f.eks. Tekst, e-post osv.), Men du kan ikke endre faktiske passordinnganger. Bruk sak = ???. input (-webkit-text-security: none;) "

Navngitte farger og sekskvivalenter - CSS-triks

Navngitte farger og sekskvivalenter - CSS-triks

Fargenavn HEX Farge AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "

Nestede og utvidbare mapper - CSS-triks

Nestede og utvidbare mapper - CSS-triks

Dette var en demo opprinnelig av Martin Ivanov, ved hjelp av skjulte avkrysningsruter og tilstøtende søskenkombinatorer for å sette "tilstanden" til hver mappe. Live demo "

Flere kolonner - CSS-triks

Flere kolonner - CSS-triks

Her er et eksempel på en enkel tre-kolonneklasse:. Tre-kol (-moz-kolonne-antall: 3; -moz-kolonne-gap: 20px; -webkit-kolonne-antall: 3; -webkit-kolonne-gap : "

Side krøllskygger - CSS-triks

Side krøllskygger - CSS-triks

Ul.box (posisjon: relativ; z-indeks: 1; / * forhindrer at skygger faller bak containere med bakgrunn * / overflow: skjult; listestil: ingen; margin: 0; "

Orienteringslås - CSS-triks

Orienteringslås - CSS-triks

@media-skjerm og (min-bredde: 320px) og (maks-bredde: 767px) og (retning: liggende) (html (transform: roter (-90deg); transform-origin: venstre topp; "

Ikke forferdelig størrelse på størrelse i IE - CSS-triks

Ikke forferdelig størrelse på størrelse i IE - CSS-triks

Img (-ms-interpolation-mode: bicubic;) Hvis du skalerer ned et bilde med bredde- og / eller høydeattributter, vil det se forferdelig ut i IE med mindre du bruker "

Ikke-formet feltoppsett - CSS-triks

Ikke-formet feltoppsett - CSS-triks

Dette er ikke et feltsett

Booyah!

.fieldset (posisjon: relative; border: 1px solid "

Flere grenser - CSS-triks

Flere grenser - CSS-triks

Bruke pseudo-element (er) Du kan plassere et pseudo-element slik at det er enten bak elementet, og større, og gir en grenseeffekt med det eget "

Nøkkelramme-animasjonssyntaks - CSS-triks

Nøkkelramme-animasjonssyntaks - CSS-triks

Grunnleggende erklæring og bruk @ -webkit-keyframes NAVN-DIN-ANIMASJON (0% (opacity: 0;) 100% (opacity: 1;)) @ -moz-keyframes NAME-YOUR-ANIMATION (0% ("

Momentum Scrolling på iOS Overflow Elements - CSS-triks

Momentum Scrolling på iOS Overflow Elements - CSS-triks

Nettsider på iOS har som standard en "momentum" -rulling der et fingervipp sender websiden til å rulle og den fortsetter til til slutt "

Flere bakgrunner Syntaks - CSS-triks

Flere bakgrunner Syntaks - CSS-triks

Nettlesere som støtter flere bakgrunner (WebKit fra de aller første dager, Firefox 3+) bruker en syntaks som dette: #box (bakgrunn: url (icon.png.webp) øverst til venstre "

Meyer Reset - CSS-triks

Meyer Reset - CSS-triks

Html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, stor, sitere, kode, del, dfn, em, font, "

Lag "Pre" tekstinnpakning - CSS-triks

Lag "Pre" tekstinnpakning - CSS-triks

Tekst i

 -koder brytes ikke som standard. Se for eksempel kodebiten nedenfor! Hvis dette forårsaker layoutproblemer, er en løsning å gi "

Monotone et bilde med CSS - CSS-triks

Monotone et bilde med CSS - CSS-triks

Du kan alltid bruke et filter på et element for å gjøre det ensformig i gråtoneforstand: Se pennen monotone et bilde av Chris Coyier (@chriscoyier) "

Lagvis papir - CSS-triks

Lagvis papir - CSS-triks

Howdy .layered-paper (bakgrunn: #eee; box-shadow: 0 1px 1px rgba (0,0,0,0.15), / * Toppsjiktet skygge * / 0 10px 0 -5px #eee, / * Det andre laget * / 0 "

Mixins for Rem Font Sizing - CSS-triks

Mixins for Rem Font Sizing - CSS-triks

Rem skriftstørrelsesenheten ligner på em, bare i stedet for å cascading er den alltid relativt til root (html) -elementet (mer informasjon). Dette har ganske "

Link Pseudo-klasser (i rekkefølge) - CSS-triks

Link Pseudo-klasser (i rekkefølge) - CSS-triks

A: link (farge: blå;) a: besøkt (farge: lilla;) a: svever (farge: rød;) a: aktiv (farge: gul;) Link, Besøkt, Sveve, Aktiv L, V, H, A Elsk hat"

Skjul rullefelt i Edge, IE 10/11 - CSS-triks

Skjul rullefelt i Edge, IE 10/11 - CSS-triks

Du kan gjøre det automatisk skjult i stedet for alltid å vise: html (-ms-overløp-stil: -ms-autohiding-rullefelt;) Slår ut slik: Kreditt til Thierry "

Væsketypografi - CSS-triks

Væsketypografi - CSS-triks

Når du kommer rett til koden, er det en fungerende implementering: html (fontstørrelse: 16px;) @media-skjerm og (min bredde: 320px) (html (font-size: calc (16px + ")

Håndtering av lange ord og nettadresser (tvinger pauser, orddeling, ellipser osv.) CSS-triks

Håndtering av lange ord og nettadresser (tvinger pauser, orddeling, ellipser osv.) CSS-triks

Vi har flyttet dette utdraget til det kanoniske utdraget vårt om dette emnet. Se: Håndtering av lange ord og nettadresser "

IPad-spesifikk CSS - CSS-triks

IPad-spesifikk CSS - CSS-triks

@media bare skjerm og (enhetsbredde: 768px) (/ * For generelle iPad-oppsett * /) @media bare skjerm og (min enhetsbredde: 481px) og (maks enhetsbredde: "

Internasjonalisering Språk CSS - CSS-triks

Internasjonalisering Språk CSS - CSS-triks

* Språkspesifikk * /: lang (af) (sitater: '201E' '201D' '201A' '2020-2021';): lang (ak) (font-familie: Lucida, "DejaVu Sans", arver; ): lang (ar) (font-familie: Tahoma "

Sekskant med skygge - CSS-triks

Sekskant med skygge - CSS-triks

.heksagon (bredde: 100px; høyde: 55px; posisjon: relativ;). sekskant, .heksagon: før, .heksagon: etter (bakgrunn: rød; boksskygge: 0 0 10px "

Gradienttekst - CSS-triks

Gradienttekst - CSS-triks

Dette er bare WebKit, men er den reneste måten å oppnå det ettersom teksten forblir redigerbar og valgbar webtekst. h1 (skriftstørrelse: 72px; bakgrunn: "

Gradient Understreker - CSS-triks

Gradient Understreker - CSS-triks

A (posisjon: relativ; polstringsbunn: 2px; tekstdekorasjon: ingen;) a: svever :: etter (innhold: ""; posisjon: absolutt; bunn: 2px; venstre: 0; høyde: 1px; "

Glødende blå inngangshøydepunkter - CSS-triks

Glødende blå inngangshøydepunkter - CSS-triks

Som midten av 2012 Twitter. input, textarea (-webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s "