Wie erstelle ich ein Poster für Avengers: Infinity War in HTML und CSS?

In diesem Beitrag werden wir ein Filmplakat von „Avengers: Infinity War“ in HTML und CSS erstellen.

Folgendes werden wir bauen:

Sieht interessant aus, oder?

Hier sind einige wichtige Konzepte, die Sie beim Erstellen dieses Posters lernen werden:

  • So geben Sie Ihrer Seite ein Hintergrundbild im Vollbildmodus
  • Elemente in CSS horizontal zentrieren
  • Elemente in CSS vertikal zentrieren
  • Einbetten von YouTube-Videos in HTML
  • Was ist Margin Collapse?
  • So laden Sie benutzerdefinierte Schriftarten aus einer lokalen Datei
  • So laden Sie Schriften aus Google-Schriften

Das wird Spaß machen, also tauchen wir ein.

Der leere Schiefer

Lassen Sie uns zuerst auf derselben Seite fortfahren.

So sieht meine Projektordnerstruktur aus:

Unser Stylesheet „styles.css“ befindet sich im CSS-Ordner. Die benutzerdefinierte Schriftartdatei, die wir herunterladen, befindet sich im Ordner „fonts“. Das Hintergrundbild, das wir herunterladen, befindet sich im Ordner „img“. Der HTML-Code befindet sich im Ordner „infinity“ -war.html ”Datei.

Hier ist meine HTML-Datei für eine leere Seite. Wir werden auf dieser leeren Seite aufbauen:

Wenn Sie den obigen Code nicht verstehen, codieren Sie wahrscheinlich zum ersten Mal in HTML. Ich würde empfehlen, hier zu beginnen: Wie erstelle ich einen Burger in HTML - Ein Anfänger-Tutorial.

Volles Hintergrundbild

Laden Sie zuerst das Bild herunter und speichern Sie es im Ordner "img".

Hinweis: Alle Rechte des Bildes liegen bei Marvel Studios, die hier nur zu Lernzwecken verwendet werden.

Normalerweise verwenden wir das -Element, um Bilder in HTML aufzunehmen. Für diesen speziellen Zweck erstellen wir jedoch ein div, lassen dieses div den gesamten Bildschirm abdecken und setzen dann das Hintergrundbild auf dieses div unter Verwendung der CSS-Eigenschaft "background-image".

Hier ist unser HTML:

und unser CSS:

Wie Sie sehen, haben wir ein div erstellt und es in unserer HTML-Datei einer Klasse zugeordnet. In unserer CSS-Datei setzen wir die Breite und Höhe auf 100%, damit sie den gesamten Bildschirm abdecken. Wir setzen das Hintergrundbild mit der Eigenschaft "background-img".

Beachten Sie, wie wir auf die Bilddatei verweisen: url ("../ img / infinity-war-wallpaper.jpg"). Siehst du das .. am Anfang des Pfades? Wir verweisen auf die Bilddatei, die sich im Ordner "img" befindet, aus unserer Datei styles.css, die sich im Ordner "css" befindet, richtig?

Wir müssen also einen Ordner löschen und dann auf den Pfad verweisen. Das .. nimmt uns einen Ordner in der Ordnerstruktur auf.

Aktualisieren Sie die Seite im Browser und sehen Sie sich das Ergebnis an.

Und es ist immer noch eine leere Seite.

Eigentlich fehlt uns hier ein Detail.

Wenn Sie die Höhe oder Breite in% festlegen, in unserem Fall beispielsweise 100%, entspricht dies nicht 100% des Bildschirms, sondern 100% der Größe des übergeordneten Elements.

Was ist das übergeordnete Element des div? . Was ist das übergeordnete Element des Körpers?

Wir müssen also die Höhe unserer Körper- und HTML-Elemente auf 100% setzen. Lassen Sie uns das machen und sehen, ob es funktioniert:

Jetzt bekommen wir diese Ausgabe:

Okay, wenn Sie es sich genau ansehen, werden Sie feststellen, dass es hier zwei Probleme gibt:

  • Es gibt eine weiße Lücke um das Bild - sehen Sie das?
  • Das Bild wird vergrößert, nicht wahr?

Lassen Sie uns diese Probleme einzeln angehen.

Das body-Element hat standardmäßig einen gewissen Spielraum. Deshalb sehen wir diese Lücke um das Bild.

Entfernen wir den Rand, indem wir ihn für den Body auf 0 setzen:

Aktualisieren Sie den Browser und Sie werden sehen, dass die weiße Lücke verschwunden ist und es keine Bildlaufleiste mehr gibt.

Lösen wir als Nächstes das Bildskalierungsproblem. Standardmäßig wird das Bild in seiner Originalgröße angezeigt. Wir können dies ändern, um das Bild so zu skalieren, dass es den Bildschirm bedeckt, indem Sie die Eigenschaft "Hintergrundgröße" auf "Deckung" setzen.

Wir setzen auch die Hintergrundposition, um das Hintergrundbild zu zentrieren.

Beide Probleme sind gelöst.

Rand kollabiert

Fügen wir eine Überschrift mit dem

-Element hinzu und geben Sie ihr mit der "color" -Eigenschaft in CSS eine weiße Farbe:

und unser CSS:

Ausgabe:

Wir haben etwas durcheinander gebracht. Woher kommt diese weiße Lücke?

Nun, es stellt sich heraus, dass das Element h1 ebenso wie das Element body standardmäßig einen gewissen Spielraum hat, ebenso wie die Elemente h2, h3, h4, h5 und h6.

Aber selbst wenn das Element h1 einen Rand hatte, muss es mit einer gewissen Lücke innerhalb des Bereichs mit unserem Hintergrundbild angezeigt werden. Warum zeigte es eine Lücke außerhalb des Div?

Im Idealfall sollte es so angezeigt worden sein:

Stattdessen wird eine Lücke über dem „Full-BG“ -Div angezeigt.

Dies geschieht aufgrund eines Randeinbruchs.

Wenn Sie zwei Blockelemente haben (in unserem Fall div und h1) und das übergeordnete Element keinen Abstand oder Rand aufweist, werden der obere und untere Rand des untergeordneten Elements als oberer und unterer Rand des Elements angezeigt Elternteil. Dies wird Margin Collapsing genannt. Der Rand des Kindes fällt mit dem Rand des Elternteils zusammen.

Wenn das übergeordnete Element einen Abstand von nur 1 Pixel oder einen Rand von mindestens 1 Pixel aufweist, ist dies nicht der Fall. Lassen Sie uns unserem "full-bg" -Div 1px-Padding geben und dessen Wirkung sehen:

Der Randeinbruch ist behoben.

Aber - haben Sie einen kleinen Unterschied bemerkt?

Ihr Browser verfügt nun über eine horizontale und vertikale Bildlaufleiste. Das heißt, die Breite und Höhe des Div haben zugenommen.

Wie?

Das Auffüllen und der Rand vergrößern das Element

Dies ist ein weiteres Standardverhalten, an das Sie sich erinnern müssen. Angenommen, Sie erstellen einen Div von 100 x 100 Pixel und geben ihm einen Abstand von 10 Pixel. Das Div wird jetzt 110px x 110px.

Ja, der Abstand, den Sie einem Element geben, wird zur Dimension des Elements hinzugefügt. Das Gleiche gilt für den Rahmen: Wenn Sie Ihrem Element einen 4-fachen Rahmen geben, erhöht sich seine Größe um das 4-fache.

Wir möchten das Element im Idealfall nicht vergrößern, sondern den Inhalt im Element verkleinern, um Platz für die Polsterung und den Rand zu schaffen.

Wir können dies erreichen, indem wir die Eigenschaft "box-sizing" auf "border-box" setzen. Lass uns das tun:

Aktualisieren Sie Ihren Browser. Bam, die Bildlaufleisten sind weg.

Abschnitt und Überschrift

Wenn Sie das Bild mit dem Endergebnis gesehen haben, müssen Sie noch einen Untertitel, ein YouTube-Video und das Veröffentlichungsdatum hinzufügen. Es empfiehlt sich, alle diese Elemente in einem Abschnitt zu gruppieren, da diese Elemente miteinander verknüpft sind. Erstellen wir einen Abschnitt mit dem

-Tag und fügen unser h1 ein:

Alle Elemente unseres Plakats werden in diesem Abschnitt "Poster-Inhalt" behandelt.

Sie fragen sich vielleicht, warum wir hier nicht "div" verwendet haben - warum "section"?

Eigentlich war vor HTML5 alles „div“. Tatsächlich können wir ganze Websites nur mit "div" -Elementen erstellen. Wir tun dies jedoch nicht, da es sinnvoller ist, ein Bild in das -Element aufzunehmen, es sinnvoller ist, einen Absatz in das

-Element aufzunehmen, und es ist sinnvoller, Inhalte mit ähnlichen Inhalten zu gruppieren Thema im Element

.

Die Faustregel lautet also, verwenden Sie

, wenn Sie einen Container nur zum Verleihen des Inhalts verwenden möchten (wie unser "full-bg" -Div), und verwenden Sie
, wenn Sie möchten, dass ein Container ähnlich thematisch gruppiert wird Inhalt.

Als nächstes wissen wir auch, dass es eine Unterüberschrift geben wird. Glücklicherweise hat HTML5 ein Element zum Gruppieren von Überschriftenelementen - das

-Element. Lassen Sie uns das auch mit einbeziehen:

Wir müssen auch die Selektoren in unserem CSS aktualisieren:

Sobald Sie auf "Aktualisieren" klicken, werden Sie feststellen, dass die Schriftart unseres h1-Elements kleiner wird.

Viele Browser reduzieren die Schriftgröße des h1-Elements, wenn sie innerhalb eines

- oder eines
-Elements platziert werden. Daher ist es am besten, die Größe für unser h1 manuell anzugeben, wenn es in
oder
platziert wird:

Transparenter Hintergrund

Verleihen Sie unserem Abschnittselement eine schwarze, halbtransparente Hintergrundfarbe:

Ausgabe:

Der Code "rgba (0, 0, 0, 0.6)" bedeutet: Farbe mit 0 roten, 0 grünen und 0 blauen Komponenten, die schwarz ist, und 60% Opazität.

Zwei Dinge: Wir möchten nicht, dass der Text an den Rändern der halbtransparenten Box haftet. Zweitens möchten wir dem Abschnitt eine feste Breite geben und ihn zur Mitte ausrichten.

Lass uns das machen:

Wir haben ein Padding von "16px" angegeben und die "Box-Größe" auf "Border-Box" gesetzt, da der Container nicht um 16px erweitert werden soll, um Platz für das Padding zu schaffen. Wir möchten vielmehr, dass der Container die gleiche Größe behält und der Inhalt darin verkleinert wird, um Platz für 16 Pixel Abstand zu schaffen.

Ausgabe:

Okay, die obere und untere Lücke sehen mit Sicherheit nicht wie "16px" aus - sie sehen viel mehr aus. Und wenn Sie es bemerkt haben, hat der Abschnitt zuvor nicht den oberen Rand des Browsers berührt, jetzt ist er es. Was ist los?

Wieder bricht der Spielraum zusammen. Der zusätzliche Abstand oberhalb und unterhalb von h1 ist nicht das Auffüllen des Abschnitts, sondern der Rand von h1. Bisher hatten wir keine Auffüllung für den Abschnitt, sodass der Rand von h1 und Abschnitt reduziert und außerhalb des Abschnitts angezeigt wurde. Aus diesem Grund hat der Abschnitt zuvor nicht die Oberseite berührt.

Verkleinern Sie den Rand von h1 und zentrieren Sie ihn, indem Sie "text-align: center" für unser

-Element festlegen:

Aktualisieren Sie die Seite und der h1-Text sollte jetzt mit relativ wenig Platz zentriert sein.

Flex, um Dinge zu zentrieren

Unser Abschnitt ist aufgrund des „Rands: Auto“ bereits horizontal zentriert.

Mit „margin: auto“ werden die Ränder an allen Seiten (Rand oben, Rand rechts, Rand unten und Rand links) auf „auto“ gesetzt.

Wir wissen, dass das Einstellen von Rand-links und Rand-rechts auf "Auto" das Element horizontal zentriert.

Wenn Sie jedoch Rand oben und Rand unten auf "Auto" setzen, wird ein Element nicht automatisch vertikal zentriert. In der Vergangenheit war es für Webentwickler eine der größten Herausforderungen, Dinge in HTML zu zentrieren.

Nicht länger. Jetzt, da Flexbox von allen Browsern weitgehend unterstützt wird, können wir "display: flex" für ein Element verwenden. Dieses Element wird zu einem „flexiblen Container“ und seine Kinder werden zu „flexiblen Gegenständen“.

Flex-Artikel haben einige großartige Eigenschaften. Wenn z. B. der Rand oben und der Rand unten von Flex-Elementen auf "auto" eingestellt sind, wird die Mitte vertikal ausgerichtet!

Probieren Sie es aus und fügen Sie "display: flex" zu ".full-bg" hinzu:

Ausgabe:

Okay, jetzt fängt es an, gut auszusehen.

Laden Sie eine benutzerdefinierte Schriftart von einem lokalen System

Wenn wir es wirklich cool aussehen lassen möchten, benötigen wir eine benutzerdefinierte Schriftart für unseren Header.

Schauen Sie sich diese Schrift auf "dafont.com" an:

Dies sieht perfekt für unsere Verwendung aus, daher können Sie es hier herunterladen.

Wenn Sie die ZIP-Datei extrahieren, werden Schriftdateien im TTF- und OTF-Format angezeigt. Wir können diese verwenden, aber das WOFF-Format ist der beste Weg, wenn Sie eine benutzerdefinierte Schriftart für CSS verwenden. Konvertieren Sie mit diesem Online-Tool eine beliebige TTF-Datei nach WOFF.

Dann werden wir die konvertierte .woff-Datei in das "fonts" -Verzeichnis legen.

Laden wir unsere Schriftart:

Hinweis: Wenn Sie Firefox verwenden, müssen Sie zulassen, dass lokale Schriftdateien geladen werden. Geben Sie about: config in die Adressleiste von Firefox ein und drücken Sie die Eingabetaste. Akzeptiere die Warnung. Suchen Sie dann nach "strict_orogin_policy" und schalten Sie es falsch.

Ausgabe:

Okay, jetzt reden wir.

Gestaltung des "Headers"

Nun schreiben wir "Infinity War" als Unterüberschrift als h2 und geben einen oberen und unteren Rand an.

und unser CSS:

Ausgabe:

Okay, zwei Probleme hier:

  • die Lücke zwischen h1 und h2,
  • Die weißen Linien (oberer und unterer Rand von h2) sollen sich nicht über den gesamten Abschnitt erstrecken. Wir wollen es so breit wie der Text "Avengers".

Um die Lücke zwischen h1 und h2 zu verringern, entfernen wir den unteren Rand von h1 und den oberen Rand von h2:

Der Code „margin: 16px 8px 0“ bedeutet, dass der obere Rand auf 16px, der rechte und linke Rand auf 8px und der untere Rand auf 0 gesetzt werden.

Nun zum zweiten Problem.

Das

-Element ist standardmäßig ein Blockelement, daher erstreckt sich seine Breite über die Breite seines übergeordneten Elements. Wenn wir es zu einem "Inline-Block" -Element machen, wird es nicht auf die Breite des übergeordneten Elements erweitert und nimmt nur die Breite ein, die für die Anpassung des Texts erforderlich ist. Genau das wollen wir.

Geben Sie dem Header "display: inline-block" und dem übergeordneten "poster-content" "text-align: center":

Ausgabe:

Benutzerdefinierte Google-Schriftart

Verwenden wir eine Science-Fiction-Schrift für h2. Wir haben gesehen, wie eine Schriftart heruntergeladen und in unserem CSS verwendet wird. In einem solchen Szenario hosten Sie die Schriftart selbst. Google stellt hier viele gehostete Schriftarten kostenlos zur Verfügung. Wir verlinken es einfach von Google. Hier ist eine, die für unsere Verwendung gut aussieht:

Hier ist die URL.

Gehen Sie zur obigen URL und klicken Sie auf "SELECT THIS FONT" auf der rechten Seite des Bildschirms:

Klicken Sie anschließend auf die Leiste "Ausgewählte Familie", die unten angezeigt wird:

Dadurch erhalten wir den Code, den wir kopieren müssen, um diese Schriftart auf unserer Seite zu verwenden:

Fügen Sie den Code in unsere HTML-Datei ein:

und der Schriftfamiliencode zu unserem CSS:

Ich habe auch einige Buchstabenabstände hinzugefügt, da die Buchstaben überfüllt aussahen. Ich habe auch die Schriftgröße auf 26px erhöht.

Ausgabe:

Betten Sie das YouTube-Video ein

Das Filmplakat ist ohne ein Video des Trailers unvollständig.

Wir können das YouTube-Video mit "iframe" in unsere HTML-Seite aufnehmen. Mit dem "iframe" -Tag können wir eine andere HTML-Seite in die aktuelle Seite laden. Welche Seite geladen wird, entscheidet das Attribut „src“.

So kannst du mit