Kreative Werbeplakat-Design mit Holztexturen

Einführung

In diesem Projekt lernst du, wie du ein kreatives Werbeplakatdesign erstellst, das die Geschichte von "Fantasie-Tal" und den Wohlstand von "Traumbucht" verbindet. Du wirst lernen, wie du das Werbeplakat mit einem holzstrukturierten Hintergrund und einem geneigten oberen Schild stylst, um passierenden Personen ein fesselndes künstlerisches Erlebnis zu bieten.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du den Randradius und das Hintergrundbild des Werbeplakatelements einstellst
• Wie du die oberen Ecken abrundest und das obere Schildelement neigst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• CSS-Eigenschaften wie border-radius und transform zu verwenden, um einzigartige Designelemente zu erstellen
• Hintergrundbilder einzubinden, um das Gesamtästhetikum eines Webdesigns zu verbessern
• Designelemente zu kombinieren, um eine zusammenhängende und visuell ansprechende Layout zu erstellen

Projektstruktur einrichten

Um loszulegen, öffne die Experimentierumgebung, und die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
├── images
│   └── woodiness.jpg
└── index.html

Darin:

• index.html ist die Hauptseite.
• images ist der Ordner zum Speichern von Projektbildern.
• css/style.css ist die CSS-Datei, in der du den Code ergänzen musst.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne die "Web 8080" oben auf der VM und aktualisiere die Seite manuell, um das folgende Ergebnis in deinem Browser zu sehen:

Werdeplakat-Hintergrund einstellen

In diesem Schritt lernst du, wie du den Hintergrund des Werbeplakatelements einstellst und seine Ecken abrundest.

1. Öffne die Datei css/style.css.

2. Lasse dir die Klasse .billboard suchen.

3. Füge folgenden Code hinzu, um den Randradius und das Hintergrundbild einzustellen:

   border-radius: 10px;
   background-image: url(../images/woodiness.jpg);
   

   • Die Eigenschaft border-radius setzt den Randradius des .billboard-Elements auf 10 Pixel, wodurch abgerundete Ecken entstehen.
   • Die Eigenschaft background-image setzt das Hintergrundbild des .billboard-Elements auf woodiness.jpg, das sich im Ordner images befindet.

Den oberen Schild neigen

In diesem Schritt lernst du, wie du die oberen Ecken des oberen Schildelements abrundest und es neigst.

1. Lasse dir die Klasse .top-sign in der Datei css/style.css suchen.

2. Füge folgenden Code hinzu, um die oberen Ecken abzurunden und das Element zu neigen:

   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   transform: skewX(-20deg);
   

   • Die Eigenschaften border-top-left-radius und border-top-right-radius setzen die oberen linken und rechten Ecken des .top-sign-Elements auf einen Radius von 15 Pixeln, wodurch abgerundete Ecken entstehen.
   • Die Eigenschaft transform: skewX(-20deg) neigt das .top-sign-Element um -20 Grad auf der x-Achse.

Nach Abschluss dieser drei Schritte sollte das Werbeplakat einen abgerundeten, holzstrukturierten Hintergrund haben, und das obere Schild sollte mit abgerundeten oberen Ecken geneigt sein, wie in dem fertigen Effektbild gezeigt.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.