Herausforderung: Eine cool aussehende Box
In dieser Herausforderung können Sie weiter üben, coole Boxen zu erstellen, indem Sie versuchen, eine auffällige Box zu gestalten.
Ausgangspunkt
Um mit dieser Herausforderung zu beginnen, sollten Sie:
- Lokale Kopien des Start-HTML und CSS erstellen – speichern Sie sie als
index.htmlundstyle.cssin einem neuen Verzeichnis.
Alternativ könnten 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 ergänzen.
Hinweis: Wenn Sie feststecken, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
Projektbeschreibung
Ihre Aufgabe ist es, eine coole, schicke Box zu erstellen und den Spaß, den man mit CSS haben kann, zu erkunden.
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 um die 200 Pixel.
- Eine angemessene Höhe für eine große Box, wobei der Text vertikal zentriert wird.
- Zentrieren Sie die Box horizontal.
- Zentrieren Sie den Text innerhalb der Box.
- Eine leichte Erhöhung der Schriftgröße, auf etwa 17-18 Pixel im 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.
- Ein ziemlich subtiler abgerundeter Rand.
- Einen 1-Pixel-Solidrand mit einer Farbe, die der Grundfarbe ähnlich ist, jedoch in einem etwas dunkleren Farbton.
- Einen linearen halbtransparenten schwarzen Verlauf, der zur unteren rechten Ecke verläuft. Machen Sie ihn zu Beginn komplett transparent, verlaufend auf etwa 0,2 Opazität bis 30% und verbleibend in dieser Farbe bis zum Ende.
- Mehrere Box-Schatten. Versehen Sie ihn mit einem Standard-Box-Schatten, um die Box leicht von der Seite abgehoben wirken zu lassen. Die anderen beiden sollten eingefügte Box-Schatten sein – ein halbtransparenter weißer Schatten in der Nähe der oberen linken Ecke und ein halbtransparenter schwarzer Schatten in der Nähe der unteren rechten Ecke – um den schönen erhabenen 3D-Look der Box zu verstärken.
Hinweise und Tipps
- Verwenden Sie den W3C CSS Validator, um Fehler in Ihrem CSS zu finden und zu beheben.
