Absolut! Hier sind drei einfache HTML-Dateien, die dir die verschiedenen Arten von Schwarz und subtilen "Lichteffekten" im Browser anzeigen:
Datei 1: Reines, "mattes" Schwarz (reines_schwarz.html)
<!DOCTYPE html>
<html>
<head>
<title>Reines Schwarz</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }
.schwarz { width: 200px; height: 200px; background-color: #000000; }
</style>
</head>
<body>
<div class="schwarz"></div>
</body>
</html>
Datei 2: Sehr dunkles Grau mit subtilem inneren "Glanz" (mattes_schwarz_glanz.html)
<!DOCTYPE html>
<html>
<head>
<title>Mattes Schwarz mit Glanz</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }
.schwarz {
width: 200px;
height: 200px;
background-color: #111111; /* Sehr dunkles Grau */
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.05); /* Subtiler, weißlicher innerer Schatten */
}
</style>
</head>
<body>
<div class="schwarz"></div>
</body>
</html>
Datei 3: Sehr dunkles Grau mit subtilem radialem Verlauf (mattes_schwarz_verlauf.html)
<!DOCTYPE html>
<html>
<head>
<title>Mattes Schwarz mit Verlauf</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }
.schwarz {
width: 200px;
height: 200px;
background-color: #111111; /* Sehr dunkles Grau */
background-image: radial-gradient(ellipse at center, #1a1a1a 0%, #111111 70%); /* Subtiler radialer Verlauf */
}
</style>
</head>
<body>
<div class="schwarz"></div>
</body>
</html>
So kannst du dir das ansehen:
Kopiere den Code jeder Datei in einen Texteditor (z.B. Notepad unter Windows, TextEdit unter macOS).
Speichere jede Datei mit dem entsprechenden Namen und der Endung .html (z.B. reines_schwarz.html).
Öffne die gespeicherten .html-Dateien in deinem Webbrowser.
Du wirst drei einfache schwarze Quadrate sehen, die jeweils leicht unterschiedliche visuelle Eigenschaften aufweisen. Das reine Schwarz wird sehr tief und ohne Reflexionen wirken. Das dunkle Grau mit dem inneren Schatten wird einen minimalen "inneren Glanz" haben, der ihm etwas Form verleiht. Das dunkle Grau mit dem radialen Verlauf wird subtile Helligkeitsunterschiede aufweisen, die ebenfalls einen leichten Eindruck von Tiefe erzeugen können.
Experimentiere gerne mit den Farbwerten und den box-shadow- oder radial-gradient-Parametern, um zu sehen, wie sich der visuelle Eindruck verändert!
Kommentare
Kommentar veröffentlichen