Rand und weiche Schatten

dh1sbg

Hallo!

ich habe zwei Divs:

HTML

<div id="container" style="width:100%; height:100%; background-image: linear-gradient(to top, white 0%, rgb(117, 26, 255) 90%);">  


<div id="contained" style="width:55%;  background-color:white; padding:10px;">....

Mein Ziel:

1. Frage, an deren Lösung ich bis jetzt scheitere

Ich möchte diesen blauen Balken HINTER Contained stellen. Wie geht das?

2. Frage:

Ich versuche einen weichen Schatten bei Contained zu erstellen, Bis jetzt fand ich aber nur Anleitungen für harten Schatten:

Meine Idee:

Vielen Dank für jeden Tipp & Hilfe

Bruno

basti1012

Mit der Erklärung kann ich nicht viel anfangen.
Habe aus deine divs mal das gemacht

*** Link entfernt weil Seite nicht mehr erreichbar ***

das ist das ein zigste, was ich verstanden habe ,weil mit der Erklärung komme ich nicht weit

Gastl

Den Schatten kann man mit box-shadow: erreichen.

dh1sbg

Zitat von basti1012

mit der erklärung kann ich nicht viel anfangen.
habe aus deine divs mal das gemacht https://codepen.io/basti1012/pen/bLjXeM das ist das einzigste was ich verstanden habe ,weil mit der erklärung komme ich nicht weit

Hallo Basti,

mit dem weichen Schatten habe ich hinbekommen. das Bild zeigt meinen Entwurf.

mir geht es um das hintere Div, das einen orangenen Balken haben soll.

das soll mein Container werden (Ja CSS ist ausgeladen)

Es geht mir also um das DIV Container.

Wie bekomme ich "elegant" diesen orangenen Balken hinter den Container DIV CONTAINED?

Verständlicher?

Liebe Grüße

Bruno

djheke

Hier mal so als Anregung.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Balken</title>
<style>


* {
  margin:0;
 padding:0;
 box-sizing:border-box;
}


html,body {
 margin:5px;
 height:100%;
}


body {
 background:#ddd;
}


body:before  {
 content:"";
 position:absolute;
 top:3.125rem;
 left:0;
 right:0;
 display:block;
 height:6.25rem;
 
 background:orange;
 z-index:-1;
}


header {
 background:gray;
 height:6.25rem;
 padding:10px;
}


.wrapper {
 background:#fff;
 box-shadow:0 0 10px #000;
 width:80%;
 margin:0 auto;
 padding-top:2.25rem;
 height:100%;
}


main {
 padding:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<header><h1>Meine Homepage</h1></header>
<main>
<h2>Hallo Welt</h2>
</main>
</div>
</body>
</html>

Alles anzeigen

dh1sbg

Hallo djhecke,

VIELEN Dank - jetzt weiss ich endlich, wo mein Fehler lag!

Danke!

Rand und weiche Schatten

Tags

Benutzer online in diesem Thema