Eine cool aussehende Box
In dieser Bewertung erhalten Sie weitere Übung im Erstellen von cool aussehenden Boxen, indem Sie versuchen, eine auffällige Box zu erstellen.
| Voraussetzungen: | Bevor Sie diese Bewertung versuchen, sollten Sie alle Artikel in diesem Modul durchgearbeitet haben. |
|---|---|
| Ziel: | Das Verständnis des CSS-Box-Modells und anderer boxbezogener Features wie Rahmen und Hintergründe zu testen. |
Ausgangspunkt
Um diese Bewertung zu beginnen, sollten Sie:
- Machen Sie lokale Kopien der Start-HTML und CSS — speichern Sie diese als
index.htmlundstyle.cssin einem neuen Verzeichnis.
Alternativ können Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden. Sie könnten das HTML einfügen und das CSS in einem dieser Online-Editoren ausfüllen.
Hinweis: Wenn Sie nicht weiterkommen, können Sie uns in einem unserer Kommunikationskanäle kontaktieren.
Projektauftrag
Ihre Aufgabe ist es, eine coole, schicke Box zu erstellen und den Spaß zu erkunden, den wir mit CSS haben können.
Allgemeine Aufgaben
- Wenden Sie das CSS auf das HTML an.
Die Box stylen
Wir möchten, dass Sie das bereitgestellte <div> stylen und ihm Folgendes geben:
- Eine angemessene Breite für eine große Box, sagen wir etwa 200 Pixel.
- Eine angemessene Höhe für eine große Box, wobei Sie den Text vertikal zentrieren.
- Zentrieren Sie die Box horizontal.
- Zentrieren Sie den Text innerhalb der Box.
- Eine leichte Vergrößerung der Schriftgröße auf etwa 17-18 Pixel berechneten Stil. Verwenden Sie
rems. Schreiben Sie einen Kommentar darüber, wie Sie den Wert ermittelt haben. - Eine Grundfarbe für das Design. Geben Sie der Box diese Farbe als Hintergrundfarbe.
- Eine kontrastierende Farbe für den Text und einen schwarzen Textschatten.
- Einen ziemlich subtilen Rahmenradius.
- Einen 1-Pixel-Breit-Solid-Rahmen mit einer Farbe, die dem Grundton ähnlich, aber etwas dunkler ist.
- Einen linearen halbtransparenten schwarzen Verlauf, der zur unteren rechten Ecke verläuft. Beginnen Sie vollständig transparent, zum etwa 0,2 Opazität bei 30% abgestuft, und bleiben Sie bis zum Ende in der gleichen Farbe.
- Mehrere Schlagschatten. Geben Sie ihm einen Standard-Box-Schatten, um die Box leicht angehoben wirken zu lassen. Die anderen beiden sollten Innen-Schatten sein — ein halbtransparenter weißer Schatten nahe der oberen linken und ein halbtransparenter schwarzer Schatten nahe der unteren rechten Ecke — um den schönen erhabenen 3D-Effekt der Box zu verstärken.
Hinweise und Tipps
- Verwenden Sie den W3C CSS Validator, um Fehler in Ihrem CSS zu erkennen und zu beheben.
