20 wesentliche CSS-Tricks, die jeder Designer kennen sollte

Dies ist für absolute Anfänger. Sobald Sie gelernt haben, wie das Box-Modell funktioniert und wie man diese Boxen schweben lässt, ist es an der Zeit, sich ernsthaft mit CSS zu befassen. Zu diesem Zweck haben wir eine umfangreiche Liste mit Tipps, Tricks, Techniken und gelegentlichen Dirty-Hacks zusammengestellt, die Ihnen bei der Erstellung des gewünschten Designs helfen. CSS kann knifflig werden, und das sollten Sie auch. Und jetzt, in keiner bestimmten Reihenfolge, (fast) alles, was Sie wissen müssen:

1. Absolute Positionierung

Wenn Sie jederzeit die Kontrolle darüber haben möchten, wo sich ein Element auf unserer Website befindet, ist die absolute Positionierung der Schlüssel dazu. Wenn Sie sich Ihren Browser als einen großen Begrenzungsrahmen vorstellen, können Sie mit der absoluten Positionierung genau steuern, wo in diesem Rahmen ein Element bleiben soll. Verwenden Sie oben, rechts, unten und links, zusammen mit einem Pixelwert, um zu steuern, wo ein Element bleibt. Position:absolut; oben:20px; right:20px Das obige CSS legt die Position eines Elements so fest, dass es 20 Pixel vom oberen und rechten Rand Ihres Browsers entfernt bleibt. Sie können auch die absolute Positionierung innerhalb eines Div verwenden.

2. * + Selektor

Der * ermöglicht es Ihnen, alle Elemente eines bestimmten Selektors auszuwählen. Zum Beispiel, wenn Sie verwendet haben *P und dann CSS-Stile hinzugefügt, würde dies für alle Elemente in Ihrem Dokument mit a geschehen

Etikett. Dadurch ist es einfach, Teile Ihrer Website global auszurichten.

3. Überschreiben aller Stile

Dies sollte sparsam eingesetzt werden, denn wenn Sie dies für alles tun, werden Sie auf lange Sicht in Schwierigkeiten geraten. Wenn Sie jedoch einen anderen CSS-Stil für ein bestimmtes Element überschreiben möchten, verwenden Sie !wichtig nach dem Stil in Ihrem CSS. Wenn ich beispielsweise möchte, dass die H2-Header in einem bestimmten Abschnitt meiner Website rot statt blau sind, würde ich das folgende CSS verwenden: .section h2 { color:red !important; }

4. Zentrierung

Das Zentrieren ist schwierig, da es davon abhängt, was Sie zentrieren möchten. Werfen wir einen Blick auf das CSS der Elemente, die basierend auf dem Inhalt zentriert werden sollen.

Text

Der Text wird mit zentriert text-align:center;. Wenn Sie es auf beiden Seiten haben möchten, verwenden Sie links oder rechts anstelle der Mitte.

Inhalt

A div (oder jedes andere Element) kann zentriert werden, indem man ihm die Blockeigenschaft hinzufügt und dann automatische Ränder verwendet. Das CSS würde so aussehen: #div1 { display: block; Rand: automatisch; width: irgendetwas unter 100 % } Der Grund, warum ich „alles unter 100 %“ für die Breite angegeben habe, liegt darin, dass es bei einer Breite von 100 % die volle Breite hätte und keine Zentrierung erfordern würde. Am besten ist eine feste Breite, z. B. 60 % oder 550 Pixel usw.

5. Vertikale Ausrichtung (für eine Textzeile)

Sie werden dies in einem CSS-Navigationsmenü verwenden, das kann ich fast garantieren. Der Schlüssel besteht darin, die Höhe des Menüs und die Zeilenhöhe des Textes anzugleichen. Ich sehe diese Technik oft, wenn ich zurückgehe und bestehende Websites für Kunden bearbeite. Hier ist ein Beispiel: .nav li{ line-height:50px; Höhe:50px; }

6. Hover-Effekte

Dies wird für Schaltflächen, Textlinks, Blockabschnitte Ihrer Website, Symbole und mehr verwendet. Wenn Sie möchten, dass etwas die Farbe ändert, wenn jemand mit der Maus darüber fährt, verwenden Sie dasselbe CSS, aber fügen Sie es hinzu :schweben dazu und ändern Sie das Styling. Hier ist ein Beispiel: .entry h2{ font-size:36px; Farbe:#000; Schriftstärke:800; } .entry h2:hover{ color:#f00; } Dadurch ändert sich die Farbe Ihres h2-Tags von Schwarz zu Rot, wenn jemand mit der Maus darüber fährt. Das Tolle an der Verwendung von :hover ist, dass Sie die Schriftgröße oder -stärke nicht erneut angeben müssen, wenn sie sich nicht ändert. Es ändert sich nur das, was Sie angeben.

Übergang

Bei Hover-Effekten, etwa bei Menüs oder auf Bildern auf Ihrer Website, möchten Sie nicht, dass die Farben zu schnell an das Endergebnis angepasst werden. Idealerweise möchten Sie die Umstellung schrittweise erleichtern, und hier kommt die Übergangseigenschaft ins Spiel. .entry h2:hover{ color:#f00; Übergang: alle 0,3 Sekunden nachlassen; } Dadurch erfolgt die Änderung innerhalb von 0,3 Sekunden, anstatt sofort auf Rot umzuschalten. Dadurch wird der Hover-Effekt optisch ansprechender und weniger störend.

7. Linkzustände

Diese Stile werden von vielen Designern vermisst und führen bei Ihren Besuchern zu Problemen bei der Benutzerfreundlichkeit. Der :Verknüpfung Die Pseudoklasse kontrolliert alle Links, auf die noch nicht geklickt wurde. Der :hat besucht Die Pseudoklasse kümmert sich um die Gestaltung aller Links, die Sie bereits besucht haben. Dadurch erfahren Website-Besucher, wo sie bereits auf Ihrer Website waren und wo sie sie noch erkunden müssen. a:link { Farbe: blau; } a:visited { color: purple; }

8. Passen Sie die Größe der Bilder ganz einfach an

Manchmal kommt es vor, dass Bilder in eine bestimmte Breite passen und gleichzeitig proportional skaliert werden müssen. Eine einfache Möglichkeit, dies zu tun, besteht darin, die maximale Breite zu verwenden. Hier ist ein Beispiel: img { max-width:100%; Höhe:auto; } Das bedeutet, dass das Bild maximal 100 % betragen kann und die Höhe automatisch anhand der Bildbreite berechnet wird. In einigen Fällen müssen Sie möglicherweise auch die Breite mit 100 % angeben.

9. Steuern Sie die Elemente eines Abschnitts

Wenn Sie anhand des obigen Bildbeispiels nur auf die Bilder eines bestimmten Abschnitts, z. B. Ihres Blogs, abzielen möchten, verwenden Sie eine Klasse für den Blog-Abschnitt und kombinieren Sie diese mit dem eigentlichen Selektor. Dadurch können Sie nur die Bilder des Blog-Bereichs auswählen und keine anderen Bilder wie Ihr Logo oder Symbole für soziale Medien oder Bilder in anderen Abschnitten Ihrer Website, wie z. B. der Seitenleiste. So würde das CSS aussehen: .blog img{ max-width:100%; Höhe:auto; }

10. Direkte Kinder

Ich wünschte, ich hätte das gewusst, als ich anfing, CSS zu verwenden. Das hätte mir so viel Zeit gespart! Verwenden > um die direkten Kinder eines Elements auszuwählen. Beispiel: #footer > a Dadurch werden alle aktiven Linkelemente, die sich unmittelbar unter der Footer-ID befinden, ausgewählt und formatiert. Es wird nichts über das aktive Element hinaus oder irgendetwas anderes, das in der Fußzeile enthalten ist, wie z. B. einfacher Text, ausgewählt. Dies funktioniert auch hervorragend mit Navigationselementen der obersten Ebene.

Spezifische untergeordnete Elemente

Glauben Sie mir, das ist praktisch, wenn Sie Listen gestalten. Sie müssen lediglich zählen, wie viele Elemente unterhalb des Elements vorhanden sind, die Sie formatieren möchten, und dann diesen Stil anwenden. li:nth-child(2) { Schriftgewicht:800; Farbe blau; Textstil:unterstrichen; } Das obige CSS zielt auf das zweite Element in der Liste ab und macht es fett, unterstrichen und blau. Fügen Sie nach der Zahl in Klammern ein „n“ hinzu und Sie können jedes zweite Listenelement gezielt ansprechen. Stellen Sie sich vor, Sie könnten jede zweite Zeile in einem Tabellenlayout gestalten, um das Lesen zu erleichtern. Das CSS wäre: li:nth-child(2)

11. Wenden Sie CSS auf mehrere Klassen oder Selektoren an

Nehmen wir an, Sie möchten einen identischen Rahmen um alle Bilder, den Blog-Bereich und die Seitenleiste hinzufügen. Sie müssen nicht dreimal genau dasselbe CSS schreiben. Listen Sie diese Elemente einfach durch Kommas getrennt auf. Hier ist ein Beispiel: .blog, img, .sidebar { border: 1px solid #000; } Ganz gleich, ob Sie schon seit Jahren als Webdesigner tätig sind oder gerade erst anfangen: Zu lernen, wie man Websites richtig erstellt, kann wie eine steinige, nie endende Reise erscheinen. Sobald Sie eingegrenzt haben, welche Sprachen Sie lernen möchten, müssen Sie Ihre Fähigkeiten erlernen und verfeinern. Egal, was Sie lernen, CSS ist eine dieser wesentlichen, aber anspruchsvollen Fähigkeiten, die Sie beherrschen müssen. Es muss jedoch nicht so schwierig sein, insbesondere wenn Sie ein paar praktische und weniger bekannte CSS-Techniken kennen, um die Arbeit zu erledigen.

12. box-sizing: border-box;

Dies ist bei vielen Webdesignern beliebt, da es das Problem der Auffüllung und des Layouts löst. Wenn Sie ein Feld auf eine bestimmte Breite festlegen und ihm eine Polsterung hinzufügen, erhöht sich im Grunde die Polsterung auf die Größe des Felds. Allerdings mit box-sizing:border-box;wird dies negiert und die Boxen behalten die Größe, die sie haben sollen.

13. :vor

Dieses CSS ist ein Selektor, mit dem Sie ein CSS-Element auswählen und vor jedem Element, auf das eine bestimmte Klasse angewendet wird, Inhalte einfügen können. Nehmen wir an, Sie hätten eine Website, auf der Sie vor jedem H2-Tag einen bestimmten Text wünschen. Sie würden dieses Setup verwenden: h2:before { content: “Read: “; Farbe: #F00; } Dies ist äußerst praktisch, insbesondere wenn Sie eine Symbolschriftart verwenden. Sie können Symbole vor bestimmten Elementen platzieren und diese global anwenden.

14. :nachher

Wie den :before-Selektor können Sie :after verwenden, um Inhalte global in bestimmte Elemente einzufügen. Ein praktischer Nutzen wäre es, nach jedem Auszug in einem Blog „mehr lesen“ hinzuzufügen. Hier erfahren Sie, wie Sie das tun würden. p:after{ content: ” -Weiterlesen… “; Farbe:#f00; }

15. Inhalt

Inhalt ist eine CSS-Eigenschaft, die nützlich ist, wenn Sie ein Element einfügen müssen, das Sie steuern möchten. Die häufigste Verwendung, die ich dafür gesehen habe, ist das Einfügen eines Symbols aus einer Symbolschriftart an einer bestimmten Stelle. In den obigen Beispielen können Sie sehen, dass Sie den Text, den Sie einfügen möchten, in Anführungszeichen setzen müssen.

16. CSS-Reset

Verschiedene Browser verfügen über Standard-CSS-Einstellungen, daher ist es ein Muss, diese zurückzusetzen, damit Sie ein gleichmäßiges, einheitliches Spielfeld haben. Stellen Sie sich das wie den Bau eines Hauses vor. Ganz gleich, ob Sie an einem Berghang, an einem Sandstrand oder mitten in einem Waldgebiet bauen, Sie möchten, dass das Fundament eben ist. Diese CSS-Reset-Methode legt eine Standardbasis für alle Ihre Websites fest und sorgt so für Konsistenz in ihrem CSS-Ausgangspunkt. Es entfernt unerwünschte Ränder, voreingestellte Ränder, Auffüllungen, Linienhöhen, Stile auf Listen usw. Erstellt von Eric Meyer eine, die gut funktioniert.

17. Großbuchstaben

Jeder liebt Drop-Caps. Es erinnert uns an das traditionelle gedruckte Buch und ist eine großartige Möglichkeit, eine Seite mit Inhalten zu beginnen. Dieser erste große Buchstabe erregt wirklich Ihre Aufmerksamkeit. Es gibt eine einfache Möglichkeit, eine Initiale in CSS zu erstellen, und zwar durch die Verwendung des Pseudoelements: :first letter. Hier ist ein Beispiel: p:first-letter{ display:block; float:left; Rand:3px; Farbe:#f00; Schriftgröße:300%; } Dadurch wird der Buchstabe auf die dreifache Größe der anderen Buchstaben eingestellt. Es legt einen Abstand von 3 Pixel um den Buchstaben fest, um Überlappungen zu verhindern, und legt die Farbe des Buchstabens auf Rot fest.

18. Erzwingen Sie, dass der Text nur in Großbuchstaben, in Kleinbuchstaben oder in Großbuchstaben geschrieben wird

Es wäre absurd, einen ganzen Abschnitt in Großbuchstaben zu schreiben. Stellen Sie sich vor, Sie müssten das Problem später beheben, wenn sich das Format der Website ändert oder aktualisiert wird. Verwenden Sie stattdessen die folgenden CSS-Stile, um eine bestimmte Formatierung des Textes zu erzwingen. Dieses CSS zielt auf das h2-Titel-Tag ab.

  • h2 { Texttransformation: Großbuchstaben; } – alles in Großbuchstaben
  • h2 { Texttransformation: Kleinbuchstabe; } – alles klein geschrieben
  • h2 { text-transform: großschreiben; } – schreibt den ersten Buchstaben jedes Wortes groß.

19. Vertikale Bildschirmhöhe

Manchmal möchten Sie, dass ein Abschnitt den gesamten Bildschirm ausfüllt, unabhängig von der Bildschirmgröße. Sie können dies mit vh oder der Ansichtshöhe steuern. Die Zahl davor ist ein Prozentsatz. Wenn Sie also möchten, dass sie 100 % des Browsers ausfüllt, legen Sie den Wert auf 100 fest. Um ein festes Navigationsmenü zu ermöglichen, können Sie einen Wert wie 85 % festlegen. Erstellen Sie eine Klasse für den Container und wenden Sie die Menge an VH an, die er haben soll. Eine Sache, die Sie möglicherweise anpassen müssen, ist der Medienabfragewert für bestimmte Bildschirme oder Ausrichtungen, z. B. Telefone im Hochformat. Stellen Sie sich vor, Sie strecken ein Bild im Querformat, um es an den Porträtmodus anzupassen. Das würde einfach nicht gut aussehen. .fullheight { Höhe: 85vh; }

20. Gestalten Sie Telefonverbindungen

Wenn Sie einen Link haben, der eine Telefonnummer anruft, wenn ein Benutzer auf seinem Telefon darauf tippt, haben Sie möglicherweise Probleme, ihn mit der herkömmlichen aktiven Linkauswahl zu gestalten. Verwenden Sie stattdessen das folgende CSS: a[href^=tel] { Farbe: #FFF; Textdekoration: keine; }

Aktuelle Artikel:

Empfohlen