Skip to content

Instantly share code, notes, and snippets.

@soter19

soter19/index.html

Created February 20, 2019 13:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save soter19/94639b5001f0280090375ba78aa02b17 to your computer and use it in GitHub Desktop.
Save soter19/94639b5001f0280090375ba78aa02b17 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Still Life - Water and Lemons
Raw
index.html
<pic>
<background>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</background>
<item1>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</item1>
<item2>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</item2>
<item3>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i>
<i></i>
<i></i>
<i></i>
<i></i>
</i>
<i></i>
<i></i>
<i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</i>
<i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</i>
<i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</item3>
</pic>
Raw
pure-css-still-life-water-and-lemons.markdown
Raw
script.js
// A Pure CSS Still Life
// No images, just CSS
// Probably doesn't work on Edge
// www.benevansdesign.co.uk
// www.instagram.com/benevansdesign
// twitter.com/ivorjetski
// also checkout demandrawkcab.com for more CSS sketches
Raw
style.scss
$body: #190d23;
$none: rgba(#000,0);
$b1: #010000;
@media (orientation:landscape) {
body {
font-size: 1vh;
}
}
@media (orientation:portrait) {
body {
font-size: 1vw;
}
}
body {
background: $body;
text-align: center;
}
img {
height: 96em;
}
@function multiple-box-shadow ($n, $c) {
$value: '#{random(22)}em #{random(22)}em .1em ' + $c;
@for $i from 2 through $n {
$value: '#{$value} , #{random(22)}em #{random(22)}em .25em '+ $c;
}
@return unquote($value);
}
$dots: multiple-box-shadow(150, #302512);
$dots2: multiple-box-shadow(150, #302512);
$dots3: multiple-box-shadow(500, #302512);
$dots4: multiple-box-shadow(1000, #302512);
$dots5: multiple-box-shadow(500, #7A7C11);
$dots6: multiple-box-shadow(500, #ffe759);
pic *, pic *:before, pic *:after {
display: block;
box-sizing: border-box;
}
pic i, pic *:after, pic *:before, pic:after, pic:before {
content: '';
position: absolute;
left: 0;
top: 0;
}
pic {
display: inline-block;
height: 96em;
width: 73em;
position: relative;
overflow: hidden;
border-radius: 5em;
&:after {
box-shadow: inset 0 0 5em $b1;
width: 100%;
height: 100%;
border-radius: 5em;
}
}
background {
&:after {
width: 100%;
height: 100%;
background: linear-gradient(to right,rgba(#000,.3),$none);
}
& i:nth-of-type(1) {
width: 100%;
height: 100%;
background: linear-gradient(to right,#281E18,#443C33);
&:before {
width: 100%;
height: 57%;
background: linear-gradient(#8C877B, #574737);
border-bottom: 1em solid #000;
box-shadow: 0 -10em 10em 10em #000, 0 -10em 10em 10em #000, 0 -10em 10em 10em #000, inset 0 -10em 10em -10em #000, inset 0 -10em 12em -10em #000;
}
&:after {
width: 100%;
height: 80%;
background: linear-gradient($none, #030409);
transform: translate3d(0, 55%, 0);
}
}
}
item2 {
&:before {
height: 17em;
width: 3em;
box-shadow: inset -.25em 0 .25em #F7F79A, inset -1em 0 2em -.5em #c8c819;
border-radius: 50%;
transform: translate3d(38em, 64em,0) rotate(5deg);
-webkit-mask-image: linear-gradient($none, #000, $none);
}
//rings
& i:nth-of-type(17) {
width: 31em;
height: 6em;
border: .3em solid $b1;
border-top: .3em solid #443B36;
border-radius: 50%;
transform: translate3d(15em,14em,0);
box-shadow: inset 0 .1em .5em rgba(#FFF,.5), 0 .5em .5em -.5em rgba(#FFF,.5), inset -.5em .5em .1em -.6em #fff, 0 -.2em 0 $b1, 0 .2em 0 $b1;
&:before {
width: 28em;
height: 2em;
border: 1em solid #5D5247;
border-bottom: none;
border-radius: 50%;
transform: translate3d(1.1em,19em,0);
box-shadow: inset 0 .3em 0 #271B1B, 0 -.1em 0 $b1;
}
&:after {
width: 22em;
height: 9em;
border: 1em solid $b1;
border-radius: 50%;
transform: translate3d(4em,35em,0) scaleY(.35);
box-shadow: inset 0 0 1em $b1, 0 0 1em $b1, 0 0 5em $b1, 2em 0 5em $b1, -2em 0 5em $b1;
background: linear-gradient( rgba($b1,.7), $none), #2b241c;
opacity: .7;
}
}
//base
& i:nth-of-type(21) {
width: 14em;
height: 7em;
border-bottom: .5em solid $b1;
border-radius: 0 0 7em 7em;
transform: translate3d(20em,80em,0) scaleX(1.45);
transform-origin: 0 0;
background: #5D5440;
&:before {
width: 14em;
height: 7em;
border-bottom: .75em solid #433732;
border-radius: 0 0 7em 7em;
transform: translate3d(0em,-1em,0);
transform-origin: 0 0;
background: radial-gradient( #433732, $none );
}
&:after {
width: 13em;
height: 7em;
border-radius: 0 0 7em 7em;
transform: translate3d(.5em,0em,0) scaleY(.2);
transform-origin: 0 0;
background: none;
box-shadow: .75em 0 2em #180C0C, -.75em 0 2em #180C0C, inset .1em 0 1em rgba(#fff,.2), inset -.1em 0 1em rgba(#fff,.2);
}
}
//inside base
& i:nth-of-type(22) {
width: 10em;
height: 5em;
border-bottom: 1em solid $b1;
border-radius: 0 0 5em 5em;
transform: translate3d(22.5em,77em,0) scaleX(1.5) scaleY(.4);
transform-origin: 0 0;
background: radial-gradient( at 10% 50%, #C0C1D4,#5D5440, #3A362A);
box-shadow: 0 1em 0 #5D5440;
&:before {
width: 13.5em;
height: 7em;
border-bottom: 1em solid $b1;
border-radius: 0 0 7em 7em;
transform: translate3d(-1.75em,2em,0);
transform-origin: 0 0;
box-shadow: 0 1em 0 #5D5440, 0 1.1em .5em $b1;
}
&:after {
width: 13em;
height: 11em;
border: .1em dashed $none;
border-radius: 50%;
transform: translate3d(-1.5em,3em,0) scaleY(2);
box-shadow: -.1em .1em 0 -.05em #CDC7CB;
}
}
//more base rings
& i:nth-of-type(23) {
width: 21em;
height: 5em;
border-radius: 50%;
transform: translate3d(19.75em,72em,0);
box-shadow: .5em .25em 0 -.25em $b1, inset .5em -.25em .5em -.5em rgba(#CDC7CB,.5);
&:before {
width: 6em;
height: 7em;
border-radius: 50%;
transform: translate3d(8em,10.75em,0) scaleY(.15);
transform-origin: 0 0;
box-shadow: inset 0 0 1em 0 $b1, 0 0 1em 0 $b1;
opacity: .5;
}
}
//right side
& i:nth-of-type(24) {
width: 1em;
height: 15em;
transform: translate3d(44em,17.1em,0) skewX(-5deg) skewY(30deg);
background: linear-gradient( rgba(#CDC7CB,.5), $none);
&:before {
width: 1em;
height: 3em;
transform: translate3d(0em,13.5em,0) skewY(-15deg);
background: linear-gradient( rgba(#CDC7CB,.2), rgba(#CDC7CB,.5));
border-radius: 1em 0 0 0;
}
&:after {
width: .4em;
height: 65em;
background: linear-gradient( rgba($b1,.75), $none, rgba(#CDC7CB,.75), $none, rgba($b1,.1), rgba(#CDC7CB,.75),$none);
transform: translate3d(.8em,-1em,0);
}
}
//left side
& i:nth-of-type(25) {
width: 5em;
height: 70em;
transform: translate3d(17.6em,14.3em,0) skewX(4.5deg) skewY(-30deg);
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, #000 50%, rgba(#000,.5) 55%, $none);
&:before {
width: 32em;
height: 6em;
border-radius: 50%;
border: .75em solid $none;
transform: translate3d(-1em,7.7em,0) skewX(-4.5deg) skewY(30deg);
box-shadow: 0 -.2em 0 rgba(#FFF,.75), inset 0 .5em .1em rgba(#FFF,.75);
}
&:after {
width: 2em;
height: 64em;
background: linear-gradient(to right, #443630, $none);
transform: translate3d(0em,1em,0);
}
}
//more left side
& i:nth-of-type(26) {
width: .65em;
height: 36em;
transform: translate3d(16.4em,16.4em,-1em) skewX(4.5deg) skewY(-30deg);
background: linear-gradient( $none, rgba(#CDC7CB,.75) 5%, rgba(#CDC7CB,.5) 40%, $none 45%, $none 55%, rgba(#CDC7CB,.3));
&:before {
width: 4em;
height: 10em;
transform: translate3d(.5em,5em,0) skewX(-.5deg) skewY(22deg);
background: linear-gradient($none, rgba(#CDC7CB,.1),$none, rgba(#CDC7CB,.2),$none, rgba(#CDC7CB,.5),$none,rgba(#CDC7CB,.2), $none, rgba(#CDC7CB,.1),rgba(#CDC7CB,.1),$none);
-webkit-mask-image: linear-gradient(to right, $none, #000 50%, rgba(#000,.5) 55%, $none);
}
&:after {
width: .4em;
height: 65em;
background: linear-gradient(rgba(#CDC7CB,.75) 5%, rgba(#CDC7CB,.1) 30%, $none 55%, rgba(#CDC7CB,.75) 56%,$none 80%);
transform: translate3d(.8em,1.1em,0) skewX(-.5deg) skewY(60deg);
}
}
//middle
& i:nth-of-type(27) {
width: .5em;
height: 70em;
transform: translate3d(29em,16.4em,0) skewX(.5deg);
background: linear-gradient( $none, rgba(#CDC7CB,.1) 5%, rgba(#CDC7CB,.05) 20%, $none 45%, rgba(#CDC7CB,.1) 60%, $none 70%, $none 80%, rgba(#CDC7CB,.05) 90%, $none );
&:before {
width: .5em;
height: 70em;
transform: translate3d(1.25em,0em,0) skewX(-1deg);
background: linear-gradient( $none, $none 43%, rgba(#CDC7CB,.075) 55%, $none 70%, $none );
}
&:after {
width: 3em;
height: 71em;
transform: translate3d(7em,-1em,0) skewX(-4deg) skewY(10deg);
background: linear-gradient( rgba(#CDC7CB,.075), $none 40%, rgba(#CDC7CB,.075) 55%, $none 70%, $none );
-webkit-mask-image: linear-gradient(to right,#000 50%, rgba(#000,.2));
}
}
// right side
& i:nth-of-type(28) {
width: 8em;
height: 70em;
transform: translate3d(35.2em,14.3em,0) skewX(-5deg) skewY(30deg);
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, $none 50%, rgba(#000,.5) 55%, #000);
&:before {
width: 32em;
height: 6em;
border-radius: 50%;
border: .75em solid $none;
transform: translate3d(-23.5em,7.1em,0) skewX(4deg) skewY(-30deg);
box-shadow: 0 .2em 0 rgba(#FFF,.75), inset 0 -.1em .1em rgba(#FFF,.9);
}
&:after {
width: 2em;
height: 64em;
background: linear-gradient(to right, $none, #49413e);
opacity: .5;
transform: translate3d(6em,.5em,-1em);
}
}
//left side
& i:nth-of-type(29) {
width: .5em;
height: 5em;
transform: translate3d(17em,17em,0) skewX(4deg) skewY(-20deg);
background: linear-gradient( #fff, $none);
&:before {
width: .5em;
height: 5em;
transform: translate3d(.75em,0em,0);
background: linear-gradient( #fff, $none);
opacity: .5;
}
&:after {
width: .5em;
height: 1em;
transform: translate3d(1.5em,.1em,0);
background: linear-gradient(#fff, $none);
opacity: .5;
}
}
//rightside back
& i:nth-of-type(12) {
width: 5em;
height: 70em;
transform: translate3d(37.5em,19.7em,-3em) skewX(-5deg) skewY(-15deg);
overflow: hidden;
&:before {
width: 4em;
height: 19.5em;
background: linear-gradient(to right, rgba(#fff,.5),$none, $none, rgba(#CDC7CB,.3), rgba($b1,.3), rgba($b1,.4), rgba(#2D321F,.9), rgba($b1,.9));
transform: translate3d(1.5em,-5em,0) skewX(1deg) skewY(20deg);
opacity: .6;
}
&:after {
width: 1em;
height: 4em;
background: #EDFAFE;
transform: translate3d(.75em,4em,-1em) skewY(-30deg);
border-radius: .1em 1em 0 0;
}
}
//rightside back2
& i:nth-of-type(13) {
width: 1em;
height: 2em;
transform: translate3d(40.5em,28.5em,-3em) skewX(-4deg) skewY(-15deg);
background: linear-gradient(#EDFAFE, rgba(#CDDFF7,.7));
border-radius: .1em .5em 0 0;
opacity: .9;
&:before {
width: 1em;
height: 9em;
transform: translate3d(-.8em,-3em,0) skewX(0deg) skewY(20deg);
border-right: .4em solid #EDFAFE;
border-radius: 0 50% 50% 0;
-webkit-mask-image: linear-gradient(#000 50%, $none);
}
&:after {
width: 31em;
height: 7em;
transform: translate3d(-.5em,-3em,0) skewX(4deg) skewY(15deg);
border-radius: 50%;
border-top: .5em solid $none;
border-left: .5em solid $none;
box-shadow: -.1em -.1em 0 0 $b1, inset .1em .1em 0 0 #fff;
-webkit-mask-image: linear-gradient(to right, #000 5%, $none 10%);
}
}
//rightside back3
& i:nth-of-type(14) {
width: .2em;
height: 9em;
transform: translate3d(43em,25em,0) skewX(-5deg) skewY(-15deg);
background: linear-gradient(#EDFAFE, $none);
border-radius: 50% 0 0 50%;
&:before {
width: 1em;
height: 9em;
transform: translate3d(-.5em,1em,0) skewX(0deg) skewY(20deg) rotate(-3deg);
border-left: .3em solid #CDC7CB;
border-radius: 50% 0 0 50%;
-webkit-mask-image: linear-gradient( #000, $none);
}
&:after {
width: 31em;
height: 7em;
transform: translate3d(-.2em,1em,0) skewX(4deg) skewY(15deg);
border-radius: 50%;
border-top: .5em solid $none;
border-left: 0em solid $none;
box-shadow: -.1em -.2em 0 0 $b1, inset .1em .1em 0 0 #fff;
-webkit-mask-image: linear-gradient(to right, #000 2.5%, $none 5%);
}
}
//yellow light top right
& i:nth-of-type(10) {
width: 1em;
height: 3em;
transform: translate3d(35em,21.5em,0) rotate(1deg);
background: #FFFEFD;
border-radius: .5em 0 .5em 0;
box-shadow: -.15em -.15em .5em #5F5634, -.5em -.5em 1em #EAD9AD;
&:before {
width: 1em;
height: .5em;
transform: translate3d(0em,-1em,0);
background: #FFFEFD;
border-radius: .5em 0 0 0;
box-shadow: -.15em -.15em .5em #5F5634, -.5em -.5em 1em #EAD9AD;
}
&:after {
width: .75em;
height: .75em;
transform: translate3d(0em,3.5em,0);
background: #FFFEFD;
border-radius: .5em 0 .5em 0;
box-shadow: -.15em 0 .5em #5F5634, -.5em 0 1em #EAD9AD;
}
}
//yellow light top right 2
& i:nth-of-type(11) {
width: .5em;
height: 4.5em;
transform: translate3d(35em,28em,0) rotate(-3deg);
border-radius: 50% 0 0 50%;
border-left: .3em solid #EAD9AD;
box-shadow: .7em 0 .2em .1em rgba(#EAD9AD,.1);
&:before {
width: .2em;
height: 5em;
background: #EAD9AD;
box-shadow: .3em -1.5em .3em .3em rgba(#EAD9AD,.3);
transform: translate3d(-.5em,0,0) rotate(4deg);
}
&:after {
width: .5em;
height: .4em;
background: #EAD9AD;
box-shadow: 0 0 1em #EAD9AD, 0 0 1em #EAD9AD;
transform: translate3d(-.2em,4.5em,0);
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(15) {
width: 15em;
height: 15em;
transform: translate3d(30em,19em,0) skewX(-5deg);
background: linear-gradient(to right bottom, $none 50%,rgba(#fff,.2));
&:before {
box-shadow: 0 -.2em 0 rgba(#5D4D47,.9), 0 -.4em 0 rgba(#ADADCD,.9), -.2em 0 1em rgba(#ADADCD,.2);
transform: translate3d(-4.5em,5.5em,0) rotate(-5deg) skewY(-5deg);
border: solid .5em $none;
border-top: solid 4em #ADADCD;
border-right-width: .1em;
}
&:after {
width: .5em;
height: 3em;
background: linear-gradient( rgba(#ADADCD,.1), #ADADCD);
box-shadow: .5em -.5em .5em .2em rgba(#ADADCD,.2), -.7em 0 1em rgba(#ADADCD,.2);
transform: translate3d(-3.5em,11.5em,0) skewX(5deg) rotate(-5deg);
border: .5em solid $none;
border-top: solid .4em #ADADCD;
border-radius: 75% 0 0 0;
border-left-width: 0;
border-right: .5em;
}
}
//dots
& i:nth-of-type(30) {
width: .5em;
height: .5em;
transform: translate3d(24em,14.5em,0) rotate(20deg) skewX(-60deg);
background: #fff;
border-radius: 50%;
box-shadow: 0 0 .5em #EAD9AD;
&:before {
width: .5em;
height: .5em;
transform: translate3d(4em,-4em,0) rotate(-30deg) skewX(20deg);
background: #fff;
border-radius: 50%;
box-shadow: 0 0 .5em #EAD9AD;
}
&:after {
width: 1em;
height: .5em;
background: #FFFFFD;
border-radius: 50%;
box-shadow: 0 0 0.5em #FFFFFD;
transform: translate3d(17em, -1em, 0) skewY(40deg) skewX(-30deg);
filter: blur(.1em);
}
}
//water level
& i:nth-of-type(19) {
width: 4em;
height: .5em;
background: linear-gradient( $b1, rgba($b1,.3));
border-radius: 0 50% 5% 0;
transform: translate3d(16.5em,34em,0) skewX(5deg) skewY(-5deg);
filter: blur(.1em);
&:before {
width: 4.5em;
height: .2em;
background: $b1;
transform: translate3d(4.5em,.25em,0) skewX(5deg) skewY(4deg);
border-radius: 50%;
box-shadow: 0 0 .2em #fff;
}
&:after {
width: 5.5em;
height: .3em;
background: $b1;
transform: translate3d(10.5em,.75em,0) skewX(5deg) skewY(5deg);
border-radius: 50%;
}
}
//water level
& i:nth-of-type(20) {
border-right: 10em solid $b1;
border-top: .2em solid $none;
border-bottom: .2em solid $none;
transform: translate3d(34.25em,33.75em,0) skewX(-5deg) skewY(2deg);
&:before {
width: 26em;
height: .4em;
background: $b1;
transform: translate3d(-17em,0em,0) skewX(5deg) skewY(-2deg);
border-radius: 50%;
opacity: .4;
box-shadow: -.5em 0 .5em #FFF;
}
}
& i:nth-of-type(18) {
width: 29em;
height: 2em;
border: solid .5em $none;
border-top-color: $b1;
border-radius: 50%;
transform: translate3d(16em,34.1em,0);
&:before {
width: 21em;
height: 6em;
border-radius: 50%;
transform: translate3d(3.4em,36.5em,0);
box-shadow: inset -1em -1em 2em -1em #8C877B, inset 1em -1em 2em -1em rgba(#8C877B,.5);
filter: blur(.2em);
opacity: .2;
}
}
& i:nth-of-type(35) {
border: solid 1em $none;
border-right-width: .75em;
border-top: solid 3em #EAD9AD;
transform: translate3d(38.5em,38em,0);
border-radius: .75em .5em 0 0;
box-shadow: 0 -.6em .3em -.3em rgba($b1,.5), -1em 3em 1em -.5em rgba(#fff,.1);
&:before {
border: solid .5em $none;
border-right-width: .1em;
border-top: solid 2.5em #EAD9AD;
transform: translate3d(-1.75em,-2.75em,0);
border-radius: .4em 0 0 0;
box-shadow: 0 -.6em .3em -.3em rgba($b1,.5);
-webkit-mask-image: linear-gradient( #000, $none);
}
&:after {
border: solid 1em $none;
border-right-width: .75em;
border-top: solid 6em rgba(#fff,.5);
transform: translate3d(-.75em,-4em,0);
border-radius: .75em .5em 0 0;
-webkit-mask-image: linear-gradient( #000, $none);
}
}
& i:nth-of-type(36) {
border: solid .25em $none;
border-bottom: solid 5em #ADADCD;
transform: translate3d(24em,44em,0) skewY(5deg);
border-radius: 0 0 0 .25em;
&:before {
background: #ADADCD;
width: .5em;
height: .6em;
transform: translate3d(-.2em,6.5em,0);
border-radius: .2em;
box-shadow: 0 0 .3em #ADADCD;
}
&:after {
background: #ADADCD;
width: .6em;
height: 3em;
transform: translate3d(-.3em,3.5em,0);
filter: blur(.3em);
opacity: .4;
}
}
& i:nth-of-type(2) {
height: 3em;
width: 24.5em;
transform: translate3d(18.5em,50em,0);
border-radius: 0 0 2em 2em;
box-shadow: 0 1.5em 1em -1em rgba($b1,.5), inset 0 -.5em 1em rgba($b1,.5), inset 0 -.5em 0 rgba($b1,.4);
&:before {
width: 15em;
height: 20em;
background: linear-gradient($none,#231f1b 4%, $none);
transform: translate3d(0.5em,3em,0) skewX(4.2deg);
border-radius: 1em 0 0 3em;
}
&:after {
width: 15em;
height: 20em;
background: linear-gradient($none,#231f1b 4%, $none);
transform: translate3d(8.5em,3em,0) skewX(-5deg);
border-radius: 0 1em 3em 0;
}
}
& i:nth-of-type(37) {
transform: translate3d(32em,41em,0) skewX(-5deg);
width: 10em;
height: 40em;
overflow: hidden;
&:before {
height: 15em;
width: 10em;
transform: translate3d(11em,7em,0) skewY(-10deg);
border-radius: 50%;
box-shadow: 0 0 5em #fff;
background: #fff;
}
&:after {
height: 14em;
width: 4em;
transform: translate3d(6em,24em,0) skewY(25deg);
border-radius: 50%;
box-shadow: .2em -.1em .5em -.3em #F3EADA;
background: radial-gradient(14em at 50% 30%, rgba(#ffe759,.3),rgba(#b2991f,.1), $none);
-webkit-mask-image: linear-gradient( to right, $none,#000);
filter: blur(.3em);
}
}
& i:nth-of-type(38) {
transform: translate3d(38em,65em,0);
&:before {
background-image: radial-gradient(#2C2015 20%,transparent 0),radial-gradient(#2C2015 20%,transparent 0);
background-size: 1.2em 1.2em;
background-position: 0 0,.6em .6em;
height: 11em;
width: 3em;
transform: translate3d(0,0,0) skewX(-5deg);
-webkit-mask-image: radial-gradient(#000, $none);
opacity: .2;
}
&:after {
height: 10em;
width: 3em;
transform: translate3d(-16.5em,-4em,0) skewY(-45deg) rotate(-5deg);
opacity: .04;
border-radius: 50% 50% 1em 1em;
background: linear-gradient(to right, rgba(#ffe759,.2),#ffe759);
box-shadow: -1.5em -5em 0 0 rgba( #ffe759,.4);
}
}
& i:nth-of-type(39) {
height: 30em;
width: 5em;
transform: translate3d(19em,50em,0) skewX(4.5deg);
overflow: hidden;
&:before {
height: 10em;
width: 10em;
transform: translate3d(-9em,12em,0) rotate(80deg) skewX(45deg);
background: #ffe759;
border-radius: 1em;
opacity: .8;
}
&:after {
width: 25em;
height: 9.5em;
border: .5em solid $none;
border-left-color: #fff;
transform: translate3d(-3.5em,16.5em,0) skewX(30deg);
box-shadow: -18em 1em .2em 0 rgba( #5D5440,.2);
filter: blur(.1em);
border-radius: 50%;
}
}
& i:nth-of-type(3) {
height: 10em;
width: 2em;
transform: translate3d(36.5em,62em,0) skewY(-10deg);
background: linear-gradient($none, rgba(#000,.2)),linear-gradient($none, #674D03), linear-gradient(to right, #C1C3A2, $none), radial-gradient( #9E8A2C,#674D03);
border-radius: 50%;
border-left: .35em solid #8E8B53;
filter: blur(.1em);
&:before {
height: 4.5em;
width: 6.5em;
transform: translate3d(-3.35em,3em,0);
background: radial-gradient(circle at top left, #9E8A2C,#674D03);
border-radius: 60% 40% 40% 60%;
}
&:after {
height: 2em;
width: 4em;
transform: translate3d(-1.35em,4em,0);
border-top: .5em solid #C6C9BA;
border-radius: 60% 40% 40% 60%;
box-shadow: 0 -.5em 0 #847549, -.5em -1em 0 #C1C3A2, inset 0 .75em 0 #7A6107, inset 0 -.75em 0 rgba(#ADAA6F,.75), 0 1em 0 #6f590a;
opacity: .8;
}
}
& i:nth-of-type(4) {
height: 1.25em;
width: 2em;
transform: translate3d(31em,68em,0) skewY(-15deg);
border-radius: 50%;
border-left: .5em solid #848C7B;
&:before {
height: 2em;
width: 2em;
transform: translate3d(.75em,-.5em,0) skewY(-15deg) skewX(45deg);
background: linear-gradient(to right,#2D2810 20%,#69644F 40%,#2D2810 60% );
border-radius: 10% 0 100% 0;
box-shadow: inset 0 0 1em $b1;
}
&:after {
height: .5em;
width: 2em;
transform: translate3d(.2em,-.25em,0);
background: linear-gradient(to right,#848C7B,#69644F);
border-radius: 50%;
opacity: .75;
box-shadow: -.5em .25em 0 #848C7B;
}
}
& i:nth-of-type(5) {
height: .5em;
width: .75em;
transform: translate3d(35em,67.5em,0) skewY(-15deg);
border-radius: 50%;
background: #C1C3A2;
box-shadow: -.75em .5em 0 #C1C3A2, -.25em -1em 0 #C1C3A2, -1.5em -1em 0 #C1C3A2, 4.75em .5em 0 #8E8B53, 2em .5em 0 rgba($b1,.1), 1em -1em 0 rgba($b1,.2), -.5em .25em 0 rgba($b1,.1), 0em -.75em 0 rgba($b1,.2), -.75em -.75em 0 rgba($b1,.3), 0em 1em 0 rgba($b1,.3), 1em 2em 0 rgba($b1,.3), 1.5em 1.5em 0 rgba($b1,.2), .25em 1.5em 0 rgba($b1,.3), 1.5em 2.5em 0 rgba($b1,.2), 2em 2.25em 0 rgba($b1,.1);
&:before {
width: 2em;
height: 2em;
border-bottom: .75em solid #8E8B53;
border-radius: 50%;
transform: translate3d(0em,-3.5em,0) rotate(-45deg);
}
&:after {
width: 2em;
height: 2em;
border-top: 1em solid #7A6107;
border-radius: 50%;
transform: translate3d(0em,2em,0) rotate(45deg);
}
}
& i:nth-of-type(6) {
height: 4.5em;
width: 5em;
transform: translate3d(35em,65em,0) skewY(-5deg);
border-radius: 50%;
border-right: 1em solid #C1C3A2;
opacity: .3;
&:before {
width: 2em;
height: 2em;
border-bottom: .75em solid #8E8B53;
border-radius: 50%;
transform: translate3d(3em,-1.5em,0) rotate(45deg);
}
&:after {
width: 2em;
height: 2em;
border-top: 1em solid #7A6107;
border-radius: 50%;
transform: translate3d(2.5em,4em,0) rotate(-45deg);
}
}
& i:nth-of-type(7) {
transform: translate3d(34em,66em,0) rotate(-15deg);
width: 6em;
height: 4em;
border-radius: 50%;
box-shadow: inset 0 -1em 0 0 #332f0e;
opacity: .3;
&:before {
width: 7em;
height: 5em;
transform: translate3d(-.5em,-1em,0);
border-radius: 50%;
background-image: radial-gradient(#F3EADA 20%,transparent 0),radial-gradient(#F3EADA 20%,transparent 0);
background-size: 1.2em 1.2em;
background-position: 0 0,.6em .6em;
-webkit-mask-image: linear-gradient( #000, rgba(#000,.2));
}
&:after {
width: 6em;
height: 4em;
transform: translate3d(1em,1em,0);
border-radius: 50%;
background-image: radial-gradient($b1 20%,transparent 0),radial-gradient($b1 20%,transparent 0);
background-size: 1.2em 1.2em;
background-position: 0 0,.6em .6em;
-webkit-mask-image: linear-gradient( $none, #000);
}
}
& i:nth-of-type(8) {
transform: translate3d(36.75em,62em,0);
opacity: .3;
&:before {
width: 2em;
height: 10em;
transform: translate3d(0,0,0);
border-radius: 50%;
background-image: radial-gradient(#F3EADA 20%,transparent 0),radial-gradient(#F3EADA 20%,transparent 0);
background-size: 2.2em 1.2em;
background-position: 0 0,1.1em .3em;
-webkit-mask-image: linear-gradient( #000, rgba(#000,.2));
}
&:after {
width: 2em;
height: 10em;
transform: translate3d(0,.5em,0);
border-radius: 50%;
background-image: radial-gradient($b1 20%,transparent 0),radial-gradient($b1 20%,transparent 0);
background-size: 1.2em 1.2em;
background-position: .7em .2em, 0 0;
-webkit-mask-image: linear-gradient( $none, #000);
}
}
& i:nth-of-type(9) {
transform: translate3d(32em,57em,0) skewY(-5deg);
&:before {
transform: translate3d(-3em,2em,0);
width: 10em;
height: 20em;
background: radial-gradient( circle at top right, #ffd405,#564114, $b1);
border-radius: 50%;
-webkit-mask-image: linear-gradient(to right, $none, #000);
opacity: .05;
}
&:after {
transform: translate3d(4em,0,0);
opacity: .05;
width: 20em;
height: 20em;
background: radial-gradient( circle at top left, #ffd405,#564114, $b1);
border-radius: 50%;
-webkit-mask-image: linear-gradient(to left, $none, #000);
filter: blur(.1em);
}
}
& i:nth-of-type(31) {
width: 14em;
height: 12em;
border-bottom: 0.5em solid #fff;
border-radius: 50%;
transform: translate3d(20em, 74em, 0) scaleX(1.45);
transform-origin: 0 0;
-webkit-mask-image: linear-gradient(to right, $none 70%, #000);
&:before {
width: 14em;
height: 12em;
border-bottom: 0.75em solid #fff;
border-radius: 50%;
transform: translate3d(0, -1em, 0);
transform-origin: 0 0;
-webkit-mask-image: linear-gradient(to right, $none 70%, #000);
}
}
& i:nth-of-type(32) {
width: 5em;
height: 2.5em;
background: #b7a015;
transform: translate3d(20em, 81.5em, 0) skewX(60deg);
transform-origin: 0 0;
border-radius: 2em;
opacity: .3;
box-shadow: inset -1em 0 0 #ffe759;
filter: blur(.3em);
&:before {
width: 2em;
height: 1em;
background: #2A2215;
box-shadow: -1em 0 0 #ffe759, inset 0 0 1em $b1;
border-radius: 50%;
transform: translate3d(2em, 2em, 0) skewX(-50deg);
}
}
//reflections
& i:nth-of-type(33) {
width: 13.9em;
height: 12em;
border-radius: 50%;
transform: translate3d(20em, 76em, 0) scaleX(1.45);
transform-origin: 0 0;
filter: blur(.1em);
box-shadow: inset -.25em -.25em .25em -.5em #EAD9AD;
&:before {
width: 14em;
height: 12em;
border-radius: 50%;
transform: translate3d(0, 1em, 0);
transform-origin: 0 0;
box-shadow: inset -.25em -.25em .25em -.5em #EAD9AD;
}
&:after {
width: 14em;
height: 12em;
box-shadow: inset 2em -2em 2em -4em #EAD9AD;
border-radius: 50%;
transform: translate3d(0, 6em, 0);
transform-origin: 0 0;
}
}
& i:nth-of-type(1) {
height: 20em;
width: 17em;
transform: translate3d(20em, 81em, 0);
transform-origin: 0 0;
opacity: .2;
filter: blur(.2em);
background:$b1;
&:before {
width: 3em;
height: 10em;
transform: translate3d(17em, 0, 0) skewX(4deg);
transform-origin: 0 0;
background: linear-gradient(to right, $none,#ADADCD);
-webkit-mask-image: linear-gradient( #000, $none);
}
&:after {
width: 3em;
height: 10em;
transform: translate3d(0, 0, 0) skewX(-2deg);
transform-origin: 0 0;
background: linear-gradient(to right, #C1C3A2, $none);
-webkit-mask-image: linear-gradient( #000, $none);
}
}
}
//far lemon
item1 {
width: 50em;
height: 50em;
transform: translate3d(41em,49em,0) skewX(-5deg);
overflow: hidden;
& i:nth-of-type(1) {
&:before {
width: 10em;
height: 10em;
transform: translate3d(.5em,12.5em,0) rotate(-60deg) skewY(15deg);
border-radius: 1.5em;
background: linear-gradient(to bottom,#564114, #564114,#1F1B17);
box-shadow: inset -.25em 0 .25em -.25em #896B3A, inset 0 -.25em .25em -.25em $b1;
}
&:after {
width: 25em;
height: 20em;
transform: translate3d(-15em,7em,0);
border-radius: 50%;
background: radial-gradient( circle at top, #ffd405,#564114, $b1);
border-top: #896B3A solid .25em;
}
}
& i:nth-of-type(2) {
width: 3em;
height: 5em;
transform: translate3d(8.5em,14.5em,0);
border-radius: 50%;
background: linear-gradient(to bottom right, #473712,#2B2617 85%,$b1);
filter: blur(.5em);
}
& i:nth-of-type(3) {
width: 19em;
height: 19em;
transform: translate3d(-10em,7.5em,0) rotate(45deg);
border-radius: 50% 0 50% 50%;
overflow: hidden;
&:after {
width: .15em;
height: .15em;
transform: translate3d(-1em,0em,0);
border-radius: 50%;
box-shadow: $dots;
opacity: .5;
}
&:before {
width: .15em;
height: .15em;
transform: translate3d(-.25em,1em,0);
border-radius: 50%;
box-shadow: $dots2;
opacity: .5;
}
}
& i:nth-of-type(4) {
width: 19em;
height: 19em;
transform: translate3d(-10em,7.5em,0) rotate(-45deg);
border-radius: 50% 0 50% 50%;
overflow: hidden;
&:after {
width: .15em;
height: .15em;
transform: translate3d(0,0em,0);
border-radius: 50%;
box-shadow: $dots;
opacity: .5;
}
&:before {
width: .25em;
height: .25em;
transform: translate3d(-.25em,-.25em,0);
border-radius: 50%;
box-shadow: $dots2;
opacity: .3;
}
}
& i:nth-of-type(6) {
width: 19em;
height: 19em;
transform: translate3d(-10em,7.5em,0) rotate(45deg);
border-radius: 50% 0 50% 50%;
overflow: hidden;
&:after {
width: 4em;
height: 19em;
transform: translate3d(2em,-5em,0);
background-image: radial-gradient(#ffd405 20%,transparent 0),radial-gradient(#F3EADA 20%,transparent 0);
background-size: 1.2em 1.2em;
background-position: .6em .6em, 0 0;
filter: blur(.25em);
}
&:before {
width: 3em;
height: 3em;
transform: translate3d(9em,0em,0);
background-image: radial-gradient(#fff 20%,transparent 0),radial-gradient(#fff 20%,transparent 0);
background-size: 1.2em 1.2em;
background-position: .6em .6em, 0 0;
filter: blur(.2em);
-webkit-mask-image: linear-gradient(to top, $none, #000);
}
}
& i:nth-of-type(7) {
width: 19em;
height: 19em;
transform: translate3d(-10em,7.5em,0) rotate(-45deg);
border-radius: 50% 0 50% 50%;
overflow: hidden;
-webkit-mask-image: linear-gradient(to left, $none, #000);
&:after {
width: .1em;
height: .1em;
transform: translate3d(0,0,0);
border-radius: 50%;
box-shadow: $dots4;
}
&:before {
width: .1em;
height: .1em;
transform: translate3d(.5em,.75em,0);
border-radius: 50%;
box-shadow: $dots4;
}
}
}
//near lemon
item3 > {
//frame
& i:nth-of-type(6) {
width: 22em;
height: 20em;
transform: translate3d(35em,70em,0) rotate(47deg);
overflow: hidden;
&:after {
}
//nipple
&:before {
transform: translate3d(7em, 7.5em, 0) rotate(19deg);
width: 6.5em;
height: 6em;
background: #CACC70;
border-radius: 3em 0 3em 2.5em;
box-shadow: 1em -1em 1em 1em #07090A, inset 0 0 1em #fff;
}
// lemon
& i:nth-of-type(1) {
filter: contrast(1.1);
transform: translate3d(0em,-10em,0);
width: 22em;
height: 22em;
background: radial-gradient( circle at top left, #ffd405,#564114, $b1);
border-radius: 50%;
box-shadow: inset 1.5em -.5em 1em #E3E660, inset 3em 2em 2em #E3E660, inset 4em 2em 4em #FBFCED, inset 7em 1em 5em #7A7C11;
&:after {
}
&:before {
}
}
// roughness
& i:nth-of-type(2) {
transform: translate3d(1em,-9em,0);
width: 15em;
height: 20em;
/*background: red;*/
border-radius: 50%;
overflow: hidden;
-webkit-mask-image: radial-gradient(circle at 30% 70%,#000, $none, $none );
opacity: .5;
&:after {
width: .4em;
height: .4em;
transform: translate3d(-5em,-2em,0);
border-radius: 50%;
box-shadow: $dots5;
}
&:before {
width: .3em;
height: .3em;
transform: translate3d(20.5em,2.5em,0) rotate(90deg);
border-radius: 50%;
box-shadow: $dots5;
}
}
//more roughness
& i:nth-of-type(3) {
transform: translate3d(0em,-9em,0);
width: 20em;
height: 20em;
/*background: red;*/
border-radius: 50%;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right,rgba( #000,.5), $none, $none );
&:after {
width: .4em;
height: .4em;
transform: translate3d(-5em,-2em,0);
border-radius: 50%;
box-shadow: $dots6;
}
&:before {
width: .5em;
height: .5em;
transform: translate3d(20.5em,2.5em,0) rotate(95deg);
border-radius: 50%;
box-shadow: $dots6;
}
}
& i:nth-of-type(4) {
transform: translate3d(-.5em,-10.5em,0) rotate(-40deg);
width: 20em;
height: 20em;
$sb: #98983d;
&:before {
opacity:.3;
width: 1em;
height: .6em;
transform: translate3d(3.5em, 7.5em, 0) rotate(20deg);
border-radius: 50%;
background: $sb;
box-shadow: 0 1em 0 $sb,
-.8em .2em 0 $sb,
-1.1em 1.2em 0 $sb,
-.5em 2.2em 0 $sb,
.5em 3em 0 $sb,
-1.1em 3.5em 0 $sb,
.1em 4em 0 $sb,
-1.2em 4.5em 0 $sb,
.2em 5.2em 0 $sb,
-1em 5.3em 0 $sb,
.3em 6em 0 $sb;
}
&:after {
opacity:.5;
width: 1em;
height: .6em;
transform: translate3d(3.85em, 9em, 0) rotate(20deg);
border-radius: 50%;
background: $sb;
box-shadow: 0 1em 0 $sb,
-.8em .2em 0 $sb,
-1.1em 1.2em 0 $sb,
-.5em 2.2em 0 $sb,
.5em 3em 0 $sb,
-1.1em 3.5em 0 $sb,
.1em 4em 0 $sb,
-1.2em 4.5em 0 $sb,
.2em 5.2em 0 $sb,
-1em 5.3em 0 $sb,
.3em 6em 0 $sb;
}
}
}
// nipple bits
& i:nth-of-type(8) {
overflow: hidden;
transform: translate3d(42em, 77em, 0) rotate(61deg);
width: 6.5em;
height: 6em;
border-radius: 3em;
&:before {
width: 3em;
height: 3em;
background: linear-gradient(to right bottom, #5F5118, $none);
transform: translate3d(4.5em, 3.5em, 0);
border-radius: 50%;
}
&:after {
width: 2em;
height: 2em;
transform: translate3d(2em, 4.5em, 0);
border-radius: 50%;
box-shadow: inset -.4em .6em .5em -.6em #5F5118;
}
}
// nipple square
& i:nth-of-type(5) {
transform: translate3d(42em, 75em, -20em) rotate(-5deg);
width: 6em;
height: 6em;
background: #CACC70;
border-radius: 1em;
&:before {
}
&:after {
}
}
//nipple bits
& i:nth-of-type(7) {
transform: translate3d(42em, 79.5em, 0) rotate(55deg);
width: 2em;
height: 1em;
border-radius: .5em;
box-shadow: inset .5em .3em .5em 0 #B5A852;
&:before {
}
&:after {
}
}
//inside
$in: #7c7360;
$out: #6B6946;
$blend: #B1A855;
& i:nth-of-type(4) {
transform: translate3d(48em, 63em, 0) rotate(47deg);
width: 22em;
height: 22em;
transform-origin: 0 0;
&:before {
width: 5em;
height: 5em;
background: #FFFDFC;
transform: translate3d(0, 3em, 0);
transform-origin: 0 0;
border-radius: .5em 0 0 3em;
}
&:after {
width: 5em;
height: 5em;
background: #141218;
transform: translate3d(17em, 3em, 0);
transform-origin: 0 0;
border-radius: 0 .5em 3em 0;
}
}
//inside
& i:nth-of-type(9) {
transform: translate3d(48em, 62.95em, 0) rotate(47deg) scaleY(0.25);
width: 22em;
height: 22em;
transform-origin: 0 0;
overflow: hidden;
&:before {
width: 11em;
height: 3em;
transform: translate3d(11em,11em, 0);
border-radius: 1em;
background: lighten($in, 5%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 5%), -11em 0 0 $blend, 0 0 .25em lighten($in, 5%);
border-right: .5em solid $out;
}
&:after {
width: 11em;
height: 3em;
transform: translate3d(11em,11em, 0) rotate(10deg);
border-radius: 1em;
background: lighten($in, 10%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 10%), -11em 0 0 $blend, 0 0 .25em lighten($in, 10%);
border-right: .5em solid $out;
}
& i:nth-of-type(1) {
width: 10.9em;
height: 3em;
transform: translate3d(11em,11em, 0) rotate(20deg);
border-radius: .75em 1em .5em .75em;
background: lighten($in, 15%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 15%), -11em 0 0 $out, 0 0 .25em lighten($in, 15%);
border-right: .5em solid $out;
&:before {
width: 10.8em;
height: 3em;
transform: rotate(10deg);
border-radius: 1em;
background: lighten($in, 20%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 20%), -11em 0 0 $out, 0 0 .25em lighten($in, 20%);
border-right: .5em solid $out;
}
&:after {
width: 10.7em;
height: 3em;
transform: rotate(20deg);
border-radius: 1em;
background: lighten($in, 15%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 15%), -11em 0 0 $out, 0 0 .25em lighten($in, 15%);
border-right: .5em solid $out;
}
}
& i:nth-of-type(2) {
width: 10.7em;
height: 3em;
transform: translate3d(11em,11em,0) rotate(50deg);
border-radius: 1em;
background: lighten($in, 10%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 10%), -11em 0 0 $out, 0 0 .25em lighten($in, 10%);
border-right: .5em solid $out;
&:before {
width: 10.8em;
height: 3em;
transform: rotate(10deg);
border-radius: 1em;
background: lighten($in, 5%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 5%), -11em 0 0 $out, 0 0 .25em lighten($in, 5%);
border-right: .5em solid $out;
}
&:after {
width: 10.9em;
height: 3em;
transform: rotate(20deg);
border-radius: 1em;
background: $in;
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em $in, -11em 0 0 $out, 0 0 .25em $in;
border-right: .5em solid $out;
}
}
& i:nth-of-type(3) {
width: 11em;
height: 3em;
transform: translate3d(11em,11em,0) rotate(80deg);
border-radius: 1em;
background: $in;
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em $in, -11em 0 0 $out, 0 0 .25em $in;
border-right: .5em solid $out;
&:before {
width: 11em;
height: 3em;
transform: rotate(10deg);
border-radius: 1em;
background: $in;
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em $in, -11em 0 0 $out, 0 0 .25em $in;
border-right: .5em solid $out;
}
&:after {
width: 11em;
height: 3em;
transform: rotate(20deg);
border-radius: 1em;
background: #777250;
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em $in, -11em 0 0 $out, 0 0 .25em $in;
border-right: .5em solid $out;
}
}
& i:nth-of-type(4) {
width: 11em;
height: 3em;
transform: translate3d(11em,11em,0) rotate(110deg);
border-radius: 1em;
background: lighten($in, 7%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 7%), -11em 0 0 $out, 0 0 .25em lighten($in, 7%);
border-right: .5em solid $out;
&:before {
width: 11em;
height: 3em;
transform: rotate(10deg);
border-radius: 1em;
background: lighten($in, 15%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 15%), -11em 0 0 $out, 0 0 .25em lighten($in, 15%);
border-right: .5em solid $blend;
}
&:after {
width: 11em;
height: 3em;
transform: rotate(20deg);
border-radius: 1em;
background: lighten($in, 8%);
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em lighten($in, 8%), -11em 0 0 $out, 0 0 .25em lighten($in, 8%);
border-right: .5em solid $blend;
}
}
& i:nth-of-type(5) {
width: 11em;
height: 3em;
transform: translate3d(11em,11em,0) rotate(140deg);
border-radius: 1em;
background: $in;
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em $in, -11em 0 0 $out, 0 0 .25em $in;
border-right: .5em solid $blend;
&:before {
width: 11em;
height: 3em;
transform: rotate(10deg);
border-radius: 1em;
background: $in;
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em $in, -11em 0 0 $out, 0 0 .25em $in;
border-right: .5em solid $blend;
}
&:after {
width: 11em;
height: 3em;
transform: rotate(20deg);
border-radius: 1em;
background: $in;
transform-origin: 0 0;
box-shadow: -10.5em 0 .25em $in, -11em 0 0 $out, 0 0 .25em $in;
border-right: .5em solid $blend;
}
}
& i:nth-of-type(6) {
width: 11em;
height: 3em;
transform: translate3d(11em,11em,0) rotate(-10deg);
border-radius: 1em;
background: $in;
transform-origin: 0 0;
border-right: .5em solid $out;
&:before {
width: 11em;
height: 3em;
transform: rotate(-10deg);
border-radius: 1em;
background: $in;
transform-origin: 0 0;
border-right: .5em solid $out;
}
}
}
//inner lemon
& i:nth-of-type(10) {
width: 22em;
height: 22em;
transform: translate3d(48em,63em,0) rotate(47deg) scaleY(.24) scaleX(.95);
transform-origin: 0 0;
filter: contrast(1.2);
&:before {
width: 9em;
height: 1.5em;
transform: translate3d(12.5em,10em,0);
border-radius: .75em;
background: #3e3c20;
transform-origin: 100% 100%;
box-shadow: -11em 0 0 #3e3c20, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
&:after {
width: 9em;
height: 1.5em;
transform: translate3d(12.5em,10.5em,0) rotate(10deg);
border-radius: .75em;
background: #34321b;
transform-origin: 0 0;
box-shadow: -11em 0 0 #524f2b, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
& i:nth-of-type(1) {
width: 9em;
height: 1.5em;
transform: translate3d(12.5em,11em,0) rotate(20deg);
border-radius: .75em 1em .5em .75em;
background: #3c3a1f;
transform-origin: 0 0;
box-shadow: -11em 0 0 #3c3a1f, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
&:before {
width: 9em;
height: 1.5em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #4e4b29;
transform-origin: 100% 100%;
box-shadow: -11em 0 0 #4e4b29, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
&:after {
width: 9em;
height: 1.5em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #424023;
transform-origin: 0 0;
box-shadow: -11em 0 0 #424023, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
}
& i:nth-of-type(2) {
width: 8.5em;
height: 1.5em;
transform: translate3d(12em,12em,0) rotate(50deg);
border-radius: .75em 1em .5em .75em;
background: #484525;
transform-origin: 0 0;
box-shadow: -11em 0 0 #484525, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
&:before {
width: 8em;
height: 1.5em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #4d4a28;
transform-origin: 100% 100%;
box-shadow: -11em 0 0 #4d4a28, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
&:after {
width: 8em;
height: 1.5em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #4f4d29;
transform-origin: 0 0;
box-shadow: -11em 0 0 #4f4d29, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
}
& i:nth-of-type(3) {
width: 8em;
height: 1.5em;
transform: translate3d(11em,12em,0) rotate(80deg);
border-radius: .75em 1em .5em .75em;
background: #58552d;
transform-origin: 0 0;
box-shadow: -11em 0 0 #58552d, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
&:before {
width: 8em;
height: 1.5em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #4f4d29;
transform-origin: 100% 100%;
box-shadow: -11em 0 0 #4f4d29, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
&:after {
width: 8em;
height: 1.5em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #4f4d28;
transform-origin: 0 0;
box-shadow: -11em 0 0 #4f4d28, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
}
& i:nth-of-type(4) {
width: 8em;
height: 1.5em;
transform: translate3d(10em,12em,0) rotate(110deg);
border-radius: .75em 1em .5em .75em;
background: #4a4724;
transform-origin: 0 0;
box-shadow: -11em 0 0 #4a4724, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
&:before {
width: 8em;
height: 1.5em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #4a4721;
transform-origin: 100% 100%;
box-shadow: -11em 0 0 #4a4721, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
&:after {
width: 8em;
height: 1.5em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #413f1e;
transform-origin: 0 0;
box-shadow: -11em 0 0 #413f1e, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
}
& i:nth-of-type(5) {
width: 8.5em;
height: 1.5em;
transform: translate3d(10em,12em,0) rotate(140deg);
border-radius: .75em 1em .5em .75em;
background: #403d1e;
transform-origin: 0 0;
box-shadow: -11em 0 0 #403d1e, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
&:before {
width: 8.5em;
height: 1.5em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #444122;
transform-origin: 100% 100%;
box-shadow: -11em 0 0 #444122, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
&:after {
width: 8.5em;
height: 1.5em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #4a4827;
transform-origin: 0 0;
box-shadow: -11em 0 0 #4a4827, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -11em 0 .5em #51422A;
}
}
}
// inner inner lemon
& i:nth-of-type(11) {
width: 22em;
height: 22em;
opacity: .75;
transform: translate3d(48em,63em,0) rotate(47deg) scaleY(.24) scaleX(.95);
transform-origin: 0 0;
filter: contrast(1.5);
&:before {
width: 4em;
height: .75em;
transform: translate3d(12em,10em,0);
border-radius: .75em;
background: #3e3c20;
transform-origin: 100% 100%;
box-shadow: -6em 0 0 #3e3c20, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
&:after {
width: 4em;
height: .75em;
transform: translate3d(13.5em,10.5em,0) rotate(10deg);
border-radius: .75em;
background: #34321b;
transform-origin: 0 0;
box-shadow: -6em 0 0 #524f2b, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
& i:nth-of-type(1) {
width: 4em;
height: .75em;
transform: translate3d(12em,11em,0) rotate(20deg);
border-radius: .75em 1em .5em .75em;
background: #3c3a1f;
transform-origin: 0 0;
box-shadow: -6em 0 0 #3c3a1f, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
&:before {
width: 4em;
height: .75em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #4e4b29;
transform-origin: 100% 100%;
box-shadow: -6em 0 0 #4e4b29, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
&:after {
width: 4em;
height: .75em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #424023;
transform-origin: 0 0;
box-shadow: -6em 0 0 #424023, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
}
& i:nth-of-type(2) {
width: 4em;
height: .75em;
transform: translate3d(11em,12em,0) rotate(50deg);
border-radius: .75em 1em .5em .75em;
background: #484525;
transform-origin: 0 0;
box-shadow: -6em 0 0 #484525, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
&:before {
width: 4em;
height: .75em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #4d4a28;
transform-origin: 100% 100%;
box-shadow: -6em 0 0 #4d4a28, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
&:after {
width: 4em;
height: .75em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #4f4d29;
transform-origin: 0 0;
box-shadow: -6em 0 0 #4f4d29, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
}
& i:nth-of-type(3) {
width: 4em;
height: .75em;
transform: translate3d(11em,12em,0) rotate(80deg);
border-radius: .75em 1em .5em .75em;
background: #58552d;
transform-origin: 0 0;
box-shadow: -6em 0 0 #58552d, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
&:before {
width: 4em;
height: .75em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #4f4d29;
transform-origin: 100% 100%;
box-shadow: -6em 0 0 #4f4d29, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
&:after {
width: 4em;
height: .75em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #4f4d28;
transform-origin: 0 0;
box-shadow: -6em 0 0 #4f4d28, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
}
& i:nth-of-type(4) {
width: 4em;
height: .75em;
transform: translate3d(10em,12em,0) rotate(110deg);
border-radius: .75em 1em .5em .75em;
background: #4a4724;
transform-origin: 0 0;
box-shadow: -6em 0 0 #4a4724, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
&:before {
width: 4em;
height: .75em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #4a4721;
transform-origin: 100% 100%;
box-shadow: -6em 0 0 #4a4721, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
&:after {
width: 4em;
height: .75em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #413f1e;
transform-origin: 0 0;
box-shadow: -6em 0 0 #413f1e, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
}
& i:nth-of-type(5) {
width: 4em;
height: .75em;
transform: translate3d(10em,12em,0) rotate(140deg);
border-radius: .75em 1em .5em .75em;
background: #403d1e;
transform-origin: 0 0;
box-shadow: -6em 0 0 #403d1e, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
&:before {
width: 4em;
height: .75em;
transform: translate3d(-.5em,1.5em,0) rotate(9deg);
border-radius: .75em;
background: #444122;
transform-origin: 100% 100%;
box-shadow: -6em 0 0 #444122, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
&:after {
width: 4em;
height: .75em;
transform: translate3d(0em,0em,0) rotate(18deg);
border-radius: .75em .5em 1em .75em;
background: #4a4827;
transform-origin: 0 0;
box-shadow: -6em 0 0 #4a4827, 0 0 .5em #51422A, inset .5em 0 .5em rgba(#ffe759,.1), -6em 0 .5em #51422A;
}
}
}
//reflections
& i:nth-of-type(1) {
width: 22em;
height: 20em;
transform: translate3d(35em,77em,0) rotate(137deg);
opacity: .1;
filter: blur(.8em);
&:before {
transform: translate3d(3em,-6em,0);
width: 18em;
height: 18em;
border-radius: 50%;
box-shadow: inset -1em -4em 2em -1em #E3E660, inset 2em 0 0 $b1;
background: $b1;
}
//nipple
&:after {
transform: translate3d(9em, 10em, 0);
width: 5em;
height: 3em;
border-radius: 1em;
background: $b1;
box-shadow: inset -2em -1em 0 #E3E660, 1em -3em 2em 2em rgba($b1,.5);
}
}
& i:nth-of-type(2) {
width: 22em;
height: 20em;
transform: translate3d(35em,70em,0) rotate(47deg);
-webkit-mask-image: linear-gradient(to top,#000, #000, #000, $none );
&:before {
transform: translate3d(0em,-10em,0);
width: 22em;
height: 22em;
border-radius: 50%;
background: $b1;
box-shadow: 0 0 1em $b1, 0 0 1em $b1, 0 2em 3em -1em rgba($b1,.5);
}
}
& i:nth-of-type(3) {
width: 22em;
height: 20em;
transform: translate3d(35em,77em,0) rotate(137deg);
&:before {
transform: translate3d(3em,-6em,0) rotate(30deg);
width: 18em;
height: 18em;
border-radius: 50%;
box-shadow: inset 3em -3em 0 -3em $b1, -3em 3em 0 $b1;
filter: blur(.8em);
-webkit-mask-image: linear-gradient(to top,#000,$none );
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment