Kodebiter 2025, April

Hjørne bånd - CSS-triks

NYHETER. Wrapper (margin: 50px auto; bredde: 280px; høyde: 370px; bakgrunn: hvit; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba (0,0,0,0.3); "

Tverr nettleser min høyde - CSS-triks

Div (min-høyde: 500px; høyde: auto! viktig; høyde: 500px;) Dette fungerer fordi (heldigvis?) IE behandler "høyde" hvordan "min-høyde" skal være "

Cross Browser Inline-Block - CSS-triks

Li (bredde: 200px; min. høyde: 250px; border: 1px solid # 000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: "

Komprimer CSS med PHP - CSS-triks

Start CSS-filene dine med denne PHP (og gi den navnet style.php): body (farge: rød;) Ring deretter CSS med PHP-filnavnet: "

Vanlige Unicode-ikoner - CSS-triks

A: før (innhold: "2709";) .telefon: før (innhold: "2706";). viktig: før (innhold: "27BD";) blockquote: før (innhold: "275D";) "

Kommentarer i CSS - CSS-triks

Eksempel: body (skriftstørrelse: 62,5% / * 1em = 10px * /) Tingene i / * * / merkene er CSS-kommentarer. Dette lar deg legge inn notater i CSS som vil "

Clearfix: Tving et element til å selv rydde sine barn - CSS-triks

Dette vil gjøre deg bra i disse dager (IE 8 og oppover): .group: after (content: ""; display: table; clear: both;) Bruk den på et hvilket som helst overordnet element der du "

Endre autofullfør stiler i WebKit-nettlesere CSS-triks

Vi fikk et fint tips fra Lydia Dugger via e-post med en metode for å endre stilene som WebKit-nettlesere bruker på skjemafelt som har blitt "

Sentrere et nettsted - CSS-triks

# side-wrap (bredde: 800 px; margin: 0 automatisk;) "

Endre farge for tekstvalg - CSS-triks

:: utvalg (bakgrunnsfarge: #FFA; farge: # 000;) (Mer info) "

Apple Pay-knapper i CSS - CSS-triks

Du trenger ikke å designe dine egne knapper for Apple Pay. Faktisk forteller Apple deg bokstavelig talt at du ikke kan. Så hva skal du gjøre på nettet? Heldigvis, "

Nettleserspesifikke hack - CSS-triks

***** Selector Hacks ****** / / * IE6 og under * / * html #uno (farge: rød) / * IE7 * / *: første barn + html #dos (farge: rød) / * IE7, FF, Saf, Opera * / "

Center DIV med dynamisk høyde - CSS-triks

CSS: * (margin: 0; polstring: 0;) #page (display: table; overflow: hidden; margin: 0px auto;) *: first-child + html #page (position: relative;) / * ie7 * / * html "

Animert kornete tekstur CSS-triks

Nettstedet DayTrip bruker en pen effekt på sidetittelen som forvrenger bakgrunnsbildet med en animert, kornete tekstur. Effekten er subtil, men "

Bouncy Animated Loading Animation - CSS-triks

Bare noen funzies med CSS3-animasjoner. Hvis du er bekymret for super dyp nettleserstøtte, bruk en GIF. .loader (text-align: center;) .loader span ("

Uklart tekst - CSS-triks

Gjør tekstfargen gjennomsiktig, men legg til en skygge: .blur (farge: gjennomsiktig; tekst-skygge: 0 0 5px rgba (0,0,0,0.5);) Uskarpt Flere nettlesere støtter farge "

Grunnleggende om Google Font API - CSS-triks

Koble til CSS-filer Du kobler i hovedsak direkte til CSS-filer på Google.com. Gjennom URL-parametere spesifiserer du hvilke skrifter du vil ha, og hva "

Absolutt senter (vertikalt og horisontalt) et bilde - CSS-triks

CSS bakgrunnsbildeteknikk: html (bredde: 100%; høyde: 100%; bakgrunn: url (7518965 / absolute_center_vertical_horizontal_an_image_css-tricks.png.webp) center center no-repeat;) CSS + Inline Image Technique: img ("

Bedre Helvetica - CSS-triks

Kropp (font-familie: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;) "

Grunnleggende lenkeoverføring som CSS Sprite - CSS-triks

A (bakgrunn: url (sprite.png.webp) ingen repetisjon; display: blokk; høyde: 30 px; bredde: 250 px;) a: svever (bakgrunnsposisjon: 0 -30 px;) Den innstilte høyden og