« Bac à sable » : différence entre les versions
De Omnis Bibliotheca
mAucun résumé des modifications |
mAucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
{{#css: | {{#css: | ||
.special-message-wrapper { | .special-message-wrapper { | ||
position: relative; | |||
max-width: 100%; | max-width: 100%; | ||
width: 800px; | width: 800px; | ||
height: 400px; | height: 400px; | ||
margin: auto; | margin: auto; | ||
overflow: hidden; | |||
--smw-border-width: 37px; | |||
} | |||
.special-message-inner-wrapper { | |||
position: absolute; | |||
top: var(--smw-border-width); | |||
left: var(--smw-border-width); | |||
width: calc(100% - calc(2 * var(--smw-border-width))); | |||
height: calc(100% - calc(2 * var(--smw-border-width))); | |||
perspective: 1400px; | perspective: 1400px; | ||
transform-style: preserve-3d; | transform-style: preserve-3d; | ||
| Ligne 15 : | Ligne 24 : | ||
left: 0; | left: 0; | ||
width: 100%; | width: 100%; | ||
height: | height: 80%; | ||
background: yellow; | background: yellow; | ||
transform-origin: center top !important; | transform-origin: center top !important; | ||
transform: rotateX(-30deg); | transform: rotateX(-25deg) translateZ(-45px); | ||
box-shadow: inset 0 0 20px 5px black; | |||
background: linear-gradient(135deg,#717978 0,#414444 25%,#575b5b 40%,#232625 55%,#3c4240 75%,#1f2322 85%); | |||
box-shadow: inset 0 2px 1px -1px #093435; | |||
background: radial-gradient(#093435,black) !important; | |||
} | |||
.special-message-bottom { | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 45%; | |||
background: red; | |||
transform-origin: center bottom !important; | |||
transform: translateZ(-70px) rotateX(30deg); | |||
box-shadow: inset 0 0 20px 5px black; | |||
background: linear-gradient(135deg,#717978 0,#414444 25%,#575b5b 40%,#232625 55%,#3c4240 75%,#1f2322 85%); | |||
box-shadow: inset 0 2px 1px -1px #093435; | |||
background: radial-gradient(#093435,black) !important; | |||
} | } | ||
.special-message-bottom{ | .special-message-middle-bar { | ||
position: absolute; | |||
left: 0; | |||
bottom: 0; | |||
width: 100%; | |||
height: 100%; | |||
background: red; | |||
z-index: 0 !important; | |||
transform: translateZ(-130px); | |||
background: linear-gradient(135deg,#717978 0,#414444 25%,#575b5b 40%,#232625 55%,#3c4240 75%,#1f2322 85%); | |||
} | |||
.special-message-side-left { | |||
position: absolute; | |||
left: 0; | |||
bottom: 0; | |||
width: 250px; | |||
height: 105%; | |||
background: green; | |||
transform-origin: left bottom !important; | |||
transform: translateZ(-70px) rotateY(90deg) rotateZ(-25deg); | |||
box-shadow: inset 0 0 20px 5px black; | |||
background: linear-gradient(135deg,#717978 0,#414444 25%,#575b5b 40%,#232625 55%,#3c4240 75%,#1f2322 85%); | |||
box-shadow: inset 0 2px 1px -1px #093435; | |||
background: radial-gradient(#093435,black) !important; | |||
} | |||
.special-message-side-right { | |||
position: absolute; | |||
right: 0; | |||
bottom: 0; | |||
width: 250px; | |||
height: 105%; | |||
background: pink; | |||
transform-origin: right bottom !important; | |||
transform: translateZ(-70px) rotateY(-90deg) rotateZ(25deg); | |||
box-shadow: inset 0 0 20px 5px black; | |||
background: linear-gradient(135deg,#717978 0,#414444 25%,#575b5b 40%,#232625 55%,#3c4240 75%,#1f2322 85%); | |||
box-shadow: inset 0 2px 1px -1px #093435; | |||
background: radial-gradient(#093435,black) !important; | |||
} | |||
.special-message-outer-wrapper { | |||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
| Ligne 26 : | Ligne 92 : | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
perspective: 1400px; | |||
transform-style: preserve-3d; | |||
perspective-origin: center center; | |||
--border-width: 28px; | |||
} | |||
.special-message-outer-top { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 250px; | |||
transform-origin: center top !important; | |||
transform: rotateX(-25deg); | |||
clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--border-width)) 100%, calc(100% - var(--border-width)) var(--border-width), var(--border-width) var(--border-width), var(--border-width) 100%, 0 100%); | |||
background: yellow; | |||
border-radius: 15px 15px 0 0; | |||
box-shadow: inset 0 0 20px 5px black; | |||
background: linear-gradient(135deg,#717978 0,#414444 25%,#575b5b 40%,#232625 55%,#3c4240 75%,#1f2322 85%); | |||
box-shadow: inset 0 2px 1px -1px #093435; | |||
background: radial-gradient(#093435,black) !important; | |||
} | |||
.special-message-outer-bottom { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 170px; | |||
transform-origin: center top !important; | |||
transform: rotateX(-25deg) translateY(250px) rotateX(25deg); | |||
clip-path: polygon(0 0, var(--border-width) 0, var(--border-width) calc(100% - var(--border-width)), calc(100% - var(--border-width)) calc(100% - var(--border-width)), calc(100% - var(--border-width)) 0, 100% 0, 100% 100%, 0 100%); | |||
background: red; | background: red; | ||
border-radius: 0 0 15px 15px; | |||
box-shadow: inset 0 0 20px 5px black; | |||
background: linear-gradient(135deg,#717978 0,#414444 25%,#575b5b 40%,#232625 55%,#3c4240 75%,#1f2322 85%); | |||
box-shadow: inset 0 -2px 1px -1px #093435; | |||
background: radial-gradient(#093435,black) !important; | |||
} | } | ||
}} | }} | ||
<div class="special-message-wrapper"> | <div class="special-message-wrapper"> | ||
<div class="special-message-top"> | <div class="special-message-inner-wrapper"> | ||
<div class="special-message-top"></div> | |||
<div class="special-message-bottom"></div> | |||
<div class="special-message-side-left"></div> | |||
<div class="special-message-side-right"></div> | |||
</div> | </div> | ||
<div class="special-message-bottom"> | <div class="special-message-outer-wrapper"> | ||
<div class="special-message-outer-top"></div> | |||
<div class="special-message-outer-bottom"></div> | |||
</div> | </div> | ||
</div> | </div> | ||
