bismillahcss
Version:
The next-gen utility-first CSS framework for modern, futuristic web development.
768 lines (661 loc) • 13.9 kB
CSS
/* ========== BismillahCSS Cartoons ========== */
/* Base Cartoon Scaling */
.b-cartoon-scalable {
--zoom: 1;
position: relative;
width: 200px;
height: 200px;
transform: scale(var(--zoom));
transform-origin: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
/* ===== Mickey Mouse ===== */
.bismillah-mickey {
position: relative;
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
}
.bismillah-mickey::before,
.bismillah-mickey::after {
content: "";
position: absolute;
width: 55px;
height: 55px;
background-color: #000;
border-radius: 50%;
}
.bismillah-mickey::before {
top: -25px;
left: -20px;
}
.bismillah-mickey::after {
top: -25px;
right: -20px;
}
.bismillah-mickey-face {
position: absolute;
width: 85px;
height: 70px;
background-color: #ffdbac;
border-radius: 50% 50% 40% 40%;
top: 30px;
left: 7.5px;
box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.1);
}
.bismillah-mickey-nose {
position: absolute;
width: 18px;
height: 12px;
background-color: #111;
border-radius: 50%;
top: 48px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.bismillah-mickey-eyes {
position: absolute;
width: 12px;
height: 24px;
background-color: #fff;
border-radius: 50%;
top: 25px;
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.bismillah-mickey-eyes.left {
left: 25px;
}
.bismillah-mickey-eyes.right {
right: 25px;
}
.bismillah-mickey-pupils {
position: absolute;
width: 6px;
height: 12px;
background-color: #000;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bismillah-mickey-mouth {
position: absolute;
width: 45px;
height: 20px;
border-bottom: 4px solid #000;
border-radius: 0 0 50% 50%;
top: 60px;
left: 50%;
transform: translateX(-50%);
}
/* ===== SpongeBob SquarePants ===== */
.bismillah-spongebob {
position: relative;
width: 110px;
height: 140px;
background-color: #f7e346;
border: 3px solid #7c681b;
border-radius: 8px;
box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.1);
}
.bismillah-spongebob-holes {
position: absolute;
width: 14px;
height: 10px;
background-color: #d1b821;
border-radius: 50%;
opacity: 0.6;
}
.bismillah-spongebob-holes:nth-child(1) {
top: 10%;
left: 10%;
}
.bismillah-spongebob-holes:nth-child(2) {
top: 40%;
left: 30%;
width: 18px;
height: 14px;
}
.bismillah-spongebob-holes:nth-child(3) {
top: 70%;
left: 15%;
}
.bismillah-spongebob-holes:nth-child(4) {
top: 20%;
right: 10%;
}
.bismillah-spongebob-holes:nth-child(5) {
top: 60%;
right: 20%;
width: 20px;
height: 16px;
}
.bismillah-spongebob-eyes {
position: absolute;
width: 38px;
height: 38px;
background-color: #fff;
border: 2px solid #000;
border-radius: 50%;
top: 15%;
z-index: 5;
}
.bismillah-spongebob-eyes.left {
left: 15%;
}
.bismillah-spongebob-eyes.right {
right: 15%;
}
.bismillah-spongebob-pupils {
position: absolute;
width: 14px;
height: 14px;
background-color: #2daed1;
border: 2px solid #000;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bismillah-spongebob-pupils::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: black;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bismillah-spongebob-lashes {
position: absolute;
width: 2px;
height: 8px;
background-color: #000;
top: -10px;
left: 50%;
}
.bismillah-spongebob-lashes.left1 {
transform: translateX(-10px) rotate(-20deg);
}
.bismillah-spongebob-lashes.left2 {
transform: translateX(0);
}
.bismillah-spongebob-lashes.left3 {
transform: translateX(10px) rotate(20deg);
}
.bismillah-spongebob-nose {
position: absolute;
width: 10px;
height: 20px;
background-color: #f7e346;
border: 2px solid #7c681b;
border-radius: 20px;
top: 40%;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.bismillah-spongebob-mouth {
position: absolute;
width: 80px;
height: 40px;
border-bottom: 3px solid #a03c30;
border-radius: 50%;
top: 45%;
left: 50%;
transform: translateX(-50%);
}
.bismillah-spongebob-teeth {
position: absolute;
width: 12px;
height: 15px;
background-color: #fff;
border: 2px solid #000;
top: 75%;
}
.bismillah-spongebob-teeth.left {
left: 38%;
}
.bismillah-spongebob-teeth.right {
left: 52%;
}
/* ===== Pikachu ===== */
/* ===== Pikachu ===== */
.bismillah-pikachu {
position: relative;
width: 100px;
height: 90px;
background-color: #fbd743;
border-radius: 50% 50% 45% 45%;
border: 2px solid #5d4e12;
}
.bismillah-pikachu-ears {
position: absolute;
width: 25px;
height: 70px;
background-color: #fbd743;
border-radius: 80% 80% 0 0;
border: 2px solid #5d4e12;
top: -45px;
z-index: -1;
}
.bismillah-pikachu-ears.left {
left: 5px;
transform: rotate(-35deg);
}
.bismillah-pikachu-ears.right {
right: 5px;
transform: rotate(35deg);
}
.bismillah-pikachu-ears-tip {
position: absolute;
width: 100%;
height: 25px;
background-color: #000;
border-radius: 80% 80% 0 0;
top: -1px;
}
.bismillah-pikachu-eyes {
position: absolute;
width: 16px;
height: 16px;
background-color: #2c2c2c;
border-radius: 50%;
top: 30%;
}
.bismillah-pikachu-eyes.left {
left: 20%;
}
.bismillah-pikachu-eyes.right {
right: 20%;
}
.bismillah-pikachu-eyes-highlight {
position: absolute;
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%;
top: 15%;
left: 15%;
}
.bismillah-pikachu-nose {
position: absolute;
width: 6px;
height: 4px;
background-color: #000;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bismillah-pikachu-cheeks {
position: absolute;
width: 22px;
height: 22px;
background-color: #e64a19;
border-radius: 50%;
top: 55%;
opacity: 0.8;
}
.bismillah-pikachu-cheeks.left {
left: 5%;
}
.bismillah-pikachu-cheeks.right {
right: 5%;
}
.bismillah-pikachu-tail {
position: absolute;
width: 30px;
height: 50px;
background-color: #fbd743;
clip-path: polygon(0% 100%, 100% 70%, 40% 70%, 100% 30%, 30% 30%, 100% 0%, 0% 0%);
bottom: 0px;
right: -30px;
z-index: -2;
transform: rotate(20deg);
border: 2px solid #5d4e12;
}
.bismillah-pikachu-mouth {
position: absolute;
width: 20px;
height: 10px;
border-bottom: 2px solid #000;
border-radius: 50%;
top: 60%;
left: 50%;
transform: translateX(-50%);
}
/* ===== Doraemon ===== */
.bismillah-doraemon {
position: relative;
width: 100px;
height: 100px;
background-color: #009be3;
border-radius: 50%;
border: 2px solid #000;
}
.bismillah-doraemon-face {
position: absolute;
width: 85px;
height: 75px;
background-color: #fff;
border-radius: 50%;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.bismillah-doraemon-eyes {
position: absolute;
width: 24px;
height: 28px;
background-color: #fff;
border: 2px solid #000;
border-radius: 50%;
top: 15px;
}
.bismillah-doraemon-eyes.left {
left: 26px;
}
.bismillah-doraemon-eyes.right {
right: 26px;
}
.bismillah-doraemon-pupils {
position: absolute;
width: 6px;
height: 10px;
background-color: #000;
border-radius: 50%;
top: 10px;
}
.bismillah-doraemon-pupils.left {
right: 5px;
}
.bismillah-doraemon-pupils.right {
left: 5px;
}
.bismillah-doraemon-nose {
position: absolute;
width: 16px;
height: 16px;
background-color: #e60012;
border: 2px solid #000;
border-radius: 50%;
top: 38px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.bismillah-doraemon-nose::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
top: 3px;
left: 3px;
}
.bismillah-doraemon-whiskers {
position: absolute;
width: 25px;
height: 2px;
background-color: #000;
}
.bismillah-doraemon-whiskers.left1 {
top: 45px;
left: 5px;
transform: rotate(15deg);
}
.bismillah-doraemon-whiskers.left2 {
top: 55px;
left: 3px;
}
.bismillah-doraemon-whiskers.left3 {
top: 65px;
left: 5px;
transform: rotate(-15deg);
}
.bismillah-doraemon-whiskers.right1 {
top: 45px;
right: 5px;
transform: rotate(-15deg);
}
.bismillah-doraemon-whiskers.right2 {
top: 55px;
right: 3px;
}
.bismillah-doraemon-whiskers.right3 {
top: 65px;
right: 5px;
transform: rotate(15deg);
}
.bismillah-doraemon-mouth {
position: absolute;
width: 60px;
height: 30px;
border-bottom: 2px solid #000;
border-radius: 50%;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.bismillah-doraemon-mouth::before {
content: '';
position: absolute;
width: 2px;
height: 15px;
background: black;
top: 15px;
left: 50%;
transform: translateX(-50%);
}
.bismillah-doraemon-bell {
position: absolute;
width: 18px;
height: 18px;
background-color: #ffde00;
border: 2px solid #000;
border-radius: 50%;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
}
/* ===== Hello Kitty ===== */
.bismillah-hello-kitty {
position: relative;
width: 100px;
height: 80px;
background-color: #ffffff;
border: 2px solid #000;
border-radius: 50% 50% 45% 45%;
}
.bismillah-hello-kitty-ears {
position: absolute;
width: 25px;
height: 25px;
background-color: #fff;
border: 2px solid #000;
border-radius: 50% 50% 10% 10%;
top: -12px;
}
.bismillah-hello-kitty-ears.left {
left: 10px;
transform: rotate(-25deg);
}
.bismillah-hello-kitty-ears.right {
right: 10px;
transform: rotate(25deg);
}
.bismillah-hello-kitty-eyes {
position: absolute;
width: 8px;
height: 12px;
background-color: #000;
border-radius: 50%;
top: 45%;
}
.bismillah-hello-kitty-eyes.left {
left: 25%;
}
.bismillah-hello-kitty-eyes.right {
right: 25%;
}
.bismillah-hello-kitty-nose {
position: absolute;
width: 12px;
height: 8px;
background-color: #fbd743;
border: 1px solid #000;
border-radius: 50%;
top: 60%;
left: 50%;
transform: translateX(-50%);
}
.bismillah-hello-kitty-whiskers {
position: absolute;
width: 20px;
height: 2px;
background-color: #000;
}
.bismillah-hello-kitty-whiskers.left1 {
top: 50%;
left: 0%;
transform: rotate(15deg);
}
.bismillah-hello-kitty-whiskers.left2 {
top: 60%;
left: -2px;
}
.bismillah-hello-kitty-whiskers.left3 {
top: 70%;
left: 0%;
transform: rotate(-15deg);
}
.bismillah-hello-kitty-whiskers.right1 {
top: 50%;
right: 0%;
transform: rotate(-15deg);
}
.bismillah-hello-kitty-whiskers.right2 {
top: 60%;
right: -2px;
}
.bismillah-hello-kitty-whiskers.right3 {
top: 70%;
right: 0%;
transform: rotate(15deg);
}
.bismillah-hello-kitty-bow {
position: absolute;
width: 15px;
height: 15px;
background-color: #e60012;
border: 2px solid #000;
border-radius: 50%;
top: 5px;
right: 15px;
z-index: 10;
}
.bismillah-hello-kitty-bow::before,
.bismillah-hello-kitty-bow::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: #e60012;
border: 2px solid #000;
border-radius: 50%;
top: -5px;
}
.bismillah-hello-kitty-bow::before {
left: -15px;
}
.bismillah-hello-kitty-bow::after {
right: -15px;
}
/* ===== Animated Cartoons ===== */
/* Blinking Eyes Animation */
.bismillah-cartoon-blink .bismillah-mickey-eyes,
.bismillah-cartoon-blink .bismillah-spongebob-eyes,
.bismillah-cartoon-blink .bismillah-pikachu-eyes,
.bismillah-cartoon-blink .bismillah-doraemon-eyes,
.bismillah-cartoon-blink .bismillah-hello-kitty-eyes {
animation: bismillah-cartoon-blink 3s infinite;
}
@keyframes bismillah-cartoon-blink {
0%,
45%,
55%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.1);
}
}
/* Bounce Animation */
.bismillah-cartoon-bounce {
animation: bismillah-cartoon-bounce 2s infinite;
}
@keyframes bismillah-cartoon-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
/* Shake Animation */
.bismillah-cartoon-shake {
animation: bismillah-cartoon-shake 2s infinite;
}
@keyframes bismillah-cartoon-shake {
0%,
100% {
transform: rotate(0);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
}
/* Wave Animation */
.bismillah-cartoon-wave .bismillah-doraemon-whiskers.right1,
.bismillah-cartoon-wave .bismillah-doraemon-whiskers.right2,
.bismillah-cartoon-wave .bismillah-doraemon-whiskers.right3,
.bismillah-cartoon-wave .bismillah-hello-kitty-whiskers.right1,
.bismillah-cartoon-wave .bismillah-hello-kitty-whiskers.right2,
.bismillah-cartoon-wave .bismillah-hello-kitty-whiskers.right3 {
animation: bismillah-cartoon-wave 2s infinite;
}
@keyframes bismillah-cartoon-wave {
0%,
100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.bismillah-cartoon-blink,
.bismillah-cartoon-bounce,
.bismillah-cartoon-shake,
.bismillah-cartoon-wave {
animation: none ;
}
}