11 CSS-Geheimnisse, die Sie im Jahr 2020 kennen müssen

CSS-Tricks
04.30 Bildnachweis: Aga Naplocha

Auch wenn Sie mit CSS vertraut sind und schöne Layouts erstellen, können Sie neue CSS-Eigenschaften und -Funktionen entdecken. Durch ihre Verwendung haben Sie mehr Einfluss darauf, wie sich der Inhalt auf der Website verhält, und haben mehr Freiheit bei der Anwendung kreativer Techniken auf Elemente wie Fotografie.

In diesem Tutorial werden wir uns mit weniger bekannten Eigenschaften befassen. Beachten Sie beim Experimentieren, dass die genannten Funktionen nicht von allen Browsern unterstützt werden. Es lohnt sich daher, sie auf der Website zu überprüfen Kann ich benutzen Seite? ˅. Lassen Sie uns in einige kurze und prägnante Beispiele eintauchen.



Möchten Sie mehr CSS-Inspiration? Sehen Sie diese Auswahl von oben CSS-Animation Beispiele sowie mehr CSS-Tricks . Wenn Sie bei der Erstellung einer Website von vorne anfangen, probieren Sie unsere Liste der brillanten Websites aus Website-Ersteller und um Vermögenswerte zu speichern, erhalten Sie das Richtige Cloud-Speicher für dich.



Warum ist es so schwer, einen Grafikdesign-Job zu bekommen?

Was wirst du brauchen:

  • Ihr bevorzugter Webbrowser und Entwicklertool - Ich empfehle die Verwendung von Firefox oder Google Chrome, da diese alle Funktionen unterstützen, die ich in diesem Lernprogramm verwende.
  • Ein Code-Editor.
  • Assets wie Bilder und Schriftarten (Sie können sie von herunterladen mein Repository .

Typografische Richtung

Es gibt verschiedene CSS-Eigenschaften, mit denen wir die Darstellung des Textes im Web verbessern können.

01. Textstrich

Wir sind mit Textstrichen (Umrissen) aus Adobe Illustrator oder Vektorzeichnungsanwendungen vertraut. Wir können den gleichen Effekt mit dem anwenden Textstrich Eigentum.



Es ist gut zu wissen, dass Sie animieren können Textstrich mit CSS aber nur die Strichfarbe - die Strichbreite nicht.

footer h3 { /*more styles in style.css*/ /*...*/ -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #000; }

02. :: Anfangsbuchstabe

Dieses Pseudoelement wendet Stile auf den allerersten Buchstaben des Blockebenenelements an. Dank dessen können wir Effekte einführen, die uns aus Print- und Papiermagazinen bekannt sind.

p.intro:first-letter { font-size: 100px; display: block; float: left; line-height: .5; margin: 15px 15px 10px 0 ; }

03. Verlaufstext

Schließlich können wir unseren Text ohne komplizierte Methoden mit einem Farbverlauf versehen. Lassen Sie uns herausfinden, wie wir diesen auffälligen Effekt auf unserer Website einführen können.



h2.contact-heading { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background: radial-gradient(#ffbc00, #ff65aa); }

Inhaltskontrolle

Dank der folgenden Eigenschaften können wir besser steuern, wie sich Text oder Bilder verhalten, je nachdem, wie groß oder proportional der Container ist.

04. Leitungsklemme

Das Schnurklemme Die Eigenschaft schneidet Text in einer bestimmten Anzahl von Zeilen ab. Wir brauchen drei Eigenschaften, damit es funktioniert.

Das Anzeige Eigenschaft muss auf gesetzt werden -webkit-box oder -webkit-inline-box , -webkit-box-orient auf vertikal und Überlauf auf ausgeblendet eingestellt, andernfalls wird der Inhalt nicht abgeschnitten.

Adobe Illustrator Tutorials für Anfänger pdf
p.shortened { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

04. Spaltenanzahl

Danke an die Spaltenanzahl Eigenschaft verteilt ein Browser den Inhalt gleichmäßig in einer bestimmten Anzahl von Spalten.

.outro { column-count: 2; }

05. Zeicheneinheit

Wir können unsere Textbreite oder -höhe je nach Zeicheneinheit begrenzen. Wie Eric Mayer weist darauf hin , das CH unit repräsentiert die Breite des Zeichens '0' (Null) in der aktuellen Schriftart, was insbesondere in Kombination mit Monospace-Schriftarten von Nutzen ist. Es ändert sich, wenn sich die Schriftfamilie ändert. Wir können es ein bisschen wie ein behandeln x-Höhe aber die CH basiert auf der Breite des 0-Zeichens anstelle von x.

h2.contact-heading { /*more properties in the CSS file* … max-width: 8ch; }

06. Wortumbruch-Tag

Obwohl dieses Tutorial auf CSS-Tricks basiert, möchte ich auch ein HTML-Tag erwähnen: . Dies ist ein HTML-Element, das eine Wortumbruchmöglichkeit definiert - eine Position innerhalb von Text, an der der Browser möglicherweise eine Zeile umbricht. In einigen Situationen kann dies hilfreich sein - es kann verwendet werden, wenn ein Wort ziemlich lang ist und wir befürchten, dass der Browser das Wort an falschen Stellen, z. B. einer Telefonnummer, brechen würde.

+0043234-343234-234

07. Objektanpassung

Wenn Sie sich fragen, ob wir das Bildverhalten in Abhängigkeit von der Größe des Containers steuern können, empfehlen wir Ihnen, das zu überprüfen Objektanpassung Eigentum. Dieser definiert, wie der Inhalt eines oder sollte an den Behälter angepasst werden. Wir haben vier Möglichkeiten: füllen , enthalten , Startseite und verkleinern . Zum Beispiel mit dem Startseite Wert, der ersetzte Inhalt wird so bemessen, dass sein Seitenverhältnis beibehalten wird, während das gesamte Inhaltsfeld des Elements ausgefüllt wird.

.object-fit { object-fit: cover; height: 400px; width: 100%; }

Dekorative und kreative Elemente

CSS-Tricks: Inhalt

Während Datenvisualisierungsbibliotheken wie d3.js umfassende Diagrammfunktionen bieten, sollten Sie für einfache Kreisdiagramme CSS ausprobieren.04.30 Bildnachweis: Aga Naplocha

Lassen Sie uns nun einige neue Elemente und Farben zu unserer Website hinzufügen.

08. Kegelgradient

Wenn Sie sich jemals gefragt haben, ob Sie ein Kreisdiagramm nur mit CSS erstellen können, ist die gute Nachricht, dass Sie es tatsächlich können! Und die Lösung dafür bringt uns zum Kegelgradient Funktion. Es wird ein Bild erstellt, das aus einem Farbverlauf mit festgelegten Farbübergängen besteht, die um einen zentralen Punkt gedreht werden (anstatt wie bei einem vom Mittelpunkt aus zu strahlen) Radialgradient ).

.piechart { background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%); border-radius: 50%; width: 300px; height: 300px; }

09. Zähler

Um Zahlen in einer nummerierten Liste zu formatieren, müssen wir mit Eigenschaften spielen, die als CSS-Zähler bezeichnet werden. Mit CSS-Zählern können Sie das Erscheinungsbild von Inhalten basierend auf der Position in einem Dokument anpassen.

CSS-Tricks: Daten

Wie erstelle ich eine Stadt im Mixer?
Mit CSS-Zählern können Sie das Erscheinungsbild von Inhalten basierend auf der Position in einem Dokument anpassen und so einen praktischen Hack zum Stylen nummerierter Listen anbieten04.30 Bildnachweis: Aga Naplocha

So verwenden Sie CSS-Zähler:

  • Der Wert der Zähler kann um erhöht oder verringert werden Gegeninkrement
  • Wir können den Wert des Zählers mit dem anzeigen Zähler() oder Zähler () Funktion innerhalb einer Content-Eigenschaft
ol.numbered-list > li:before { content: counter(li); position: absolute; box-sizing: border-box; width: 45px; height: 45px; background: #f3b70f; border-radius: 50%; } ol.numbered-list li { position: relative; left: 0px; list-style: none; counter-increment: li; }

10. Ändern Sie die Textauswahlfarbe

So ändern Sie die Textauswahlfarbe: ::Auswahl ist ein Pseudoelement, das auf Browserebene überschrieben wird, um die Textmarkierungsfarbe durch eine von Ihnen ausgewählte Farbe zu ersetzen. Die Farbe wird angezeigt, sobald Sie den Inhalt mit dem Cursor auswählen.

::selection { background-color: #f3b70f; }

11. @support

Wann immer Sie eine CSS-Eigenschaft verwenden möchten, die nicht von allen Browsern unterstützt wird, gibt es eine Funktionsabfrage namens @Unterstützung Regel. Auf diese Weise können Sie die Browserunterstützung für CSS-Eigenschafts-Wert-Paare überprüfen. Der Code in der @Unterstützung Block wird nur gerendert, wenn diese Bedingungen erfüllt sind.

Wenn der Browser nicht versteht @Unterstützung Es wird auch kein bestimmter Teil des Codes generiert.

billige MacBook Pro Hüllen 15 Zoll
@supports (text-stroke: 4px navy;) { .example { text-stroke: 4px navy; } }

Obwohl bei einigen Eigenschaften immer noch Probleme mit der Kompatibilität der Browser auftreten können, zögern Sie nicht, mit ihnen zu spielen. Während die Unterstützung Ihres Browsers derzeit möglicherweise eingeschränkt ist, werden diese in Zukunft wahrscheinlich zu gängigen Praktiken. Es ist nur eine Frage der Zeit. Wenn Sie sicherstellen möchten, dass diese Effekte nur in Browsern geladen werden, die sie rendern können, verwenden Sie die @ unterstützt Regel, um die Stile zu verpacken.

Wenn Sie weitere Inspiration wünschen, haben Jen Simmons und Mozilla eine Layout Land , ein YouTube-Kanal voller Videos über Webdesign und -entwicklung, einschließlich Tools und Techniken, Neuigkeiten und Best Practices. Darüber hinaus erfahren Sie, wie Sie den Farbkontrast testen und die Farbenblindheit mithilfe von simulieren können Firefox DevTools . Und während Sie über die Komplexität Ihrer Website nachdenken, stellen Sie sicher, dass Ihre Web-Hosting Service spiegelt Ihre Ambitionen wider.

Dieser Inhalt erschien ursprünglich im Netzmagazin. Mehr sehen Webdesign-Inhalte hier .

Weiterlesen: