Codefragmenten 2025, Januari-

A, input, input, label, select, button, .pointer (cursor: pointer;) Sommige elementen waarop op mysterieuze wijze kan worden geklikt, activeren geen cursor in "

Html (overflow-y: scroll;) Dit is ongeldige CSS, maar het werkt in alles behalve Opera. De reden hiervoor is om "centreersprongen" te voorkomen wanneer "

Op het moment van schrijven werkt dit alleen in Chrome 18+, maar het is gestandaardiseerd, zodat uiteindelijk overal ondersteuning zal komen. @media print (body ("

Firefox en IE hebben de knop "bestand kiezen" rechts van het bestandspad, terwijl WebKit het aan de linkerkant plaatst. Hierdoor plaatst WebKit het aan de rechterkant als "

* Times New Roman-based stack * / font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New"

Syntaxis body (font: font-style font-variant font-weight font-size / line-height font-family;) In gebruik body (font: italic small-caps normal 13px / 150% Arial, "

* (margin: 0; padding: 0;) html, body (hoogte: 100%;) body #fixedElement (position: fixed! important; position: absoluut; / * ie6 en hoger * / top: 0; "

#footer (position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: # 999;) / * IE 6 * / * html #footer (position: absoluut; "

Onze uitgebreide gids voor CSS flexbox-lay-out. In deze complete gids wordt alles uitgelegd over flexbox, met de nadruk op alle verschillende mogelijke eigenschappen voor het ouderelement (de flexcontainer) en de kindelementen (de flexitems). Het bevat ook geschiedenis, demo's, patronen en een diagram voor browserondersteuning. "

Dan Cederholm heeft lang het Baskerville Italic ampersand gebruikt en zegt ons dat we het beste beschikbare ampersand moeten gebruiken (ook hier). Voor beter of slechter, dit heeft "

U kunt afbeeldingen omdraaien met CSS! Mogelijk scenario: slechts één afbeelding hebben voor een "pijl", maar deze omdraaien om in verschillende richtingen te wijzen. "

Van het v8-ontwerp van CSS-Tricks. Bekijk demo nav (achtergrond: # 444; border-bottom: 8px solid # E6E2DF; overflow: verborgen; positie: relatief; breedte: 100%;) "

De toegankelijke manier Je kunt het beste de 5 minuten durende video van Ethan bekijken en dan hiernaar verwijzen: CodePen Embed Fallback The cross-browser way (extra markup) "

.center (breedte: 300px; hoogte: 300px; positie: absoluut; links: 50%; boven: 50%; margin-left: -150px; margin-top: -150px;) Negatieve marges zijn exact "

P: last-child: after (content: "2766"; / * Hier komt het klimopblad * / font-size: 150%; / * Maakt het blad groter dan de normale tekst * / padding-left: 10px; "

# example-gradient (hoogte: 200px; marge: 0 0 20px 0; background-color: #eaeaea; background-size: 20px 20px; background-image: "

HTML Je kunt ze maken met een enkele div. Het is leuk om lessen te hebben voor elke richtingsmogelijkheid. CSS Het idee is een doos zonder breedte en hoogte. De"

Als je geïnteresseerd bent in Webkit / Blink / Chrome-specifieke styling, is er een gepatenteerd pseudo-element om te verbergen, en gebruik dan een ook niet-standaard "

Wordt gebruikt bij het werpen van schaduwen van elementen op blokniveau (zoals divs). .shadow (-moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; "

#foo: gecontroleerd :: voor, invoer (positie: absoluut; clip: rect (0,0,0,0); clip: rect (0 0 0 0);) #foo: gecontroleerd, invoer + label :: voor ( inhoud:"

Het herhalen van verlopen is een truc die we al kunnen doen met het creatieve gebruik van kleurstops in de notaties linear-gradient () en radial-gradient (), en "

De selectors hier zijn specifiek voor Wufoo-opmaak, maar de concepten op het werk kunnen voor elke vorm werken. Het algemene idee is dat u de standaardradio maakt "

Normale tekstschaduw: p (text-shadow: 1px 1px 1px # 000;) Meerdere schaduwen: p (text-shadow: 1px 1px 1px # 000, 3px 3px 5px blauw;) De eerste twee waarden "

Dit is een verzameling startersjablonen voor lay-outs en patronen met CSS Grid. Het idee hier is om te laten zien wat de techniek kan en "

Firefox 2 html> / ** / body .selector, x: -moz-any-link (color: lime;) Firefox 3 html> / ** / body .selector, x: -moz-any-link, x: default (color: lime;) Any "

Een belangrijke reden om het vooraf laden van afbeeldingen te gebruiken, is als u een afbeelding wilt gebruiken voor de achtergrondafbeelding van een element op een mouseOver- of: hover-gebeurtenis. Als je maar "

Zoek fouten in HTML en benadruk de onzin ervan. / * Lege elementen * / div: leeg, span: leeg, li: leeg, p: leeg, td: leeg, th: leeg (padding: "

Sans-Serif Arial, sans-serif; Helvetica, schreefloos; Gill Sans, schreefloos; Lucida, schreefloos; Helvetica Smal, schreefloos; schreefloos; Serif Times, "

Tbody tr: nth-child (odd) (background-color: #ccc;) "

Tegenwoordig hoeft u zich echt geen zorgen te maken dat dekking een moeilijke zaak is in verschillende browsers. U gebruikt gewoon de ondoorzichtigheidseigenschap, zoals deze: .thing ("