Erstellen von stilvollem Briefpapier
Wenn Sie den richtigen Eindruck hinterlassen möchten, kann das Schreiben eines Briefes auf schönem Briefpapier ein guter Anfang sein. In dieser Bewertung fordern wir Sie heraus, eine Online-Vorlage zu erstellen, um ein solches Aussehen zu erzielen.
| Voraussetzungen: | Bevor Sie diese Bewertung versuchen, sollten Sie bereits alle Artikel in diesem Modul durchgearbeitet haben. |
|---|---|
| Ziel: | Das Verständnis des CSS-Boxmodells und anderer boxbezogener Funktionen wie der Implementierung von Hintergründen zu testen. |
Ausgangspunkt
Um mit dieser Bewertung zu beginnen, sollten Sie:
- Machen Sie lokale Kopien von HTML und CSS — speichern Sie sie als
index.htmlundstyle.cssin einem neuen Verzeichnis. - Speichern Sie lokale Kopien der oberes Bild, unteres Bild und Logo im gleichen Verzeichnis wie Ihre Code-Dateien.
Alternativ können Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden. Sie könnten das HTML einfügen und das CSS in einen dieser Online-Editoren einfügen.
Hinweis: Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
Projektauftrag
Sie haben die Dateien erhalten, die benötigt werden, um eine Briefpapier-Vorlage zu erstellen. Sie müssen nur die Dateien zusammenfügen. Um dies zu erreichen, müssen Sie:
Der Hauptbrief
-
Wenden Sie das CSS auf das HTML an.
-
Fügen Sie eine Hintergrunddeklaration zum Brief hinzu, die:
- Das obere Bild am oberen Rand des Briefes fixiert
- Das untere Bild am unteren Rand des Briefes fixiert
- Einen halbtransparenten Verlauf über die beiden vorherigen Hintergründe hinzufügt, der dem Brief etwas Textur verleiht. Machen Sie ihn ganz oben und unten leicht dunkel, aber vollständig transparent für einen großen Teil der Mitte.
-
Fügen Sie eine weitere Hintergrunddeklaration hinzu, die nur das obere Bild an den oberen Rand des Briefes hinzufügt, als Fallback für Browser, die die vorherige Deklaration nicht unterstützen.
-
Fügen Sie dem Brief eine weiße Hintergrundfarbe hinzu.
-
Fügen Sie dem Brief einen 1 mm Top- und Bottom-Rand in einer Farbe hinzu, die zum restlichen Farbschema passt.
Das Logo
- Fügen Sie dem h1 das Logo als Hintergrundbild hinzu.
- Fügen Sie einen Filter zum Logo hinzu, um ihm einen subtilen Schlagschatten zu verleihen.
- Kommentieren Sie nun den Filter aus und implementieren Sie den Schlagschatten auf eine andere (etwas mehr browserkompatible) Weise, die immer noch der Form des runden Bildes folgt.
Hinweise und Tipps
- Denken Sie daran, dass Sie einen Fallback für ältere Browser erstellen können, indem Sie die Fallback-Version einer Deklaration zuerst platzieren, gefolgt von der Version, die nur in neueren Browsern funktioniert. Ältere Browser wenden die erste Deklaration an und ignorieren die zweite, während neuere Browser die erste anwenden und diese dann durch die zweite überschreiben.
- Fühlen Sie sich frei, Ihre eigenen Grafiken für die Bewertung zu erstellen, wenn Sie möchten.
