card | کتابخانه کامپوننت‌ها

پیش‌نمایش زنده

کد HTML

<div class="body">
  <div class="comic-panel">
    <div class="container-items">
      <button
        class="item-color"
        style="--color: #e11d48"
        aria-color="#e11d48"
      ></button>

      <button
        class="item-color"
        style="--color: #f472b6"
        aria-color="#f472b6"
      ></button>

      <button
        class="item-color"
        style="--color: #fb923c"
        aria-color="#fb923c"
      ></button>

      <button
        class="item-color"
        style="--color: #facc15"
        aria-color="#facc15"
      ></button>

      <button
        class="item-color"
        style="--color: #84cc16"
        aria-color="#84cc16"
      ></button>

      <button
        class="item-color"
        style="--color: #10b981"
        aria-color="#10b981"
      ></button>

      <button
        class="item-color"
        style="--color: #0ea5e9"
        aria-color="#0ea5e9"
      ></button>

      <button
        class="item-color"
        style="--color: #3b82f6"
        aria-color="#3b82f6"
      ></button>

      <button
        class="item-color"
        style="--color: #8b5cf6"
        aria-color="#8b5cf6"
      ></button>

      <button
        class="item-color"
        style="--color: #a78bfa"
        aria-color="#a78bfa"
      ></button>
    </div>
  </div>
</div>

کد CSS

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f0e8d8;
  font-family: "Bangers", cursive;
  overflow: hidden;
}

.comic-panel {
  background: #ffffff;
  border: 4px solid #000;
  padding: 1.2rem;
  border-radius: 8px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
}

.container-items {
  display: flex;
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

.item-color {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 48px;
  border: none;
  outline: none;
  margin: -4px;
  background-color: transparent;
  transition: 300ms ease-out;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.item-color::after {
  position: absolute;
  content: "";
  inset: 0;
  width: 40px;
  height: 40px;
  background-color: var(--color);
  border-radius: 6px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  pointer-events: none;
  transition: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.item-color::before {
  position: absolute;
  content: attr(aria-color);
  left: 50%;
  bottom: 60px;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
  padding: 6px 10px;
  background-color: #fef3c7;
  color: #000;
  border: 3px solid #000;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform-origin: bottom center;
  transition:
    all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 300ms ease-out,
    visibility 300ms ease-out;
  transform: translateX(-50%) scale(0.5) translateY(10px);
  white-space: nowrap;
}

.item-color:hover {
  transform: scale(1.5) translateY(-5px);
  z-index: 99999;
}

.item-color:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1) translateY(0);
}

.item-color:active::after {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000;
}

.item-color:focus::before {
  content: "COPIED!";
  opacity: 1;
  visibility: visible;
  background-color: #a7f3d0;
  transform: translateX(-50%) scale(1) translateY(0);
}

.item-color:hover + * {
  transform: scale(1.3) translateY(-3px);
  z-index: 9999;
}

.item-color:hover + * + * {
  transform: scale(1.15);
  z-index: 999;
}

.item-color:has(+ *:hover) {
  transform: scale(1.3) translateY(-3px);
  z-index: 9999;
}

.item-color:has(+ * + *:hover) {
  transform: scale(1.15);
  z-index: 999;
}

نوع: card

تاریخ ایجاد: 2026/06/06

آخرین بروزرسانی: 2026/06/06