10 unglaubliche CSS-Tricks zur Transformation Ihrer Weblayouts

Jeder mit Erfahrung im Webdesign, egal ob Sie DIY-Website-Builder verwendet oder eine Website von Grund auf neu erstellt haben, hat wahrscheinlich schon einmal von CSS gehört. Dieses unglaublich leistungsstarke Tool kann verwendet werden, um Ihre Weblayouts zu transformieren, sodass Sie die Kontrolle über Ihre Website übernehmen und Ihre kreative Vision verwirklichen können. Aber wie können Sie Cascading Style Sheets verwenden, um das Potenzial Ihrer nächsten Website freizusetzen?

Diese Anleitung beschreibt nur eine Reihe von CSS-Eigenschaften, die alle verwendet wurden, um den Header zu erstellen, den Sie im obigen Bild sehen können. Sie finden dieses Projekt hier auf CodePen, um Ihnen die Möglichkeit zu geben, es selbst auszuprobieren.

CSS-Bildbearbeitung

Der erste Schritt, den wir unternehmen müssen, um unseren Header-Bereich zu erstellen, ist das Hinzufügen von Bildern zur Seite. Sie können eine Reihe von Methoden anwenden, um dieses Ziel zu erreichen, daher haben wir die beliebtesten behandelt, zusammen mit ein paar Tricks, die Ihnen helfen, Ihre Bilder zu manipulieren.

1. CSS Hintergrundbild

Wir möchten ein Vollbild-Hintergrundbild für unsere Kopfzeile haben, und die CSS-Eigenschaft background-image ist ideal. Zuerst müssen wir einen Container für unser Bild (und den Rest der Elemente im Header) erstellen.

Wir begannen damit, ein div-Tag mit "header" als Klasse hinzuzufügen, gefolgt von der Festlegung seiner Höhe bis 100vh und sein Breite bis 100vw; Dadurch erhalten wir eine Box, die genau die gleiche Größe wie das Ansichtsfenster hat. Wir haben auch eine CSS-Regel für den Hauptteil der Seite hinzugefügt, mit its Überlauf auf ausgeblendet gesetzt und sein Ränder auf 0px gesetzt.

Wenn der Container vorhanden ist, können wir ein Hintergrundbild hinzufügen, und es gibt drei verschiedene CSS-Regeln, die wir benötigen, um dieses Ziel zu erreichen. Das erste, Hintergrundbild, benötigt eine URL, um als Quelle des Hintergrundbilds zu fungieren, und wir haben dafür den praktischen Unsplash-Katalog verwendet. Wir müssen auch die einstellen Hintergrundgröße zum Abdecken und das Hintergrundposition nach unten, aber vielleicht möchten Sie damit experimentieren, um die besten Ergebnisse zu erzielen.

2. CSS Background-Blend-Mode

CSS-Mischmodi ermöglichen das Mischen von Bildern und Text, ähnlich wie die Mischfunktion in Software wie Adobe Photoshop. Damit Mischmodi mit unserem Hintergrundbild funktionieren, stellen wir die ein Hintergrundfarbe bis halbtransparentes Weiß bevor wir den Mischmodus hinzufügen, den wir verwenden wollten.

Im Anschluss daran background-blend-mode war auf soft-light eingestellt, wodurch wir das Bild weicher machen können.

3. CSS-Clip-Pfad

Für unseren nächsten Trick verwenden wir eine Regel namens clip-path. Wenn Sie img-HTML-Tags verwenden, können Sie einen Pfad festlegen, der Teile der Bilder, mit denen Sie arbeiten, ausblendet. Sie können dafür allgemeine Formen verwenden, aber Sie können auch eine SVG-erzeugende App verwenden, um ein komplizierteres Design zu erstellen.

Wir haben ein div-Tag mit „flex_image_box“ hinzugefügt, um als Container für drei Bilder zu fungieren, und mithilfe der CSS-Eigenschaft „display“ daraus eine Flexbox gemacht (darüber sprechen wir später). Drei img-Tags wurden innerhalb des div-Tags hinzugefügt, wobei die IDs als „img1“, „img2“ und „img3“ festgelegt wurden. Einstellen der Breite jedes Bildes auf 600px, wir können Lassen Sie die Eigenschaft height leer ohne das Seitenverhältnis der Bilder zu ändern; Jetzt ist es an der Zeit, unseren Clip-Pfad hinzuzufügen!

Um unsere drei Dreiecke zu erstellen, haben wir denselben Polygon-Clip-Pfad für img1 und img3 verwendet, mit einer umgekehrten Version für img2. Wir mussten auch mit der Positionierung unseres Flexbox-Containers spielen, um sicherzustellen, dass die Bilder in der richtigen Position auf dem Bildschirm platziert werden. Unsere Clip-Pfad-Regeln sind unten zu sehen.

4. CSS-Opazität

Opazität legt den Transparenzgrad jedes HTML-Elements fest. Wir setzen die Deckkraft unserer Bilder bis 90%, wodurch sie leicht undurchsichtig werden, sodass sie gut mit dem Hintergrund verschmelzen.

CSS Responsive Text & Bilder

Wir haben bereits die Kunst von erforscht Erstellen beeindruckender responsiver Websites mit HTML, CSS und JavaScript in der Vergangenheit, aber wir können auf den Prinzipien aufbauen, die Sie bereits verstehen, und Ihnen einen tieferen Einblick in die Fähigkeiten geben, die Sie benötigen, um Ihre Website-Layouts zu meistern.

1. CSS Responsive/relative Einheiten

CSS-Einheiten wie px, pt und cm sind absolute Einheiten, und das bedeutet, dass ein Webbrowser sie unabhängig von der Breite und Höhe des Fensters, in dem sie sich befinden, in derselben Größe rendert. Relative Einheiten sind unterschiedlich und erzeugen Höhen und Längen, die relativ zu anderen Maßen wie dem Browserfenster oder einem übergeordneten Element sind. Die folgenden relativen Einheiten werden häufig verwendet und sind für responsives Webdesign unerlässlich.

• em: Diese Einheit wird normalerweise mit Text verwendet. Sie ist relativ zur Schriftgröße des aktuellen Elements, wodurch 4em viermal so groß ist wie die eingestellte Schriftgröße.
• Rest: Wie em ist rem relativ zur Schriftgröße eines Elements; Das Wurzelelement in einer Hierarchie wird verwendet, um die Ausgabegröße zu definieren.
• vw/vh: Bestimmen von Breite und Höhe basierend auf der Größe des Ansichtsfensters, 2vw entspricht 2 % der Browserbreite, während 2vh 2 % der Browserhöhe entspricht.
• %: Die %-Einheit berechnet Abmessungen basierend auf der Größe des übergeordneten Elements eines Elements.
• vmin/vmax: Diese Einheiten erzeugen Abmessungen relativ zu 1 % der kleinsten oder größten Abmessungen des Darstellungsbereichs und bieten Elementen die Möglichkeit, direkt auf die Größe eines Browserfensters zu reagieren.

2. CSS-Schriftgröße

Diese Eigenschaft kann mithilfe von Standardwerten festgelegt werden, die entweder vom Haupt-Stylesheet der Website oder vom Webbrowser des Benutzers vordefiniert sind. Diese Werte umfassen mittel, xx-klein, x-klein, klein, groß, x-groß und xx-groß, wobei mittel als Standard für jeden Text festgelegt ist, der kein CSS-Tag für die Schriftgröße hat. Alternativ können relative Werte verwendet werden, wenn die CSS-Eigenschaft font-size verwendet wird, und dies ist die Methode, die wir verwendet haben, um sicherzustellen, dass der Text in unserem Header-Bereich für jeden geeignet ist Ansichtsfenster.

Wir haben unserem HTML zwei Überschriften-Tags hinzugefügt, die es uns ermöglichen, dem Projekt Text hinzuzufügen. Einer ist ein großer Hauptheader, während der andere ein Subheader ist, und beide verwenden relative Einheiten.

Verwandt: So ändern Sie die HTML-Schriftgröße in CSS

3. CSS-Breite und -Höhe

Alle HTML-Elemente verfügen über Höhen- und Breitenmaße, unabhängig davon, ob es sich um div, img, a oder eine andere Art von Tag handelt. Diese Abmessungen können automatisch auf Standardwerte gesetzt werden, sie können aber auch von Webdesignern mit den richtigen Regeln vorgegeben werden; Wir haben diese beiden Methoden für diesen Header verwendet.

Für das Hintergrundbild wurden responsive Einheiten verwendet, wobei die Höhe auf 100 vh und die Breite auf 100 vw festgelegt wurde, aber wir haben auch absolute Einheiten für unsere drei Bilder verwendet. Es lohnt sich, mit CSS-Breiten- und -Höheneinheiten zu experimentieren und zu experimentieren, wobei Optionen wie „erben“ die Bereitstellung der bedeutet, die Abmessungen eines übergeordneten Elements zu übernehmen, und es gibt viele andere Tricks wie diesen, die Sie anwenden können.

4. CSS Mix-Blend-Modus

Der CSS-Mix-Mischmodus ist dem Hintergrund-Mischmodus sehr ähnlich, nur dass er auf jedes Element angewendet werden kann, anstatt ausschließlich für Hintergründe zu sein. Wir haben diese Eigenschaft in unserer H1-Überschrift verwendet, um Textur hinzuzufügen und das Projekt interessanter zu machen. Wir begannen mit der Einstellung unserer Textfarbe auf schwarz, gefolgt von der Einstellung der Mix-Mischmodus zum Überlagern.

Es lohnt sich, die verschiedenen Mischoptionen zu erkunden, die Ihnen beim Umgang mit Text zur Verfügung stehen, da Hintergründe mit einzigartigen Farbprofilen unterschiedlich auf die von Ihnen verwendeten Einstellungen reagieren.

5. CSS-Text-Transformation

CSS Text-Transformation ist eine clevere Eigenschaft, die es Designern ermöglicht, die Groß- und Kleinschreibung des Textes auf ihren Websites zu ändern, ohne die Art und Weise zu beeinflussen, wie Suchmaschinen ihn lesen. Wir haben zum Beispiel setze Texttransformation auf Großbuchstaben in unserer H1-Überschrift, wodurch jeder Buchstabe ein Großbuchstabe wird, egal wie wir ihn in unseren HTML-Code eingeben.

CSS-Überlaufeigenschaften

HTML kann oft wie ein starres Framework erscheinen, das strenge Grenzen für den Inhalt Ihrer Websites festlegt, aber dies ist nicht der Fall, wenn Überlaufeigenschaften verwendet werden.

CSS-Überlauf & Text-Überlauf

Overflow und text-overflow sind sehr ähnliche CSS-Eigenschaften. Überlauf kann auf jedes Element angewendet werden, wodurch Sie die Kontrolle über den Inhalt erhalten, der seine Grenzen überschreiten kann. Textüberlauf ist ähnlich, gilt aber nur für Text und gibt Ihnen die Möglichkeit, Ihren Regeln zusätzliche Parameter hinzuzufügen. Wir haben für dieses Projekt nur den Überlauf verwendet (wir haben ihn verwendet, um die Größe des Hauptteils unserer Seite einzuschränken), aber Sie können den Textüberlauf auf der lesen W3Schulen Webseite.

Verwendung von CSS für Ihre Weblayouts

CSS ist ein unglaublich leistungsfähiges Werkzeug, das es Webdesignern und Entwicklern ermöglicht, beeindruckende Websites mit Code zu erstellen. Wir empfehlen Ihnen, einen Blick auf den CodePen zu werfen, den wir am Anfang des Artikels bereitgestellt haben, da Sie dadurch einen noch tieferen Einblick in die Funktionsweise all dieser Tools erhalten. Außerdem können Sie mit dem Header spielen, den wir erstellt haben, um Ihren eigenen letzten Schliff hinzuzufügen.

8 grundlegende CSS-Tipps und Tricks, die jeder Entwickler kennen sollte

Verwenden Sie diese wichtigen CSS-Methoden für einen schnellen Workflow und ein schönes Webdesign?

Lesen Sie weiter

Über den Autor