Codefragmenten 2025, Januari-
Zorg ervoor dat u ook de marge en opvulling op die elementen nult (normaal bij elke reset of normalisatie). html, body (hoogte: 100%; overloop: "
Net als in het spel PICROSS3D. CSS3 Techniek Knop Knop Knop .btn (kleur: wit; font-family: Helvetica, Arial, Sans-Serif; font-size: "
Dit werkt met tekstinvoer (bijv. Tekst, e-mail, enz.), Maar u kunt de daadwerkelijke wachtwoordinvoer niet wijzigen. Gebruik case = ???. input (-webkit-text-security: none;) "
Kleurnaam HEX Kleur AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "
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 "
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 : "
Ul.box (positie: relatief; z-index: 1; / * voorkom dat schaduwen achter containers met achtergronden vallen * / overflow: verborgen; lijststijl: geen; marge: 0; "
@media scherm en (min-breedte: 320px) en (max-breedte: 767px) en (oriëntatie: liggend) (html (transform: rotate (-90deg); transform-origin: left top; "
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 "
Achtergrond afbeelding:"
Booyah! Dit is geen fieldset
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 "
Basisverklaring en gebruik @ -webkit-keyframes NAAM-UW-ANIMATIE (0% (dekking: 0;) 100% (dekking: 1;)) @ -moz-keyframes NAAM-UW-ANIMATIE (0% ("
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 "
Browsers die meerdere achtergronden ondersteunen (WebKit vanaf het allereerste begin, Firefox 3+) gebruiken de volgende syntaxis: #box (background: url (icon.png.webp) linksboven "
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, "
Tekst in
-tags loopt niet standaard terug. Zie bijvoorbeeld het onderstaande codefragment! Als dit lay-outproblemen veroorzaakt, is een oplossing om de "
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) "
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 "
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 "
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 "
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 "
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 + "
We hebben dit fragment verplaatst naar ons canonieke fragment over dit onderwerp. Zie: Omgaan met lange woorden en URL's "
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: "
* Taalspecifiek * /: lang (af) (citaten: '201E' '201D' '201A' '2020-2021';): lang (ak) (font-family: Lucida, "DejaVu Sans", erven; ): lang (ar) (font-family: Tahoma "
.hexagon (breedte: 100px; hoogte: 55px; positie: relatief;) .hexagon, .hexagon: before, .hexagon: after (background: red; box-shadow: 0 0 10px "
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: "
A (position: relatief; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absolute; bottom: 2px; left: 0; hoogte: 1px; "
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 "