Codefragmenten 2025, Januari-

Hoeklint - CSS-trucs

Hoeklint - CSS-trucs

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); "

Min. Hoogte cross-browser - CSS-trucs

Min. Hoogte cross-browser - CSS-trucs

Div (min-hoogte: 500px; hoogte: auto! belangrijk; hoogte: 500px;) Dit werkt omdat (gelukkig?) IE behandelt "hoogte" hoe "min-hoogte" hoort te zijn "

Cross Browser Inline-Block - CSS-trucs

Cross Browser Inline-Block - CSS-trucs

Li (breedte: 200px; min-hoogte: 250px; grens: 1px solid # 000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: "

Comprimeer CSS met PHP - CSS-trucs

Comprimeer CSS met PHP - CSS-trucs

Start uw CSS-bestanden met deze PHP (en noem het style.php): body (color: red;) Roep vervolgens uw CSS aan met de PHP-bestandsnaam: "

Algemene Unicode-pictogrammen - CSS-trucs

Algemene Unicode-pictogrammen - CSS-trucs

A: before (content: "2709";) .phone: before (content: "2706";) .important: before (content: "27BD";) blockquote: before (content: "275D";) "

Opmerkingen in CSS - CSS-trucs

Opmerkingen in CSS - CSS-trucs

Voorbeeld: body (font-size: 62,5% / * 1em = 10px * /) De dingen in de / * * / -markeringen zijn CSS-opmerkingen. Hiermee kunt u notities in CSS invoeren die "

The Clearfix: Forceer een element om zijn kinderen zelf te zuiveren - CSS-trucs

The Clearfix: Forceer een element om zijn kinderen zelf te zuiveren - CSS-trucs

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 "

Wijzig Autocomplete-stijlen in WebKit-browsers - CSS-trucs

Wijzig Autocomplete-stijlen in WebKit-browsers - CSS-trucs

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 "

Een website centreren - CSS-trucs

Een website centreren - CSS-trucs

# page-wrap (breedte: 800px; marge: 0 auto;) "

Tekstselectiekleur wijzigen - CSS-trucs

Tekstselectiekleur wijzigen - CSS-trucs

:: selectie (achtergrondkleur: #FFA; kleur: # 000;) (Meer info) "

Apple Pay-knoppen in CSS - CSS-trucs

Apple Pay-knoppen in CSS - CSS-trucs

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,"

Browser-specifieke hacks - CSS-trucs

Browser-specifieke hacks - CSS-trucs

***** Selector Hacks ****** / / * IE6 en lager * / * html #uno (kleur: rood) / * IE7 * / *: eerste kind + html #dos (kleur: rood) / * IE7, FF, Saf, Opera * / "

Center DIV met dynamische hoogte - CSS-trucs

Center DIV met dynamische hoogte - CSS-trucs

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

Geanimeerde korrelige textuur - CSS-trucs

Geanimeerde korrelige textuur - CSS-trucs

De DayTrip-website gebruikt een mooi effect op de paginakop die de achtergrondafbeelding vervormt met een geanimeerde, korrelige textuur. Het effect is subtiel maar "

Bouncy Animated Loading Animation - CSS-trucs

Bouncy Animated Loading Animation - CSS-trucs

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 ("

Wazige tekst - CSS-trucs

Wazige tekst - CSS-trucs

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 "

Basisprincipes van Google Font API - CSS-trucs

Basisprincipes van Google Font API - CSS-trucs

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 '

Absoluut centrum (verticaal en horizontaal) een afbeelding - CSS-trucs

Absoluut centrum (verticaal en horizontaal) een afbeelding - CSS-trucs

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 ("

Betere Helvetica - CSS-trucs

Betere Helvetica - CSS-trucs

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

Basic Link Rollover als CSS Sprite - CSS-trucs

Basic Link Rollover als CSS Sprite - CSS-trucs

A (background: url (sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px;) a: hover (background-position: 0 -30px;) De ingestelde hoogte en "

Toegankelijkheid / SEO-vriendelijke CSS verbergen - CSS-trucs

Toegankelijkheid / SEO-vriendelijke CSS verbergen - CSS-trucs

.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 stylesheet-mediatypen - CSS-trucs

Alle stylesheet-mediatypen - CSS-trucs

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.com Hamburgerbroodjesmenu - CSS-trucs

Apple.com Hamburgerbroodjesmenu - CSS-trucs

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 "