Codefragmenten 2025, Januari-
NIEUWS .wrapper (marge: 50px auto; breedte: 280px; hoogte: 370px; achtergrond: wit; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba (0,0,0,0.3); "
Div (min-hoogte: 500px; hoogte: auto! belangrijk; hoogte: 500px;) Dit werkt omdat (gelukkig?) IE behandelt "hoogte" hoe "min-hoogte" hoort te zijn "
Li (breedte: 200px; min-hoogte: 250px; grens: 1px solid # 000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: "
Start uw CSS-bestanden met deze PHP (en noem het style.php): body (color: red;) Roep vervolgens uw CSS aan met de PHP-bestandsnaam: "
A: before (content: "2709";) .phone: before (content: "2706";) .important: before (content: "27BD";) blockquote: before (content: "275D";) "
Voorbeeld: body (font-size: 62,5% / * 1em = 10px * /) De dingen in de / * * / -markeringen zijn CSS-opmerkingen. Hiermee kunt u notities in CSS invoeren die "
Dit zal je tegenwoordig goed doen (IE 8 en hoger): .group: after (content: ""; display: table; clear: both;) Pas het toe op elk bovenliggend element waarin je "
We kregen een leuke tip van Lydia Dugger via e-mail met een methode om de stijlen te wijzigen die WebKit-browsers toepassen op formuliervelden die zijn "
# page-wrap (breedte: 800px; marge: 0 auto;) "
:: selectie (achtergrondkleur: #FFA; kleur: # 000;) (Meer info) "
U hoeft voor Apple Pay niet uw eigen knoppen te ontwerpen. In feite vertelt Apple je letterlijk dat je dat niet kunt. Dus, wat ga je doen op internet? Dankbaar,"
***** Selector Hacks ****** / / * IE6 en lager * / * html #uno (kleur: rood) / * IE7 * / *: eerste kind + html #dos (kleur: rood) / * IE7, FF, Saf, Opera * / "
CSS: * (margin: 0; padding: 0;) #page (display: table; overflow: hidden; margin: 0px auto;) *: first-child + html #page (position: relatief;) / * ie7 * / * html "
De DayTrip-website gebruikt een mooi effect op de paginakop die de achtergrondafbeelding vervormt met een geanimeerde, korrelige textuur. Het effect is subtiel maar "
Gewoon wat funzies met CSS3-animaties. Als je je zorgen maakt over super diepe browserondersteuning, gebruik dan een GIF. .loader (text-align: center;) .loader span ("
Maak de tekstkleur transparant maar voeg een schaduw toe: .blur (color: transparent; text-shadow: 0 0 5px rgba (0,0,0,0.5);) Wazig Meer browsers ondersteunen kleur "
Link naar CSS-bestanden U hotlinkt in wezen rechtstreeks naar CSS-bestanden op Google.com. Via URL-parameters geeft u aan welke lettertypen u wilt en wat '
CSS achtergrondafbeelding Techniek: html (breedte: 100%; hoogte: 100%; achtergrond: url (7518965 / absolute_center_vertical_horizontal_an_image_css-tricks.png.webp) center center no-repeat;) CSS + Inline Image Techniek: img ("
Body (font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;) "
A (background: url (sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px;) a: hover (background-position: 0 -30px;) De ingestelde hoogte en "
.screen-reader-text (position: absolute; top: -9999px; left: -9999px;) Deze klasse kan een item van de pagina verwijderen, het uit de flow halen en niet "
Alle Gebruikt voor alle mediatype apparaten auditief Gebruikt voor spraak- en geluidssynthesizers braille Gebruikt voor braille tactiele feedback-apparaten in reliëf Gebruikt voor paged "
Apple maakte wat lawaai toen ze een bijgewerkte site uitbrachten, inclusief een geheel nieuwe responsieve navigatie. Hoewel het nieuwe ontwerp op andere dingen was gericht, is er een "