[3.2] Div über den ganzen Wrap - geht das?
Verfasst: 14.10.2018 20:37
Hallo
Habe vermutlich eine sehr doofe Frage respektive ich denke es ist unmöglich.
Kann ich einen div über den ganzen Wrap machen? Meine Versuche sind leider alle fehlgeschlagen.
Versuch habe ich in overall_header.html gemacht. Müsste doch diese html Datei sein, oder?
Mein Effekt war leider am Ende des PC Bildschirms zu sehen und nicht über dem ganzen Wrap
Schlussendlich habe ich nur eine abgespeckte Version in der css direkt beim Wrap geschafft. [ externes Bild ]
Das ist ein spezieller Shadow Border. Wo die div class hin muss - vor dem Wrap denke ich doch. Aber wo muss der Abschluss hin?
CSS
Code ist von hier https://codepen.io/haibnu/pen/FxGsI
Habe vermutlich eine sehr doofe Frage respektive ich denke es ist unmöglich.
Kann ich einen div über den ganzen Wrap machen? Meine Versuche sind leider alle fehlgeschlagen.
Versuch habe ich in overall_header.html gemacht. Müsste doch diese html Datei sein, oder?
Mein Effekt war leider am Ende des PC Bildschirms zu sehen und nicht über dem ganzen Wrap

Schlussendlich habe ich nur eine abgespeckte Version in der css direkt beim Wrap geschafft. [ externes Bild ]

Code: Alles auswählen
<div class="box effect8">
CSS
Code: Alles auswählen
* Effect 8
* ===============================================*/
.effect8 {
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after {
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect8:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}