Willibergi
Mitglied
Hi Leute,
für meine Website versuche ich, die verschiedenen Abteile in Boxen aufzuteilen. Da ich aber die Boxen nicht unendlich lang haben möchte, haben sie alle eine vordefinierte Höhe und klappen sich nach einem Klick auf Mehr anzeigen automatisch auf. Damit man aber erkennt, dass es mit dem Text in der Box noch weitergeht, möchte ich einen einzigen, weißen inset-Schatten unten innen in die Box bringen. Das habe ich auch schon geschafft. Mein Problem ist jetzt aber, dass der Schatten, den ich bis jetzt habe, nur in einer anderen Farbe als der Hintergund sichtbar ist, sprich: In weiß sieht man ihn nicht. Ich will aber, dass der Schatten (wie auf dem Bild anbei) über dem Text liegt, sodass dieser klar ausgeblendet wird. Im zweiten Bild anbei sieht man, wie die Box mit schwarzem Schatten aussieht. Ich hoffe, das war nicht zu kompliziert erklärt.
Hier mein Quellcode:
index.html
für meine Website versuche ich, die verschiedenen Abteile in Boxen aufzuteilen. Da ich aber die Boxen nicht unendlich lang haben möchte, haben sie alle eine vordefinierte Höhe und klappen sich nach einem Klick auf Mehr anzeigen automatisch auf. Damit man aber erkennt, dass es mit dem Text in der Box noch weitergeht, möchte ich einen einzigen, weißen inset-Schatten unten innen in die Box bringen. Das habe ich auch schon geschafft. Mein Problem ist jetzt aber, dass der Schatten, den ich bis jetzt habe, nur in einer anderen Farbe als der Hintergund sichtbar ist, sprich: In weiß sieht man ihn nicht. Ich will aber, dass der Schatten (wie auf dem Bild anbei) über dem Text liegt, sodass dieser klar ausgeblendet wird. Im zweiten Bild anbei sieht man, wie die Box mit schwarzem Schatten aussieht. Ich hoffe, das war nicht zu kompliziert erklärt.
Hier mein Quellcode:
index.html
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="content-type" content="text/html;" charset="windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Lorem ipsum</title>
</head>
<body>
<div id="box1">
<div id="box1_top">Lorem ipsum</div>
<hr>
<div id="box1_mid">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</div>
<div id="box1_mid_more">
<span id="moreDiv">
<span id="moreLess">Mehr</span> anzeigen</span>
</div>
<hr>
<div id="box1_btm">Lorem ipsum
</div>
</div>
</body>
</html>
Code:
BODY{
background:#F1F1F1;
font-family:"Segoe UI";
}
#box1{
width:700px;
height:auto;
background:white;
box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1);
border:0px solid green;
padding:10px;
}
#box1_top{
width:700px;
height:auto;
background:#FFFFFF;
font-size:25pt;
}
#box1_mid{
width:700px;
height:150px;
background:#FFFFFF;
overflow:hidden;
text-align:justify;
box-shadow: 0px -100px 75px -100px gray inset;
}
#box1_mid_more{
width:700px;
height:20px;
background:#FFFFFF;
box-shadow: 10px -10px 100px #FFFFFF;
}
#box1_btm{
width:700px;
height:auto;
background:#FFFFFF;
}
