revision:
code:
<div class="box">
<div class="head">
<div class="head-copy"></div>
<div class="ear-left">
<div class="inner-ear"></div>
</div>
<div class="ear-right">
<div class="inner-ear"></div>
</div>
<div class="eye-left">
<div class="pupil"></div>
</div>
<div class="eye-right">
<div class="pupil"></div>
</div>
<div class="nose"></div>
<div class="hair-left"></div>
<div class="hair-right"></div>
</div>
</div>
<style>
.box{position: relative; margin: auto; display: block; margin-top: 8%; width: 50vw;
height: 32vw; background: none;}
.head{ position: absolute; top:16.5%; left: 25%; width: 50%; height: 67%;
background: #A6BECF; border-radius: 50%; }
.head-copy{width: 100%; height: 100%; position: absolute; background: #A6BECF;
border-radius: 50%; z-index: 2;}
.ear-left{position: absolute; width: 60%; height: 65%; left: -20%; top: 5%;
background: #A6BECF; border-radius: 50%; z-index: 1;}
.ear-right{position: absolute; width: 60%; height: 65%; right: -20%; top: 5%;
background: #A6BECF; border-radius: 50%; z-index: 1;}
.inner-ear{position: absolute; border-radius: 50%; width: 80%; height: 80%;
top: 10%;left: 10%; background: #819CAF;}
.eye-left{ position: absolute; background: white; width: 30%; height: 33%;
top: 25%; left: 21%; border-radius: 50%; z-index: 3;}
.eye-right{position: absolute; background: white; width: 30%; height: 33%;
top: 25%; right: 21%; border-radius: 50%; z-index: 3;}
.pupil{position: absolute; width: 28%; height: 30%; top: 35%;left: 36%;
border-radius: 50%;background: #27354A;}
.nose{ position: absolute; background: #BE845F; width: 25%; height: 42.5%;
left: 37%; top: 45%; border-radius: 5vw; z-index: 4;}
.hair-left{position: absolute; top: -8%; left: 30%; width: 20%; height: 20%;
background: #A6BECF; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}
.hair-right{position: absolute; top: -4%; left: 48%; width: 20%; height: 20%;
background: #A6BECF; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}
@media all and (max-width: 600px) {
.box{position: relative; margin: auto; display: block; margin-top: 2%;
width: 40vw; height: 28vw; background: none;}
}
</style>
are very fond of CSS
code:
<div>
<h3 class="anchor">Some front-end developers</h3>
<p class="anchor">are very fond of CSS</p>
</div>
<style>
.anchor {--color: green; --line: 0.1vw; --terminal: 0.2vw; --opacity: 0.5; }
.anchor::before {flex: 0.5; align-self: center; background-image: linear-gradient(to top,
var(--color), var(--color)), radial-gradient(circle closest-side, var(--color) 90%,
transparent 95%); background-position: 0 center, 100% center; background-size:
calc(100% - var(--terminal) / 2) var(--line), var(--terminal) var(--terminal) ;
background-repeat: no-repeat; content: ''; height: calc(var(--terminal) + 0.4vw);
smargin-right: 0.75vw; opacity: 0.75vw;}
h3, p {display: flex; margin: 0;}
h3 { color: darkmagenta; }
p :not(.date){ font-style: italic; }
</style>
code:
<div class="box-canvas">
<div class="shadow"></div>
<div class="glass">
<div class="bottom"></div>
</div>
<div class="lemon">
<div class="segment-left segment"></div>
<div class="segment-right segment"></div>
</div>
</div>
<style>
.box-canvas{position: relative; margin: auto; display: block; margin-top:2%;
margin-bottom: 2%; width: 30vw; height:37vw; background: skyblue;}
.lemon {position: absolute; left: 0vw; top: 0vw; width: 17vw; height: 9vw;
overflow: hidden; transform: rotate(-25deg);}
.lemon::before {content: ''; position: absolute; top: 1vw; left: 0; width: 15vw;
height: 10vw; background: #F1E3D9; border-radius: 50%; border: 10px solid #EFD46F;}
.lemon::after {content: ''; position: absolute; bottom: 0; left: 0vw; height: 2vw;
width: 1vw; border-radius: 40%; border-left: 0.1vw solid white; transform: rotate(-10deg);}
.segment {position: absolute; bottom: 0.5vw; width: 6vw; height: 2.5vw; border:
0.2vw solid #F1E3D9; background: #EFD46F;}
.segment-left {right: 50%;border-radius: 30% 50% 50% 30%;}
.segment-right {left: 50%; border-radius: 50% 30% 30% 50%;}
.segment::before {content: '';position: absolute; bottom: 1vw; width: 6vw;
height: 2.5vw; border: 0.2vw solid #F1E3D9; background: #EFD46F;}
.segment-left::before {right: -1.5vw; border-radius: 30% 50% 50% 30%;
transform: rotate(45deg);}
.segment-right::before {left: -1.5vw; border-radius: 50% 30% 30% 50%;
transform: rotate(-45deg);}
.segment-right::after { content: ''; position: absolute; left: -3.5vw;
bottom: 1.5vw; width: 6.5vw; height: 2.5vw; border: 0.2vw solid #F1E3D9;
background: #EFD46F; transform: rotate(90deg); border-radius: 30% 50% 50% 30%;}
.glass {position: absolute; top: 10vw; left: 8vw; height: 25vw; width: 18vw;}
.glass::before {content: ''; position: absolute; height: 20vw; width: 18vw;
background: linear-gradient(to bottom, #C4E4F3, #C4E4F3 40%, #D4ECF6 10%);
clip-path: polygon(10% 100%, 90% 100%, 100% 0, 0 0); }
.glass::after {content: ''; position: absolute; top: -4vw; width: 18vw;
height: 8vw; background: #C4E4F3; border: 0.1vw solid white; border-radius: 50%;}
.bottom {position: absolute; width: 14.5vw; top: 18vw; left: 1.8vw; height: 7vw;
background: #D4ECF6; border-radius: 0 0 50% 50%;}
.bottom::before {content: ''; position: absolute; width: 16vw; height: 4vw;
border-radius: 50%; background: #D4ECF6; border: 0.1vw solid white; top: -12vw; left: -1vw;}
.shadow {position: absolute; top: 29vw; left: 7vw; width: 20vw; height: 7vw;
border-radius: 50%; background: rgba(0,0,0, 0.05);}
</style>
code:
<div>
<div class="box-canvas_1">
<div class="shadow_`1"></div>
<div class="orange">
<div class="segment-left_1 segment_1"></div>
<div class="segment-right_1 segment_1"></div>
</div>
<div class="glass-rim"></div>
<div class="glass_1">
<div class="bubble bubble-left"></div>
<div class="bubble bubble-right"></div>
<div class="drink-top"></div>
<div class="drink"></div>
<div class="ice-wrapper">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom_1"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="ice-wrapper two">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom_1"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="ice-wrapper three">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom_!"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</div>
<div class="stem"></div>
<div class="base"></div>
</div>
</div>
<style>
.box-canvas_1{position: relative; margin: auto; display: block; margin-top: 23%;
margin-bottom: 8%; width: 40vw; height:48vw; background: #43ACD9;}
.orange {position: absolute; left: 3.5vw; top: -3.4vw; width: 17.5vw; height: 10vw;
overflow: hidden; transform: rotate(-25deg); z-index: 2;}
.orange::before {content: '';position: absolute; top: 2vw; left: 0; width: 15.5vw;
height: 17.5vw; background: #FFBC40; border-radius: 50%; border: 1vw solid #FFA500;}
.orange::after {content: ''; position: absolute; bottom: 0; left: 0vw; height: 3vw;
width: 1vw; border-radius: 40%; border-left: 0.1vw solid white; transform: rotate(-10deg);}
.segment_1 {position: absolute; bottom: 0.5vw; width: 6.5vw; height: 2.5vw;
border: 0.2vw solid #FFBC40; background: #FFA500;}
.segment-left_1 {right: 50%; border-radius: 30% 50% 50% 30%;}
.segment-right_1 {left: 50%; border-radius: 50% 30% 30% 50%;}
.segment_1::before {content: ''; position: absolute; bottom: 1vw; width: 6.5vw;
height: 2.5vw; border: 0.2vw solid #FFBC40; background:#FFA500;}
.segment-left_1::before {right: -1.5vw; border-radius: 30% 50% 50% 30%;
transform: rotate(45deg);}
.segment-right_1::before {left: -1.5vw; border-radius: 50% 30% 30% 50%;
transform: rotate(-45deg);}
.segment-right_1::after {content: ''; position: absolute; left: -3.5vw;
bottom: 1.5vw; width: 6.5vw; height: 2.5vw; border: 0.2vw solid #FFBC40;
background: #FFA500; transform: rotate(90deg); border-radius: 30% 50% 50% 30%;}
.glass_1{height:22vw; width:20vw; background: #95CEE9; margin:3vw auto;
border-radius: 50% 50% 10% 10%; transform: rotate(180deg); overflow:hidden;}
.glass-rim {position: absolute; top: -1.5vw; left: 10.3vw; width: 19.8vw; height: 8.3vw;
background: #95CEE9; border: 0.1vw solid white; border-radius: 50%; z-index: 1;}
.drink{background-color:#FF4D3D; height:14vw; border-radius: 50% 50% 0 0;
border-radius: 50% 50% 18% 18%;}
.drink-top {position: absolute; top: 7.5vw; left: 0vw; width: 19.8vw; height: 8vw;
background: #FF4D3D; border: 0.1vw solid #FF8A80; border-radius: 50%; z-index: 2;}
.ice-wrapper {position:absolute;left:15%; top:35%; width: 5vw; height: 5vw;
transform-style:preserve-3d; transform:rotateX(-30deg) rotateY(35deg) translate(-50%, -50%);
z-index: 2;}
.ice-wrapper.two{top: 25%; left: 50%; transform: rotate3d(0, 1, 1, 45deg);}
.ice-wrapper.three{top: 5%; left: 50%; transform: rotate3d(0, 1, 1, 78deg);}
.cube {position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;}
.cube div {position:absolute; left:50%; top:50%; width: 5vw; height: 5vw;
border-radius: 5vw/12; background:rgba(221,221,221,0.2); background:linear-gradient
(rgba(237,237,237,0.3),rgba(153,153,153,0.1)); box-shadow:0 0 0.4vw rgba(255,255,255,0.2),
inset 0 0 0.4vw rgba(255,255,255,0.2);}
.back {transform: rotateX(180deg) translate3d(0, 0, 2.5vw);}
.right {transform: rotateY(90deg) translate3d(0, 0, 2.5vw);}
.left {transform: rotateY(-90deg) translate3d(0, 0, 2.5vw);}
.top {transform: rotateX(90deg) translate3d(0, 0, 2.5vw);}
.bottom_1 {transform: rotateX(270deg) translate3d(0, 0, 2.5vw);}
.front {transform: translate3d(0, 0, 2.5vw);}
.stem{height:13vw; width:1.5vw; background:#95CEE9; margin:-3vw auto;
border-radius:0 0 0.5vw 0.5vw; position: relative; border-bottom: 0.1vw solid white;}
.base{width:10vw; height:3vw; background-color:#95CEE9; margin:1.6vw auto;
border-radius:50%;}
.shadow_1{position: absolute; top: 32vw; left: 20vw; width: 20vw; height: 8vw;
border-radius: 50%; background: rgba(0,0,0, 0.05);}
.glass_1 .bubble-right {left: 7.4vw; animation-delay: 0.75s;}
.glass_1 .bubble-left {left: 12vw; animation-delay: 0s;}
.bubble {top: 0; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5);
animation: bubbleUp 2s infinite; width: 1vw; height: 1vw;}
.bubble::before {content: ''; width: 0.5vw; height: 0.5vw; left: 2vw; position: absolute;
border-radius: 50%; background: rgba(255,255,255,0.5); animation: bubbleUp 1s infinite;}
.bubble::after {content: ''; width: 0.8vw; height: 0.8vw; right: 2vw; position: absolute;
border-radius: 50%; background: rgba(255,255,255,0.5); animation: bubbleUp 1.5s infinite;}
@keyframes bubbleUp {
100% { transform: translateY(5vw); background: transparent;}
}
</style>