<div id="float"></div>
// #divtober 15: Float
// a.singlediv.com/divtober2021
white(alpha)
rgba(255,255,255,alpha)
body
min-height: 320px
height: 100vh
position: relative
background-color: lightblue
div
position: absolute
left: 50%
top: 50%
&:before,
&:after
display: block
content: ''
position: absolute
@media (max-width: 400px)
transform: scale(.8)
#float
font-size: 10px
width: 35em
height: 25.5em
margin-left: -(@width/2)
margin-top: -(@height/2)
background-repeat: no-repeat
background-image: linear-gradient(#444, #444),
linear-gradient(#444, #444),
linear-gradient(150deg, gold 35%,
goldenrod 36%,
goldenrod 60%,
gold 61%),
linear-gradient( 110deg, alpha(#444,0) 55%, #444 56%),
linear-gradient(-110deg, alpha(#444,0) 55%, #444 56%),
linear-gradient(150deg, #444 40%, alpha(#444,0) 41%),
radial-gradient(ellipse, bisque 5%,
burlywood 6%, burlywood 10%,
bisque 11%, bisque 15%,
burlywood 16%, burlywood 20%,
bisque 21%, bisque 25%,
burlywood 26%, burlywood 30%,
bisque 31%, bisque 35%,
burlywood 36%, burlywood 40%,
bisque 41%, bisque 45%,
burlywood 46%, burlywood 50%,
bisque 51%, bisque 55%,
burlywood 56%, burlywood 60%,
peru 61%, peru 65%,
alpha(peru, 0) 66%),
linear-gradient(saddlebrown, saddlebrown),
linear-gradient(saddlebrown, saddlebrown),
linear-gradient(saddlebrown, saddlebrown),
linear-gradient(saddlebrown, saddlebrown),
radial-gradient(ellipse, sienna 65%, alpha(sienna, 0) 66%),
linear-gradient(sienna, sienna),
linear-gradient(110deg, alpha(sienna,0) 20%,
sienna 21%,
sienna 50%,
alpha(sienna,0) 51%),
radial-gradient(ellipse, white(.5) 60%, white(0) 62%),
radial-gradient(ellipse, crimson 70%,
alpha(crimson,0) 71%),
radial-gradient(ellipse, crimson 70%,
alpha(crimson,0) 71%),
linear-gradient(sienna, sienna),
radial-gradient(ellipse, white(.5) 60%, white(0) 62%),
radial-gradient(ellipse, mediumseagreen 70%,
alpha(mediumseagreen,0) 71%),
radial-gradient(ellipse, mediumseagreen 70%,
alpha(mediumseagreen,0) 71%),
linear-gradient(sienna, sienna)
background-size: 20em .6em,
3em 2em, 4em 3em,
10.5em 15.2em, 10.5em 15.2em, 10em 4em,
5em 8em,
8em .2em, 6em .2em, 4em .2em, 7.8em .2em,
5em 8em, 10.5em 7.4em, 4em 2em,
1em 2em, 3em 4em, 3em 4em,
.3em 1em,
1em 2em, 3em 4em, 3em 4em,
.3em 1em
background-position: 0 15em,
8.5em 12.5em, 8em 12em,
0 0, 9.5em 0, 10em 0,
20em 2em,
25em 3.3em, 27.6em 4.5em, 26em 6.8em, 25.3em 8.5em,
30em 2em, 22.3em 2.3em, 25em .6em,
right 10.5em top 13.8em,
right 9em top 12.9em, right 7em top 12.9em,
right 9.3em top 12.5em,
right 5em top 13.8em,
right 3.4em top 12.9em, right 1.3em top 12.9em,
right 3.7em top 12.5em
&:before
width: 25em
height: 5em
bottom: 0
right: 0
background-color: peru
background-repeat: no-repeat
background-image: radial-gradient(ellipse at 50% 10%, burlywood 50%,
alpha(burlywood,0) 52%),
radial-gradient(ellipse at 50% 10%, burlywood 50%,
alpha(burlywood,0) 52%),
radial-gradient(ellipse at 50% 10%, burlywood 50%,
alpha(burlywood,0) 52%),
radial-gradient(ellipse at 50% 10%, burlywood 50%,
alpha(burlywood,0) 52%),
radial-gradient(ellipse at 50% 10%, burlywood 50%,
alpha(burlywood,0) 52%)
background-size: 1.5em 3em
background-position: 5em 0,
8.4em 0,
50% 0,
right 5em top 0,
right 8.4em top 0
border-top-left-radius: 7em 5em
border-top-right-radius: 7em 5em
border-bottom-left-radius: 2em
border-bottom-right-radius: 2em
&:after
width: 1em
height: 1em
left: 4em
bottom: 2.4em
background-color: grey
border-top-left-radius: .5em .6em
border-top-right-radius: .5em .6em
border-bottom-left-radius: .3em
border-bottom-right-radius: .3em
box-shadow: -1em -2em 0 -.2em grey,
-2em -1em 0 -.3em grey,
-1em -1em 0 -.3em grey,
.2em -3em 0 -.2em grey,
2em -3em 0 -.3em grey,
-2.5em -3.7em 0 -.3em grey,
1em -1.5em 0 -.1em grey,
2em -.3em 0 -.2em grey
View Compiled
// @lynnandtonic
// a.singlediv.com
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.