15 nützliche CSS Tricks, die Sie vielleicht übersehen haben

Wenn Sie eine Zeit lang als Frontend-Webentwickler gearbeitet haben, besteht die große Chance, dass Sie einen Moment hatten, als Sie nach etwas Googeln etwas herausfinden wollten, dass "es CSS dafür gibt". . Wenn du es nicht getan hättest, nun, du bist dabei.

Dieser Beitrag ist eine Sammlung solcher CSS-Codes, die Ihnen Funktionen wie das Umkehren eines Elements, das Hervorheben von gestrichelten Linien, den Textfluss in einer speziellen Form oder den Parallax-Effekt ermöglichen. Einige von ihnen werden weitgehend unterstützt, während andere auf der Suche nach Unterstützung für alle Browser sind.

1. Nummerierungsüberschriften und Zwischenüberschriften

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

2. Spice Up Ebene Unterstriche

   Manchmal möchten wir mit einer schönen gepunkteten oder gestrichelten Linie anstelle einer festen unterstreichen. Da es dafür keine Option gibt, entscheiden wir uns für den border-bottom . border-bottom ist jedoch keine gute Lösung, wenn der Text, den Sie unterstreichen, umgebrochen wird.

   CSS3 spezifiziert nicht eine, sondern drei neue Eigenschaften für die Textdekoration text-decoration-color, text-decoration-line und text-decoration-style die in die gute alte Text-Dekoration shorthanded werden kann .

   Sie können diese verwenden, um Unterstreichungen zu unterstreichen, Überstreichungen durchzuführen und sogar Text blinken zu lassen. Seit April 2015 unterstützt nur Firefox diese Eigenschaft, aber Sie können "experimentelle Web-Plattform-Funktionen" aktivieren, um sie in Chrome zu verwenden.

3. Ein Zitat zitieren

   Zuallererst muss man sich nicht damit beschäftigen, die richtigen geschweiften Anführungszeichen für kurze Zitate einzugeben, denn dafür gibt es HTML: das Tag, das Inline-Zitate anzeigt.

   Das Tag sorgt auch dafür, dass die inneren Anführungszeichen mit einfachen Anführungszeichen zitiert werden. Also, wo ist das "CSS" für diesen "Moment"?

   Angenommen, Sie möchten keine doppelten Anführungszeichen, oder Sie haben mehr als eine Ebene verschachtelter Anführungszeichen. Sie können Ihre Anführungsvoreinstellungen für das Anführungselement mit CSS definieren, indem Sie die Anführungszeichen- Eigenschaft von CSS2 verwenden.

4. Unkontrollierte Tabellen verwalten

   Möglicherweise sind Sie auf einen großen Tisch mit unterschiedlichen Inhaltsgrößen pro Zelle gestoßen, der sich weigert, innerhalb einer von Ihnen festgelegten Breite zu bleiben, ganz gleich, was Sie versuchen. Tame diese Tabelle mit der Eigenschaft table-layout (für gleiche Spaltenhöhe, folgen Sie diesem Link).

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

5. Machen Sie es klebrig

   Sticky-Elemente sind Elemente auf einer Seite, die nicht aus der Sicht gescrollt werden. Mit anderen Worten, es bleibt an einem sichtbaren Bereich haften (Ansichtsfenster oder Scrollbox). Sie können dies mit CSS mit position: sticky; .

   Sie verhalten sich wie relativ positionierte Elemente vor dem Scrollen und später wie fixierte Elemente, sobald eine Scrollschwelle erreicht ist. Derzeit unterstützt nur Firefox es.

6. Holen Sie sich Ihren Text in Form

   Möchten Sie, dass der Text auf Ihrer Seite sich gut über ein Bild beugt, das Sie daneben angezeigt haben? Sie können CSS-Formen ausprobieren. Um CSS-Shapes zu implementieren, können wir drei Eigenschaften shape-outside, shape-margin und shape-image-threshold . Ab April 2015 wird CSS Shapes von Webkit-Browsern unterstützt .

7. Pflichtfelder

   Wenn Sie ein Formular erhalten, besteht eine hohe Wahrscheinlichkeit, dass einige Felder benötigt werden, andere dagegen nicht. Sie müssen die Benutzer wissen lassen, welches was ist. Das CSS dafür ist : erforderlich : optionale Pseudo-Klassen. Alle modernen Browser unterstützen sie.

8. Picky mit Farben

   Wenn Sie eine bestimmte Farbe nicht mögen, wie blau, können wir den ausgewählten Bereich mit einer anderen Farbe färben und das ::selection pseudo-Element 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, eine andere Anzeige zu haben, abgesehen von dem winzigen Häkchen innerhalb des Standard-Kontrollkästchens, um anzuzeigen, dass das Element geprüft wurde.

   Es gibt CSS dafür, die die Verbindung zwischen den unmittelbaren Geschwistern ausnutzt, zwei Elemente nebeneinander. CSS hat einen benachbarten Geschwisterselektor, der durch das Pluszeichen + gekennzeichnet ist, und wir können ihn verwenden, um die Markierung neben dem Kontrollkästchen anzusteuern. Aber was ist mit der Ausrichtung der Checkbox zuerst? Dafür gibt es die Pseudo-Klasse : checked .

10. Wie ein Märchenbuch

    Wäre es dann nicht schön, wenn das erste "O" in "Es war einmal" schön aussieht? Wir können es schön aussehen lassen, schließlich gibt es CSS dafür. Hier ist : :: Das Pseudonymelement des ersten Buchstabens kommt zur Rettung. Es zielt auf den ersten Buchstaben der ersten Zeile des Zielelements ab. 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 den Inhalt verwenden: attr (X) . Es ruft den Wert des Attributs X des Elements ab, dann können wir es neben dem Element anzeigen.

12. Ein bisschen mehr nach links

    Das Zentrieren von Elementen für CSS-Anfänger ist eine echte Meisterleistung. Verschiedene Elemente erfordern unterschiedliche CSS-Eigenschaften, um sie zu zentrieren. Wir werden uns eines von vielen Beispielen anschauen, die im World Wide Web verfügbar sind, damit Sie sich noch einmal daran erinnern können, dass es CSS gibt, um Dinge zu zentrieren.

13. Disc Dateiformat von Links

    Haben Sie schon mal ein kleines Bild in der Nähe eines Links gesehen, das anzeigt, was der Link ist? Eine PDF? oder ein DOC? Ja, es gibt CSS, um das zu erreichen. Der Inhalt: url () wird verwendet, um das Bild hinter den Links anzuzeigen.

14. Trigger Parallax Effekt

    Der Parallax-Effekt ist ein Effekt, der verwendet wird, um die scheinbar langsame Bewegung des Hintergrunds relativ zum Vordergrund zu beschreiben. Dieser Effekt ist in Websites beliebt, die Parallax Scrolling implementieren. Es gibt verschiedene Möglichkeiten, es zu implementieren, das folgende Beispiel funktioniert in Firefox mit Hintergrund-Anhang: behoben; .

15. Die Power von CSS-Animationen

    Wahrscheinlich kein riesiger "Es gibt CSS für diesen" Moment, weil Sie wahrscheinlich alle schon von CSS-Animationen wissen. Aber eine kleine Erinnerung ist nicht schädlich. Es gibt viele Anwendungen für CSS-Animationen, aber hier ist eine für eine einfache Färbung Übung.

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

20 beste Werbegeschenke für angehende UX Motion Designer

Interface-Designer interessieren sich zunehmend für UX-Design mit animierten Modellen, die Benutzeraktionen emulieren. Diese UX-Modelle basieren auf Bewegungen mit animierten Effekten, um zu definieren, wie eine Schnittstelle auf Benutzereingaben reagieren soll .Die meisten UX-Designer lernen, Software zum Erstellen dieser Animationen zu verwenden.

(Tech- und Design-Tipps)

SimpleLightbox - Touch-freundliche Bild Lightbox, die auch WordPress unterstützt

Portfoliosites, Blogposts und sogar soziale Websites verwenden Lightboxes. Sie sind praktisch , um größere Inhalte anzuzeigen, ohne mehr Platz auf der Seite zu beanspruchen .Aber es gibt keinen Grund, sich selbst zu gründen, wenn es so viele kostenlose Skripte online gibt. Eines meiner neuen Favoriten ist die SimpleLightbox, die 100% Open Source und Mobile Responsive auf allen Geräten unterstützt .Alle

(Tech- und Design-Tipps)