Codefragmenten 2025, Januari-

Voorkom Bounce Scroll in Lion - CSS-trucs

Voorkom Bounce Scroll in Lion - CSS-trucs

Zorg ervoor dat u ook de marge en opvulling op die elementen nult (normaal bij elke reset of normalisatie). html, body (hoogte: 100%; overloop: "

Picross-stijlknoppen - CSS-trucs

Picross-stijlknoppen - CSS-trucs

Net als in het spel PICROSS3D. CSS3 Techniek Knop Knop Knop .btn (kleur: wit; font-family: Helvetica, Arial, Sans-Serif; font-size: "

Zorg dat invoer zonder wachtwoord opsommingstekens (of alternatieven voor opsommingstekens) gebruikt - CSS-trucs

Zorg dat invoer zonder wachtwoord opsommingstekens (of alternatieven voor opsommingstekens) gebruikt - CSS-trucs

Dit werkt met tekstinvoer (bijv. Tekst, e-mail, enz.), Maar u kunt de daadwerkelijke wachtwoordinvoer niet wijzigen. Gebruik case = ???. input (-webkit-text-security: none;) "

Benoemde kleuren en hexadecimale equivalenten - CSS-trucs

Benoemde kleuren en hexadecimale equivalenten - CSS-trucs

Kleurnaam HEX Kleur AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "

Geneste en uitvouwbare mappen - CSS-trucs

Geneste en uitvouwbare mappen - CSS-trucs

Dit was een demo die oorspronkelijk door Martin Ivanov was gemaakt, waarbij verborgen selectievakjes en aangrenzende combinators van broers en zussen werden gebruikt om de "status" van elke map in te stellen. De live demo "

Meerdere kolommen - CSS-trucs

Meerdere kolommen - CSS-trucs

Hier is een voorbeeld van een eenvoudige klasse met drie kolommen: .three-col (-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : "

Paginakrulschaduwen - CSS-trucs

Paginakrulschaduwen - CSS-trucs

Ul.box (positie: relatief; z-index: 1; / * voorkom dat schaduwen achter containers met achtergronden vallen * / overflow: verborgen; lijststijl: geen; marge: 0; "

Oriëntatievergrendeling - CSS-trucs

Oriëntatievergrendeling - CSS-trucs

@media scherm en (min-breedte: 320px) en (max-breedte: 767px) en (oriëntatie: liggend) (html (transform: rotate (-90deg); transform-origin: left top; "

Niet-verschrikkelijke afbeeldingsaanpassing in IE - CSS-trucs

Niet-verschrikkelijke afbeeldingsaanpassing in IE - CSS-trucs

Img (-ms-interpolation-mode: bicubic;) Als je een afbeelding verkleint met de attributen breedte en / of hoogte, zal het er vreselijk uitzien in IE, tenzij je "

Uiterlijk niet-formulierveldset - CSS-trucs

Uiterlijk niet-formulierveldset - CSS-trucs

Dit is geen fieldset

Booyah!

.fieldset (position: relatief; border: 1px solid "

Meerdere grenzen - CSS-trucs

Meerdere grenzen - CSS-trucs

Pseudo-element (en) gebruiken U kunt een pseudo-element zo plaatsen dat het achter het element of groter is, waardoor een randeffect ontstaat met zijn eigen "

Syntaxis van keyframe-animatie - CSS-trucs

Syntaxis van keyframe-animatie - CSS-trucs

Basisverklaring en gebruik @ -webkit-keyframes NAAM-UW-ANIMATIE (0% (dekking: 0;) 100% (dekking: 1;)) @ -moz-keyframes NAAM-UW-ANIMATIE (0% ("

Momentum scrollen op iOS Overflow-elementen - CSS-trucs

Momentum scrollen op iOS Overflow-elementen - CSS-trucs

Webpagina's op iOS hebben standaard een "momentum" -stijl scrollen waarbij een beweging van de vinger de webpagina laat scrollen en het blijft doorgaan tot uiteindelijk "

Syntaxis voor meerdere achtergronden - CSS-trucs

Syntaxis voor meerdere achtergronden - CSS-trucs

Browsers die meerdere achtergronden ondersteunen (WebKit vanaf het allereerste begin, Firefox 3+) gebruiken de volgende syntaxis: #box (background: url (icon.png.webp) linksboven "

Meyer Reset - CSS-trucs

Meyer Reset - CSS-trucs

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, afkorting, acroniem, adres, big, cite, code, del, dfn, em, lettertype, "

Maak "Pre" tekstomloop - CSS-trucs

Maak "Pre" tekstomloop - CSS-trucs

Tekst in

 -tags loopt niet standaard terug. Zie bijvoorbeeld het onderstaande codefragment! Als dit lay-outproblemen veroorzaakt, is een oplossing om de "

Een afbeelding monotoon maken met CSS - CSS-trucs

Een afbeelding monotoon maken met CSS - CSS-trucs

Je kunt altijd een filter toepassen op een element om het monotoon in grijstinten te maken: zie de pen een afbeelding monotoon maken door Chris Coyier (@chriscoyier) "

Gelaagd papier - CSS-trucs

Gelaagd papier - CSS-trucs

Howdy .layered-paper (achtergrond: #eee; box-shadow: 0 1px 1px rgba (0,0,0,0.15), / * De bovenste laag schaduw * / 0 10px 0 -5px #eee, / * De tweede laag * / 0 "

Mixins voor Rem Font Sizing - CSS-trucs

Mixins voor Rem Font Sizing - CSS-trucs

De rem font-size unit is vergelijkbaar met em, alleen in plaats van trapsgewijs is deze altijd relatief ten opzichte van het root (html) element (meer informatie). Dit heeft behoorlijk "

Koppel pseudo-klassen (in volgorde) - CSS-trucs

Koppel pseudo-klassen (in volgorde) - CSS-trucs

A: link (kleur: blauw;) a: bezocht (kleur: paars;) a: hover (kleur: rood;) a: actief (kleur: geel;) Link, Bezocht, Hover, Actief L, V, H, A Liefde, HAte "

Verberg schuifbalk in Edge, IE 10/11 - CSS-trucs

Verberg schuifbalk in Edge, IE 10/11 - CSS-trucs

Je kunt het automatisch laten verbergen in plaats van altijd te laten zien: html (-ms-overflow-style: -ms-autohiding-scrollbar;) Blijkt als volgt: Met dank aan Thierry "

Vloeiende typografie - CSS-trucs

Vloeiende typografie - CSS-trucs

Om meteen bij de code te komen, hier is een werkende implementatie: html (font-size: 16px;) @ media screen en (min-width: 320px) (html (font-size: calc (16px + "

Omgaan met lange woorden en URL's (afbrekingen forceren, woordafbreking, ellips, enz.) - CSS-trucs

Omgaan met lange woorden en URL's (afbrekingen forceren, woordafbreking, ellips, enz.) - CSS-trucs

We hebben dit fragment verplaatst naar ons canonieke fragment over dit onderwerp. Zie: Omgaan met lange woorden en URL's "

IPad-specifieke CSS - CSS-trucs

IPad-specifieke CSS - CSS-trucs

Scherm met alleen @media en (device-width: 768px) (/ * Voor algemene iPad-lay-outs * /) Scherm met alleen @media en (min-device-width: 481px) en (max-device-width: "

Internationalisering Taal CSS - CSS-trucs

Internationalisering Taal CSS - CSS-trucs

* Taalspecifiek * /: lang (af) (citaten: '201E' '201D' '201A' '2020-2021';): lang (ak) (font-family: Lucida, "DejaVu Sans", erven; ): lang (ar) (font-family: Tahoma "

Zeshoek met schaduw - CSS-trucs

Zeshoek met schaduw - CSS-trucs

.hexagon (breedte: 100px; hoogte: 55px; positie: relatief;) .hexagon, .hexagon: before, .hexagon: after (background: red; box-shadow: 0 0 10px "

Verlooptekst - CSS-trucs

Verlooptekst - CSS-trucs

Dit is alleen WebKit, maar het is de schoonste manier om dit te bereiken, aangezien de tekst bewerkbaar en selecteerbaar webtekst blijft. h1 (font-size: 72px; background: "

Verloop onderstreept - CSS-trucs

Verloop onderstreept - CSS-trucs

A (position: relatief; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absolute; bottom: 2px; left: 0; hoogte: 1px; "

Gloeiende blauwe invoerhoogtepunten - CSS-trucs

Gloeiende blauwe invoerhoogtepunten - CSS-trucs

Zoals medio 2012 Twitter. input, textarea (-webkit-transition: alle 0.30s gemak-in-uit; -moz-overgang: alle 0.30s gemak-in-uit; -ms-overgang: alle 0.30s "