 |
| Prt Scr: 'Lebah' |
Gambar hasil CSS, dipetik dari codepen/lynnandtonic
Demo
HTML view
<div class="labu">
<div id="labi"></div>
</div>
<style>
.labu {
min-height: 300px;
height: 60vh;
position: relative;
background-color: #9932cc;
z-index: 0;
}
.labu div {
position: absolute;
left: 50%;
top: 50%;
}
.labu div::before,
.labu div::after {
display: block;
content: '';
position: absolute;
}
#labi {
width: 200px;
height: 250px;
margin-left: -115px;
margin-top: -135px;
background: radial-gradient(circle, #ffd700 15%, rgba(255,215,0,0) 55.5%) 60% 43%/3em 3em, radial-gradient(ellipse at 50% 0, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.6) 55.5%, rgba(255,255,255,0.6) 59%, rgba(255,255,255,0) 59.5%) 0 50%/125px 35px, radial-gradient(circle, #ffd700 30%, rgba(255,215,0,0) 45.5%) 60% 48%/5em 5em, linear-gradient(45deg, rgba(34,34,34,0) 40%, #222 41%, #222 60%, rgba(34,34,34,0) 61%) 70% 55%/1.5em 1.5em, radial-gradient(ellipse at 80% 100%, #222 50%, rgba(34,34,34,0) 51%) 88% 58%/3em 0.5em, radial-gradient(ellipse at 0 50%, #222 50%, rgba(34,34,34,0) 51%) 94.5% 64.5%/0.5em 2em, linear-gradient(45deg, rgba(34,34,34,0) 40%, #222 41%, #222 60%, rgba(34,34,34,0) 61%) 63% 60%/1.5em 1.5em, radial-gradient(ellipse at 80% 100%, #222 60%, rgba(34,34,34,0) 61%) 81% 62.6%/2.5em 0.5em, radial-gradient(ellipse at 0 50%, #222 50%, rgba(34,34,34,0) 51%) 88% 69.5%/0.5em 2em, radial-gradient(circle, #ffd700 40%, rgba(255,215,0,0) 60.5%) 60% 48%/5em 5em, radial-gradient(ellipse at 100% 50%, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.6) 55.5%, rgba(255,255,255,0.6) 59%, rgba(255,255,255,0) 59.5%) 50% 0/35px 125px, linear-gradient(140deg, #222 88%, rgba(34,34,34,0) 88.5%) 94% 35%/2em 0.25em, linear-gradient(-82deg, #222 50%, rgba(34,34,34,0) 52%) 94.5% 40%/0.4em 2em, linear-gradient(140deg, #222 88%, rgba(34,34,34,0) 89%) 90% 38%/2em 0.25em, linear-gradient(-82deg, #222 50%, rgba(34,34,34,0) 52%) 90.5% 43%/0.4em 2em, linear-gradient(45deg, rgba(34,34,34,0) 40%, #222 41%, #222 60%, rgba(34,34,34,0) 61%) 70% 50%/1.5em 1.5em, radial-gradient(ellipse at 80% 100%, #222 50%, rgba(34,34,34,0) 51%) 85% 53.6%/2.5em 0.4em, radial-gradient(ellipse at 0 50%, #222 40%, rgba(34,34,34,0) 41%) 91.5% 59%/0.5em 2em, linear-gradient(60deg, rgba(34,34,34,0) 30%, #222 31%, #222 50%, rgba(34,34,34,0) 51%) 60.5% 72.5%/1.5em 1.5em, linear-gradient(96deg, rgba(34,34,34,0) 40%, #222 43%) 61.5% 86%/0.5em 2em, radial-gradient(ellipse at 0 50%, #222 50%, rgba(34,34,34,0) 51%) 65% 98%/0.5em 2em;
background-repeat: no-repeat;
}
#labi::before {
width: 28%;
height: 36%;
bottom: 6px;
left: 30%;
background: repeating-linear-gradient(to top, #222, #222 0.55em, #ffd700 0.55em, #ffd700 1.02em) 0 0/100% 100%;
border-bottom-left-radius: 3.5em;
border-top-left-radius: 1.2em;
border-top-right-radius: 0.4em;
box-shadow: 0 0 2em #ffd700, inset -1em 0 0 rgba(0,0,0,0.2);
z-index: -1;
}
#labi::after {
width: 35px;
height: 35px;
right: 15%;
top: 31%;
background: radial-gradient(circle, white 50%, rgba(255,255,255,0) 50.5%) 60% 40%/0.3em 0.3em, radial-gradient(circle, #111 50%, rgba(0,0,0,0) 51%) 0 0/1.8em 1.8em, radial-gradient(circle, #ffd700 40%, rgba(255,215,0,0) 70%) 0 0/2em 2em;
background-repeat: no-repeat;
background-color: #222;
border-radius: 2em;
border-bottom-right-radius: 0;
box-shadow: 0 0 1.2em 0.1em #ffd700;
transform: rotate(20deg);
}
</style>
<div id="labi"></div>
</div>
<style>
.labu {
min-height: 300px;
height: 60vh;
position: relative;
background-color: #9932cc;
z-index: 0;
}
.labu div {
position: absolute;
left: 50%;
top: 50%;
}
.labu div::before,
.labu div::after {
display: block;
content: '';
position: absolute;
}
#labi {
width: 200px;
height: 250px;
margin-left: -115px;
margin-top: -135px;
background: radial-gradient(circle, #ffd700 15%, rgba(255,215,0,0) 55.5%) 60% 43%/3em 3em, radial-gradient(ellipse at 50% 0, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.6) 55.5%, rgba(255,255,255,0.6) 59%, rgba(255,255,255,0) 59.5%) 0 50%/125px 35px, radial-gradient(circle, #ffd700 30%, rgba(255,215,0,0) 45.5%) 60% 48%/5em 5em, linear-gradient(45deg, rgba(34,34,34,0) 40%, #222 41%, #222 60%, rgba(34,34,34,0) 61%) 70% 55%/1.5em 1.5em, radial-gradient(ellipse at 80% 100%, #222 50%, rgba(34,34,34,0) 51%) 88% 58%/3em 0.5em, radial-gradient(ellipse at 0 50%, #222 50%, rgba(34,34,34,0) 51%) 94.5% 64.5%/0.5em 2em, linear-gradient(45deg, rgba(34,34,34,0) 40%, #222 41%, #222 60%, rgba(34,34,34,0) 61%) 63% 60%/1.5em 1.5em, radial-gradient(ellipse at 80% 100%, #222 60%, rgba(34,34,34,0) 61%) 81% 62.6%/2.5em 0.5em, radial-gradient(ellipse at 0 50%, #222 50%, rgba(34,34,34,0) 51%) 88% 69.5%/0.5em 2em, radial-gradient(circle, #ffd700 40%, rgba(255,215,0,0) 60.5%) 60% 48%/5em 5em, radial-gradient(ellipse at 100% 50%, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.6) 55.5%, rgba(255,255,255,0.6) 59%, rgba(255,255,255,0) 59.5%) 50% 0/35px 125px, linear-gradient(140deg, #222 88%, rgba(34,34,34,0) 88.5%) 94% 35%/2em 0.25em, linear-gradient(-82deg, #222 50%, rgba(34,34,34,0) 52%) 94.5% 40%/0.4em 2em, linear-gradient(140deg, #222 88%, rgba(34,34,34,0) 89%) 90% 38%/2em 0.25em, linear-gradient(-82deg, #222 50%, rgba(34,34,34,0) 52%) 90.5% 43%/0.4em 2em, linear-gradient(45deg, rgba(34,34,34,0) 40%, #222 41%, #222 60%, rgba(34,34,34,0) 61%) 70% 50%/1.5em 1.5em, radial-gradient(ellipse at 80% 100%, #222 50%, rgba(34,34,34,0) 51%) 85% 53.6%/2.5em 0.4em, radial-gradient(ellipse at 0 50%, #222 40%, rgba(34,34,34,0) 41%) 91.5% 59%/0.5em 2em, linear-gradient(60deg, rgba(34,34,34,0) 30%, #222 31%, #222 50%, rgba(34,34,34,0) 51%) 60.5% 72.5%/1.5em 1.5em, linear-gradient(96deg, rgba(34,34,34,0) 40%, #222 43%) 61.5% 86%/0.5em 2em, radial-gradient(ellipse at 0 50%, #222 50%, rgba(34,34,34,0) 51%) 65% 98%/0.5em 2em;
background-repeat: no-repeat;
}
#labi::before {
width: 28%;
height: 36%;
bottom: 6px;
left: 30%;
background: repeating-linear-gradient(to top, #222, #222 0.55em, #ffd700 0.55em, #ffd700 1.02em) 0 0/100% 100%;
border-bottom-left-radius: 3.5em;
border-top-left-radius: 1.2em;
border-top-right-radius: 0.4em;
box-shadow: 0 0 2em #ffd700, inset -1em 0 0 rgba(0,0,0,0.2);
z-index: -1;
}
#labi::after {
width: 35px;
height: 35px;
right: 15%;
top: 31%;
background: radial-gradient(circle, white 50%, rgba(255,255,255,0) 50.5%) 60% 40%/0.3em 0.3em, radial-gradient(circle, #111 50%, rgba(0,0,0,0) 51%) 0 0/1.8em 1.8em, radial-gradient(circle, #ffd700 40%, rgba(255,215,0,0) 70%) 0 0/2em 2em;
background-repeat: no-repeat;
background-color: #222;
border-radius: 2em;
border-bottom-right-radius: 0;
box-shadow: 0 0 1.2em 0.1em #ffd700;
transform: rotate(20deg);
}
</style>
Ulasan