bismillahcss/src/components/cartoons.css

The next-gen utility-first CSS framework for modern, futuristic web development.

/* ========== 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 !important;
  }
}