oh entschuldigung das habe ich nicht gewusst :'|
Beiträge von Homerlator
-
-
Guten Tag,
ich bin ein blutiger Css-Anfänger, ich habe eine Navigationsbar designt. Es funktioniert soweit, aber bitte um verbesserungs Vorschläge was den code betrifft. Denn so wie ich es gelöst habe gibt es Probleme dabei einen Schatten einzufügen.HTML
Alles anzeigen<!DOCTYPE html> <html lang="en-US"> <head> <link rel='stylesheet' href='style.css' type='text/css' media='all' /> </head> <body> <div class="container-accent"></div> <div class="container"></div> <div class="placeholder"></div> </body> </html>Code
Alles anzeigen:root{ --navbar: #305769; --accent: #578A98; --background: #183B4C; } body{ background-color: var(--background); margin: 0; } .placeholder{ float: left; height: 3vh; width: 100vw; background: var(--navbar); border-bottom: 0.5vh solid var(--accent); } .container{ position: absolute; border-top: 7vh solid var(--navbar); border-left: 7vh solid transparent; border-right: 7vh solid transparent; height: 0; width: 50vw; left: 50%; margin-right: -50%; transform: translate(-50%, 0); z-index: 2; } .container-accent{ content: ''; position: absolute; top: 3.1vh; border-top: 4.3vh solid var(--accent); border-left: 4.3vh solid transparent; border-right: 4.3vh solid transparent; height: 0; width: 50.4vw; left: 50%; margin-right: -50%; transform: translate(-50%, 0); }