15 nützliche CSS-Tricks, die Sie möglicherweise übersehen haben

Wenn Sie seit einiger Zeit als Frontend-Web-Entwickler tätig sind, besteht eine hohe Chance, dass Sie einen Moment hatten, als Sie versuchten herauszufinden, wie Sie etwas programmieren können, und das nach einigem Googeln erkannte “dafür gibt es CSS”. Wenn nicht, dann sind Sie dabei.

Dieser Beitrag ist eine Sammlung solcher CSS-Codes, mit denen Sie Funktionen wie ein Element verkleben, gestrichelte Linien unterstrichen, den Text Ihrer Seite in eine spezielle Form bringen oder einen Parallaxeffekt erzielen können. Einige von ihnen werden weitgehend unterstützt, während andere auf dem Weg zur vollen Unterstützung aller Browser sind.

1. Nummerierung von Überschriften und Unterüberschriften

   Angenommen, Sie haben in Ihrem Dokument eine Reihe von Überschriften und Unterüberschriften erhalten und Sie nummerieren diese manuell oder über ein Skript. Stattdessen können Sie dazu CSS-Zähler verwenden. Hier gibt es bereits einen ausführlichen Beitrag. Und da es sich um eine CSS2-Spezifikation handelt, können Sie davon ausgehen, dass sie von allen Browsern unterstützt wird, mit Ausnahme von IE 6.

2. Spice Up einfache Unterstreichungen

   Manchmal möchten wir mit einer schönen gepunkteten oder gestrichelten Linie anstelle einer festen Linie unterstreichen. Da es dafür keine Option gibt, geben wir uns damit ein Rand unten. Aber Rand unten ist keine gute Lösung, wenn der Text, den Sie unterstreichen, umbrochen wird.

   CSS3 hat nicht nur eine, sondern drei neue Eigenschaften für die Textdekoration festgelegt Text-Deko-Farbe, Textdekorationslinie, und Text-Deko-Stil das kann in das gute alte verkürzt werden Textdekoration.

   Sie können diese Optionen verwenden, um Unterstreichungen zu formatieren, zu unterstreichen, sogar Text zu blinken und vieles mehr. Ab April 2015 unterstützt nur Firefox diese Eigenschaft, Sie können sie jedoch aktivieren “experimentelle Webplattformfunktionen” um es in Chrome zu verwenden.

3. Ein Zitat zitieren

   Zunächst einmal müssen Sie sich nicht mit den richtigen geschwungenen Anführungszeichen für kurze Zitate beschäftigen, da dafür HTML vorhanden ist: Tag, das Inline-Zitate angibt.

   Das tag sorgt auch für die Anführungszeichen mit einfachen Anführungszeichen. Also wo ist das “dafür gibt es 'CSS'” Moment in diesem?

   Angenommen, Sie möchten nicht die standardmäßigen doppelten Anführungszeichen oder Sie haben mehr als eine Ebene verschachtelter Anführungszeichen. Sie können Ihre Zitatvorgaben für das Zitatelement mit CSS definieren, indem Sie CSS2 verwenden Zitate Eigentum.

4. Fehlerhafte Tabellen verwalten

   Möglicherweise sind Sie auf eine große Tabelle mit unterschiedlichen Inhaltsgrößen pro Zelle gestoßen, die sich weigert, die angegebene Breite einzuhalten, unabhängig davon, was Sie versuchen. Zahle diesen Tisch mit dem Tabellenlayout Eigenschaft (für gleiche Spaltenhöhe folgen Sie diesem Link).

   Um genau zu sein, ist das Update im Tabellenlayout: fest; Wert. Wenn Sie der Tabelle ein festes Layout zuweisen, werden die Tabelle und die Zellenbreite von der Breite der Tabelle oder der ersten Zeile der Zellen (die vom Benutzer definiert werden kann) und nicht vom Inhalt bestimmt. Dies wird von allen Browsern unterstützt.

5. Mach es klebrig

   Sticky-Elemente sind Elemente auf einer Seite, die nicht außer Sichtweite gerollt werden. Mit anderen Worten bleibt er in einem sichtbaren Bereich (Ansichtsfenster oder Bildlauffeld). Sie können dies mit CSS erstellen Position: klebrig;.

   Sie fungieren als relativ positionierte Elemente vor einem Bildlauf und später als feste Elemente, sobald eine Bildlaufschwelle erreicht ist. Zur Zeit, nur Firefox unterstützt es.

6. Holen Sie sich Ihren Text in Form

   Möchten Sie, dass der Text auf Ihrer Seite schön über einem Bild angezeigt wird, das Sie daneben angezeigt haben? Du kannst es versuchen CSS-Formen. Um CSS-Shapes zu implementieren, können wir drei Eigenschaften verwenden Form außen, Formrand und Form-Bild-Schwelle. Ab April 2015 wird CSS Shapes von unterstützt Webkit-Browser.

7. Pflichtfelder

   Wenn Sie ein Formular erhalten haben, besteht eine hohe Chance, dass einige Felder darin ausgefüllt werden müssen, andere dagegen nicht. Sie müssen den Benutzern mitteilen, welche welche sind. Das CSS dafür ist :erforderlich :wahlweise Pseudoklassen. Alle modernen Browser unterstützen sie.

8. Picky mit Farben

   Wenn Sie eine bestimmte Farbe, wie z. B. Blau, nicht mögen, können wir den ausgewählten Bereich mit einer anderen Farbe und mit einfärben ::Auswahl Pseudoelement ist das CSS dafür. Dies wird von allen modernen Browsern unterstützt.

9. Habe ich es überprüft??

   In einer Situation, in der ein Kontrollkästchen aktiviert wurde, wäre es schön, wenn Sie neben dem winzigen Häkchen im Standard-Kontrollkästchen eine weitere Angabe verwenden, um anzuzeigen, dass das Element markiert wurde.

   Es gibt CSS für das, was die Verbindung zwischen den unmittelbaren Geschwistern ausnutzt, zwei Elemente nebeneinander. CSS hat einen benachbarten Geschwisterselektor, der durch das Plus gekennzeichnet ist + signieren, und wir können es verwenden, um das Label neben dem Kontrollkästchen anzuvisieren. Aber wie sieht es mit dem Ankreuzen der Checkbox aus? Dort ist der : geprüft Pseudoklasse dafür.

10. Wie ein Bilderbuch

    Dann wäre es nicht schön, wenn der erste “O” in dem “Es war einmal” sieht gut aus? Wir können es schön aussehen lassen, dafür gibt es ja CSS. Hier ist wo ::erster Brief Pseudoelement kommt zur Rettung. Es richtet sich an den ersten Buchstaben der ersten Zeile des Zielelements. Lesen Sie hier mehr darüber.

11. Möchten Sie mehr wissen??

    Ein Element kann die Klasse X oder Daten Y oder einen anderen Wert für ein Attribut haben. Wenn wir jemals einen solchen Attributwert eines Elements in der Nähe anzeigen müssen, können wir das verwenden Inhalt: attr (X). Es ruft den Wert des Attributs X des Elements ab, und wir können ihn neben dem Element anzeigen.

12. Ein bisschen mehr nach links

    Zentrierelemente für CSS-Anfänger sind eine ziemliche Leistung. Verschiedene Elemente erfordern unterschiedliche CSS-Eigenschaften, um sie zu zentrieren. Wir werden unter vielen Beispielen, die im World Wide Web verfügbar sind, ein Beispiel betrachten, so dass Sie sich daran erinnern können, dass es CSS gibt, um die Dinge zu zentrieren.

13. Dateiformat von Links freigeben

    Haben Sie schon einmal ein kleines Bild in der Nähe eines Links gesehen, um anzuzeigen, was dieser Link ist? Ein PDF? oder ein DOC? Ja, dafür gibt es CSS. Das Inhalt: URL () verwenden wir, um das Bild hinter den Links anzuzeigen.

14. Parallax-Effekt auslösen

    Der Parallax-Effekt ist ein Effekt, mit dem die scheinbar langsame Bewegung des Hintergrunds relativ zum Vordergrund beschrieben wird. Dieser Effekt ist bei Websites beliebt, die Parallax-Scrolling implementieren. Es gibt verschiedene Möglichkeiten, es zu implementieren. Das folgende Beispiel funktioniert in Firefox mit Hintergrundaufsatz: feststehend;.

15. Die Kraft von CSS-Animationen

    Wahrscheinlich kein riesiger “dafür gibt es CSS” Moment, da Sie alle wahrscheinlich CSS-Animationen kennen. Aber eine kleine Erinnerung schadet nicht. Es gibt viele Verwendungsmöglichkeiten für CSS-Animationen, hier jedoch eine einfache Farbgebung.

Jetzt lesen: 50 nützliche CSS-Ausschnitte, die jeder Designer haben sollte