Code Ausschnitte 2025, April

Eckband - CSS-Tricks

Eckband - CSS-Tricks

NEWS .wrapper (Rand: 50px auto; Breite: 280px; Höhe: 370px; Hintergrund: weiß; Randradius: 10px; -webkit-box-shadow: 0px 0px 8px rgba (0,0,0,0,3); "

Browserübergreifende Mindesthöhe - CSS-Tricks

Browserübergreifende Mindesthöhe - CSS-Tricks

Div (min-height: 500px; height: auto! wichtig; height: 500px;) Dies funktioniert, weil (zum Glück?) IE "height" so behandelt, wie "min-height" sein soll "

Browserübergreifender Inline-Block - CSS-Tricks

Browserübergreifender Inline-Block - CSS-Tricks

Li (Breite: 200px; Mindesthöhe: 250px; Rand: 1px durchgehend # 000; Anzeige: -moz-inline-Stapel; Anzeige: Inline-Block; vertikale Ausrichtung: oben; Rand: 5px; Zoom: "

Komprimieren Sie CSS mit PHP - CSS-Tricks

Komprimieren Sie CSS mit PHP - CSS-Tricks

Starten Sie Ihre CSS-Dateien mit diesem PHP (und nennen Sie es style.php): body (Farbe: rot;) Rufen Sie dann Ihr CSS mit dem PHP-Dateinamen auf: "

Allgemeine Unicode-Symbole - CSS-Tricks

Allgemeine Unicode-Symbole - CSS-Tricks

A: vor (Inhalt: "2709";). Telefon: vor (Inhalt: "2706";) .wichtig: vor (Inhalt: "27BD";) blockquote: vor (Inhalt: "275D";) "

Kommentare in CSS - CSS-Tricks

Kommentare in CSS - CSS-Tricks

Beispiel: body (Schriftgröße: 62,5% / * 1em = 10px * /) Die Inhalte in den Markierungen / * * / sind CSS-Kommentare. Auf diese Weise können Sie Notizen in CSS eingeben, die "

Der Clearfix: Erzwingen Sie, dass ein Element seine untergeordneten Elemente selbst löscht CSS-Tricks

Der Clearfix: Erzwingen Sie, dass ein Element seine untergeordneten Elemente selbst löscht CSS-Tricks

Dies wird Ihnen heutzutage gut tun (IE 8 und höher): .group: after (Inhalt: ""; Anzeige: Tabelle; Löschen: beides;) Wenden Sie es auf jedes übergeordnete Element an, in dem Sie "

Ändern der Autocomplete-Stile in WebKit-Browsern - CSS-Tricks

Ändern der Autocomplete-Stile in WebKit-Browsern - CSS-Tricks

Wir haben einen netten Tipp von Lydia Dugger per E-Mail mit einer Methode zum Ändern der Stile erhalten, die WebKit-Browser auf Formularfelder anwenden, die "

Website zentrieren - CSS-Tricks

Website zentrieren - CSS-Tricks

# Seitenumbruch (Breite: 800px; Rand: 0 automatisch;) "

Ändern der Textauswahlfarbe - CSS-Tricks

Ändern der Textauswahlfarbe - CSS-Tricks

:: Auswahl (Hintergrundfarbe: #FFA; Farbe: # 000;) (Weitere Informationen) "

Apple Pay Buttons in CSS - CSS-Tricks

Apple Pay Buttons in CSS - CSS-Tricks

Sie müssen keine eigenen Schaltflächen für Apple Pay entwerfen. In der Tat sagt Apple Ihnen buchstäblich, dass Sie nicht können. Also, was machst du im Web? Gott sei Dank,"

Browserspezifische Hacks - CSS-Tricks

Browserspezifische Hacks - CSS-Tricks

***** Selector Hacks ****** / / * IE6 und darunter * / * html #uno (Farbe: rot) / * IE7 * / *: erstes Kind + html #dos (Farbe: rot) / * IE7, FF, Saf, Opera * / "

Center DIV mit dynamischer Höhe - CSS-Tricks

Center DIV mit dynamischer Höhe - CSS-Tricks

CSS: * (Rand: 0; Auffüllen: 0;) #Seite (Anzeige: Tabelle; Überlauf: Versteckt; Rand: 0px Auto;) *: Erstes Kind + HTML #Seite (Position: Relativ;) / * ie7 * / * html "

Animierte körnige Textur - CSS-Tricks

Animierte körnige Textur - CSS-Tricks

Die DayTrip-Website verwendet einen übersichtlichen Effekt in ihrem Seitenkopf, der das Hintergrundbild mit einer animierten, körnigen Textur verzerrt. Der Effekt ist subtil aber "

Bouncy Animated Loading Animation - CSS-Tricks

Bouncy Animated Loading Animation - CSS-Tricks

Nur ein paar Funzies mit CSS3-Animationen. Wenn Sie sich Sorgen über eine extrem tiefe Browserunterstützung machen, verwenden Sie ein GIF. .loader (Textausrichtung: Mitte;) .loader span ("

Verschwommener Text - CSS-Tricks

Verschwommener Text - CSS-Tricks

Machen Sie die Textfarbe transparent, aber fügen Sie einen Schatten hinzu: .blur (Farbe: transparent; Textschatten: 0 0 5px rgba (0,0,0,0.5);) Blurry Mehr Browser unterstützen Farbe "

Grundlagen der Google Font API - CSS-Tricks

Grundlagen der Google Font API - CSS-Tricks

Verknüpfen mit CSS-Dateien Sie verknüpfen im Wesentlichen direkt mit CSS-Dateien auf Google.com. Durch URL-Parameter geben Sie an, welche Schriftarten Sie möchten und welche "

Absolutes Zentrum (vertikal & horizontal) eines Bildes - CSS-Tricks

Absolutes Zentrum (vertikal & horizontal) eines Bildes - CSS-Tricks

CSS-Hintergrundbildtechnik: HTML (Breite: 100%; Höhe: 100%; Hintergrund: URL (7518965 / absolute_center_vertical_horizontal_an_image_css-tricks.png.webp) Center Center No-Repeat;) CSS + Inline-Bildtechnik: img ("

Bessere Helvetica - CSS-Tricks

Bessere Helvetica - CSS-Tricks

Körper (Schriftfamilie: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", serifenlos; Schriftgewicht: 300;) "

Basic Link Rollover als CSS Sprite - CSS-Tricks

Basic Link Rollover als CSS Sprite - CSS-Tricks

A (Hintergrund: URL (sprite.png.webp) no-repeat; Anzeige: Block; Höhe: 30px; Breite: 250px;) a: Hover (Hintergrundposition: 0 -30px;) Die eingestellte Höhe und "

Barrierefreiheit / SEO-freundliches CSS-Verstecken - CSS-Tricks

Barrierefreiheit / SEO-freundliches CSS-Verstecken - CSS-Tricks

.screen-reader-text (Position: absolut; oben: -9999px; links: -9999px;) Diese Klasse kann ein Element von der Seite entfernen, es aus dem Fluss nehmen und nicht "

Alle Stylesheet-Medientypen - CSS-Tricks

Alle Stylesheet-Medientypen - CSS-Tricks

All Wird für alle medialen Geräte verwendet. aural Wird für Sprach- und Klangsynthesizer verwendet. Braille Wird für Braille verwendet. Tastspielgeräte mit Prägung.

Apple.com Hamburger Brötchen Menü - CSS-Tricks

Apple.com Hamburger Brötchen Menü - CSS-Tricks

Apple machte einige Geräusche, als eine aktualisierte Website veröffentlicht wurde, einschließlich einer brandneuen reaktionsschnellen Navigation. Während sich das Redesign auf andere Dinge konzentrierte, "