Info Box mit CSS
Hallo,
ich würde gerne eine variable Infobox mit CSS erstellen. Vom optischen so ähnlich wie die hier:
Mein Problem ist, das die Box ja in Ihrer Breite und Höhe variabel sein soll, je nachdem welchen Inhalt ich dort platziere.
Mein Frage: kann man das überhaupt mit so einer Vorlage und CSS irgendwie machen?
Danke für Eure Hilfe.
Viele Grüße
Michael
Mein Problem ist, das die Box ja in Ihrer Breite und Höhe variabel sein soll, je nachdem welchen Inhalt ich dort platziere.
Mein Frage: kann man das überhaupt mit so einer Vorlage und CSS irgendwie machen?
Danke für Eure Hilfe.
Viele Grüße
MichaelDer hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<style>
label,textarea{
width:80vw;
margin:0 auto;
display:block;
}
button{
width:300px;
margin:0 auto;
display:block;
}
textarea{
height:100px;
}
#helfer{
position:absolute;
margin:0 10vw;
}
#box:before{
content:'';
position:absolute;
right:0;
top:0;
background-image:url('/image/klammer.png');
background-size:cover;
z-index:10;
display:block;
height:50px;
width:50px;
}
body{
background:green;
}
#box {
border:1px solid black;
border-top: 30px solid #252525;
box-shadow: inset 0 3px 0 red,inset 0 3px 5px rgba(0,0,0,.5), 0 0 15px rgba(0,0,0,.28);
background-color: #FFFFAF;
background-image: linear-gradient(90deg, transparent 71px, #CB764A 69px, #CB764A 74px, transparent 74px, transparent 79px, #CB764A 79px, #CB764A 81px, transparent 80px), linear-gradient(#A4CE9A .1em, transparent .1em);
background-size: 100% 20px;
line-height: 21px !important;
padding: 20px 20px 20px 100px ;
}
#box p {
margin: 0 0 22px 0;
vertical-align: baseline;
}
#box:after{
content:'';
display:inline;
border:1px solid black;
box-shadow:0 20px 20px black;
transform:rotate(4deg);
position:absolute;
z-index:-1;
top:0;
width:100%;
height:90%;
left:0;
border-top: 30px solid #252525;
box-shadow: inset 0 3px 0 red,inset 0 3px 5px rgba(0,0,0,.5), 0 0 15px rgba(0,0,0,.28);
background-color: #FFFFAF;
background-image: linear-gradient(90deg, transparent 71px, #CB764A 69px, #CB764A 74px, transparent 74px, transparent 79px, #CB764A 79px, #CB764A 81px, transparent 80px), linear-gradient(#A4CE9A .1em, transparent .1em);
background-size: 100% 20px;
transform-origin: 70% 50%;
}
</style>
</head>
<body>
<label>Füge html Code ein</label>
<textarea> <h2>Testinhalt</h2>
<p>Hier im Beispiel ist jetzt html Code drinne <br>Was auch mit jeden anderen Inhalt klappen tut</p>
</textarea>
<button>Füge deinen Code oder text ein</button>
<br>
<br>
<hr>
<h4>Deine Infobox</h4>
<div id="helfer">
<div id="box">
<h2>Testinhalt</h2>
<p>Hier im Beispiel ist jetzt html Code drinne <br>Was auch mit jeden anderen Inhalt klappen tut</p>
</div>
</div>
<script>
document.getElementsByTagName('button')[0].addEventListener('click',function(){
text=document.getElementsByTagName('textarea')[0].value;
document.getElementById('box').innerHTML=text;
})
</script>
</body>
</html>