カード・ボックスのCSSコピペパーツ 24選

CRG-04-001

浮き上がりカード

マウスを乗せるとふわっと浮きます。

浮き上がりカードLift on Hover

.cg-cd-lift {
  width: 230px;
  padding: 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(27, 26, 23, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cg-cd-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(27, 26, 23, .16);
}
.cg-cd-lift b { display: block; margin-bottom: 6px; }
.cg-cd-lift p { margin: 0; font-size: 13px; color: #5A5650; }

<div class="cg-cd-lift"><b>浮き上がりカード</b><p>マウスを乗せるとふわっと浮きます。</p></div>

GROSS WT. 532 B ORIGINAL

CRG-04-002

ずらし影カード

影をぼかさない、今っぽい強い箱。

ハードシャドウカードHard Shadow

.cg-cd-hard {
  width: 230px;
  padding: 22px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  box-shadow: 6px 6px 0 #1B1A17;
}
.cg-cd-hard b { display: block; margin-bottom: 6px; }
.cg-cd-hard p { margin: 0; font-size: 13px; color: #5A5650; }

<div class="cg-cd-hard"><b>ずらし影カード</b><p>影をぼかさない、今っぽい強い箱。</p></div>

GROSS WT. 382 B ORIGINAL

CRG-04-003

今日のTODO:
コーヒーを淹れる

付箋カードSticky Note

.cg-cd-sticky {
  width: 190px;
  padding: 24px 20px 30px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  background: #FFE28A;
  transform: rotate(-2deg);
  box-shadow: 0 8px 16px rgba(27, 26, 23, .15);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

<div class="cg-cd-sticky">今日のTODO:<br>コーヒーを淹れる</div>

GROSS WT. 383 B ORIGINAL

CRG-04-004

CASE 01

書類フォルダ風のカード。ラベルタブ付き。

ファイルタブカードFile Tab

.cg-cd-file { width: 240px; }
.cg-cd-file-tab {
  display: inline-block;
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: #C89B6C;
  border-radius: 8px 8px 0 0;
}
.cg-cd-file-body {
  padding: 18px 20px;
  font-size: 13px;
  background: #FBF4EA;
  border: 2px solid #C89B6C;
  border-radius: 0 10px 10px 10px;
}

<div class="cg-cd-file"><span class="cg-cd-file-tab">CASE 01</span><div class="cg-cd-file-body">書類フォルダ風のカード。ラベルタブ付き。</div></div>

GROSS WT. 543 B ORIGINAL

CRG-04-005

Glass Card

すりガラスの質感。背景に色があるほど映えます。

グラスカードGlassmorphism

.cg-cd-glass-bg {
  padding: 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, #E8590C, #3A5A78);
}
.cg-cd-glass {
  width: 210px;
  padding: 20px;
  color: #fff;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.cg-cd-glass b { display: block; margin-bottom: 6px; }
.cg-cd-glass p { margin: 0; font-size: 12.5px; opacity: .9; }

<div class="cg-cd-glass-bg"><div class="cg-cd-glass"><b>Glass Card</b><p>すりガラスの質感。背景に色があるほど映えます。</p></div></div>

GROSS WT. 677 B ORIGINAL

CRG-04-006

50% OFFクーポンコード: CARGO50

USE
NOW

チケット切り取りカードTicket Stub

.cg-cd-ticket {
  display: flex;
  width: 270px;
  color: #fff;
  border-radius: 12px;
  background: #E8590C;
  -webkit-mask: radial-gradient(circle 9px at calc(100% - 66px) 0, transparent 98%, #000) top / 100% 51%,
    radial-gradient(circle 9px at calc(100% - 66px) 100%, transparent 98%, #000) bottom / 100% 51%;
  -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(circle 9px at calc(100% - 66px) 0, transparent 98%, #000) top / 100% 51%,
    radial-gradient(circle 9px at calc(100% - 66px) 100%, transparent 98%, #000) bottom / 100% 51%;
  mask-repeat: no-repeat;
}
.cg-cd-ticket-l { flex: 1; padding: 18px 20px; }
.cg-cd-ticket-l b { display: block; font-size: 20px; }
.cg-cd-ticket-l span { font-size: 11px; opacity: .9; }
.cg-cd-ticket-r {
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  border-left: 2px dashed rgba(255, 255, 255, .6);
}

<div class="cg-cd-ticket"><div class="cg-cd-ticket-l"><b>50% OFF</b><span>クーポンコード: CARGO50</span></div><div class="cg-cd-ticket-r">USE<br>NOW</div></div>

GROSS WT. 1135 B ORIGINAL

CRG-04-007

2026.07 倉庫にて

ポラロイド風カードPolaroid

.cg-cd-polaroid {
  margin: 0;
  padding: 12px 12px 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(27, 26, 23, .2);
  transform: rotate(2deg);
  transition: transform .25s ease;
}
.cg-cd-polaroid:hover { transform: rotate(0deg) scale(1.03); }
.cg-cd-polaroid-img {
  width: 170px;
  height: 110px;
  background: linear-gradient(135deg, #C89B6C, #8A6A44);
}
.cg-cd-polaroid figcaption {
  padding-top: 10px;
  font-size: 12px;
  text-align: center;
  color: #5A5650;
}

<figure class="cg-cd-polaroid"><div class="cg-cd-polaroid-img"></div><figcaption>2026.07 倉庫にて</figcaption></figure>

GROSS WT. 599 B ORIGINAL

CRG-04-008

右上の角が折れているカード。掲示物風の演出に。

角折りお知らせカードFolded Corner

.cg-cd-fold {
  position: relative;
  width: 240px;
  padding: 20px 22px;
  font-size: 13.5px;
  background: #FBF4EA;
  border: 1px solid #D9D5CB;
  border-radius: 4px;
  background-image: linear-gradient(225deg, transparent 24px, #FBF4EA 0);
}
.cg-cd-fold::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent #D9C9A8 transparent transparent;
  filter: drop-shadow(-2px 2px 2px rgba(27, 26, 23, .12));
}

<div class="cg-cd-fold">右上の角が折れているカード。掲示物風の演出に。</div>

GROSS WT. 600 B ORIGINAL

CRG-04-009

PRO PLAN

グラデーションの枠で「特別枠」を演出。

グラデ縁カードGradient Edge

.cg-cd-gedge {
  width: 230px;
  padding: 20px 22px;
  border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #E8590C, #B03A5B, #3A5A78) border-box;
  border: 3px solid transparent;
}
.cg-cd-gedge b { display: block; margin-bottom: 6px; letter-spacing: .08em; }
.cg-cd-gedge p { margin: 0; font-size: 13px; color: #5A5650; }

<div class="cg-cd-gedge"><b>PRO PLAN</b><p>グラデーションの枠で「特別枠」を演出。</p></div>

GROSS WT. 487 B ORIGINAL

CRG-04-010

カードの束の一番上、という見せ方。

重なりスタックカードStacked Deck

.cg-cd-stack {
  position: relative;
  width: 230px;
  padding: 20px 22px;
  font-size: 13.5px;
  font-weight: 700;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 12px;
}
.cg-cd-stack::before,
.cg-cd-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 12px;
}
.cg-cd-stack::before { transform: rotate(-3deg); background: #F2B707; }
.cg-cd-stack::after { transform: rotate(2.2deg); background: #E9E7E0; }

<div class="cg-cd-stack">カードの束の一番上、という見せ方。</div>

GROSS WT. 597 B ORIGINAL

CRG-04-011

お知らせ

左上にカテゴリタグを重ねたカード。記事一覧に。

コーナータグ付きカードCorner Tag

.cg-cd-ctag {
  position: relative;
  width: 240px;
  padding: 30px 20px 18px;
  background: #fff;
  border: 1.5px solid #E3DFD4;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(27, 26, 23, .06);
}
.cg-cd-ctag span {
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  padding: 5px 16px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: #3A5A78;
  border-radius: 12px 0 12px 0;
}
.cg-cd-ctag p { margin: 0; font-size: 13px; color: #5A5650; line-height: 1.7; }

<div class="cg-cd-ctag"><span>お知らせ</span><p>左上にカテゴリタグを重ねたカード。記事一覧に。</p></div>

GROSS WT. 617 B ORIGINAL

CRG-04-012

2026.07.02余白と一本の線だけで作るカード

一本線ミニマルカードSingle Line

.cg-cd-line {
  width: 250px;
  padding: 20px 4px;
  border-top: 2.5px solid #1B1A17;
  transition: border-color .25s;
}
.cg-cd-line:hover { border-top-color: #E8590C; }
.cg-cd-line small {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 11.5px;
  color: #8B857A;
  margin-bottom: 8px;
}
.cg-cd-line b { font-size: 15px; line-height: 1.6; }

<div class="cg-cd-line"><small>2026.07.02</small><b>余白と一本の線だけで作るカード</b></div>

GROSS WT. 471 B ORIGINAL

CRG-04-013

ふわふわ

置いておくだけで浮遊し続けるカード。

常時ふわふわカードIdle Float

.cg-cd-idle {
  width: 220px;
  padding: 22px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(27, 26, 23, .14);
  animation: cg-cd-idle-float 3.4s ease-in-out infinite;
}
.cg-cd-idle b { display: block; margin-bottom: 6px; }
.cg-cd-idle p { margin: 0; font-size: 13px; color: #5A5650; }
@keyframes cg-cd-idle-float {
  50% { transform: translateY(-8px); box-shadow: 0 24px 40px rgba(27, 26, 23, .1); }
}

<div class="cg-cd-idle"><b>ふわふわ</b><p>置いておくだけで浮遊し続けるカード。</p></div>

GROSS WT. 540 B ORIGINAL

CRG-04-014

PREMIUM

ホバーすると光が斜めに走ります。

光が走るカードShine on Hover

.cg-cd-shine {
  position: relative;
  width: 230px;
  padding: 22px;
  color: #fff;
  background: linear-gradient(135deg, #33313B, #1B1A22);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}
.cg-cd-shine b { display: block; margin-bottom: 6px; letter-spacing: .12em; }
.cg-cd-shine p { margin: 0; font-size: 12.5px; opacity: .8; }
.cg-cd-shine::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -80%;
  width: 45%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.cg-cd-shine:hover::before { left: 130%; }

<div class="cg-cd-shine"><b>PREMIUM</b><p>ホバーすると光が斜めに走ります。</p></div>

GROSS WT. 754 B ORIGINAL

CRG-04-015

AI PLAN

枠の上を光が回り続けます。

枠を光が周回するカードOrbiting Border

@property --cg-orbit-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.cg-cd-orbit {
  padding: 2px;
  border-radius: 16px;
  background: conic-gradient(
    from var(--cg-orbit-angle),
    transparent 0 280deg,
    #E8590C 320deg,
    #F2B707 340deg,
    transparent 360deg
  ), #E3DFD4;
  animation: cg-cd-orbit-spin 3s linear infinite;
}
.cg-cd-orbit .in {
  width: 220px;
  padding: 20px 22px;
  background: #fff;
  border-radius: 14px;
}
.cg-cd-orbit b { display: block; margin-bottom: 6px; letter-spacing: .1em; }
.cg-cd-orbit p { margin: 0; font-size: 12.5px; color: #5A5650; }
@keyframes cg-cd-orbit-spin {
  to { --cg-orbit-angle: 360deg; }
}

<div class="cg-cd-orbit"><div class="in"><b>AI PLAN</b><p>枠の上を光が回り続けます。</p></div></div>

GROSS WT. 788 B ORIGINAL

CRG-04-016

Q.裏に何がある？

A.答えがあります

ホバーで裏返るカードFlip Card

.cg-cd-flip {
  width: 210px;
  height: 120px;
  perspective: 700px;
  cursor: pointer;
}
.cg-cd-flip .inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.cg-cd-flip:hover .inner { transform: rotateY(180deg); }
.cg-cd-flip .front,
.cg-cd-flip .back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 14px;
  backface-visibility: hidden;
}
.cg-cd-flip .front {
  background: #fff;
  border: 2px solid #1B1A17;
}
.cg-cd-flip .back {
  color: #fff;
  background: #E8590C;
  transform: rotateY(180deg);
}
.cg-cd-flip b { font-size: 18px; }

<div class="cg-cd-flip"><div class="inner"><div class="front"><b>Q.</b>裏に何がある？</div><div class="back"><b>A.</b>答えがあります</div></div></div>

GROSS WT. 942 B ORIGINAL

CRG-04-017

さわってみて

ぷるぷるカードWobble Card

.cg-cd-wobble {
  width: 200px;
  padding: 34px 0;
  text-align: center;
  font-weight: 900;
  background: #FFE28A;
  border: 2.5px solid #1B1A17;
  border-radius: 18px;
  cursor: pointer;
}
.cg-cd-wobble:hover {
  animation: cg-cd-wobble-shake .6s ease;
}
@keyframes cg-cd-wobble-shake {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-2.5deg) scale(1.03); }
  50% { transform: rotate(2deg) scale(.98); }
  75% { transform: rotate(-1deg) scale(1.01); }
  100% { transform: rotate(0) scale(1); }
}

<div class="cg-cd-wobble"><b>さわってみて</b></div>

GROSS WT. 573 B ORIGINAL

CRG-04-018

TODAY'S PICK

めくれる山札カードDeck Shuffle

.cg-cd-deck {
  position: relative;
  width: 200px;
  height: 110px;
}
.cg-cd-deck span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  animation: cg-cd-deck-top 3.6s ease-in-out infinite;
}
.cg-cd-deck i {
  position: absolute;
  inset: 0;
  background: #F2B707;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  transform: rotate(-4deg);
}
.cg-cd-deck i:last-of-type {
  background: #E9E7E0;
  transform: rotate(3deg);
  animation: cg-cd-deck-under 3.6s ease-in-out infinite;
}
@keyframes cg-cd-deck-top {
  0%, 55%, 100% { transform: rotate(0) translateY(0); }
  70%, 85% { transform: rotate(6deg) translate(14px, -10px); }
}
@keyframes cg-cd-deck-under {
  0%, 55%, 100% { transform: rotate(3deg); }
  70%, 85% { transform: rotate(0); }
}

<div class="cg-cd-deck"><i></i><i></i><span>TODAY'S PICK</span></div>

GROSS WT. 1008 B ORIGINAL

CRG-04-019

角丸を不均等にすると、線が手描きのように揺れます。

手描き風ゆがみ枠カードHand-Drawn Border

.cg-cd-hand {
  width: 240px;
  padding: 22px 24px;
  font-size: 13.5px;
  font-weight: 700;
  background: #FBF4EA;
  border: 2.5px solid #1B1A17;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

<div class="cg-cd-hand">角丸を不均等にすると、線が手描きのように揺れます。</div>

GROSS WT. 317 B ORIGINAL

CRG-04-020

Light¥500/月Pro¥980/月

:has()選択カード:has() Selection

/* JS不要: :has(input:checked) でカード全体の見た目が変わる */
.cg-cd-hasgrp { display: flex; gap: 12px; }
.cg-cd-has {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 22px;
  background: #fff;
  border: 2.5px solid #D9D5CB;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.cg-cd-has input { position: absolute; opacity: 0; }
.cg-cd-has b { font-size: 15px; }
.cg-cd-has span { font-size: 12px; color: #8B857A; }
.cg-cd-has:has(input:checked) {
  border-color: #E8590C;
  background: #FFF3EA;
  transform: translateY(-3px);
}
.cg-cd-has:has(input:focus-visible) { outline: 3px solid #3A5A78; outline-offset: 2px; }

<div class="cg-cd-hasgrp"><label class="cg-cd-has"><input type="radio" name="cg-plan" checked><b>Light</b><span>¥500/月</span></label><label class="cg-cd-has"><input type="radio" name="cg-plan"><b>Pro</b><span>¥980/月</span></label></div>

GROSS WT. 954 B ORIGINAL

CRG-04-021

LIMITED

ホバーで虹色の光沢が強まります。

ホログラフィック虹色カードHolographic Foil

.cg-cd-holo {
  position: relative;
  width: 230px;
  padding: 22px;
  color: #1B1A17;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(27, 26, 23, .12);
  transition: transform .35s ease, box-shadow .35s ease;
}
.cg-cd-holo b, .cg-cd-holo p { position: relative; }
.cg-cd-holo b { display: block; margin-bottom: 6px; letter-spacing: .1em; }
.cg-cd-holo p { margin: 0; font-size: 12.5px; color: #5A5650; }
.cg-cd-holo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 15%, rgba(127, 212, 255, .55) 30%, rgba(232, 85, 126, .55) 45%, rgba(242, 183, 7, .55) 60%, rgba(127, 212, 255, .55) 75%, transparent 90%);
  background-size: 250% 250%;
  background-position: 0% 0%;
  opacity: .55;
  transition: opacity .35s ease;
  animation: cg-cd-holo-shift 6s ease-in-out infinite;
}
.cg-cd-holo:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(232, 89, 12, .22), 0 4px 14px rgba(58, 90, 120, .18);
}
.cg-cd-holo:hover::before { opacity: .9; }
@keyframes cg-cd-holo-shift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

<div class="cg-cd-holo"><b>LIMITED</b><p>ホバーで虹色の光沢が強まります。</p></div>

GROSS WT. 1304 B ORIGINAL

CRG-04-022

ガラスDock(macOS風)Glass Dock

.cg-cd-dock {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .25);
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(27, 26, 23, .18), inset 0 1px 1px rgba(255, 255, 255, .8);
}
.cg-cd-dock i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 65%, white), var(--c));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 3px 6px rgba(0, 0, 0, .18);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
  transform-origin: bottom;
  cursor: pointer;
}
/* macOS Dockのように、乗せたアイコンが大きく、隣も少し持ち上がる */
.cg-cd-dock i:hover { transform: scale(1.5) translateY(-6px); }
.cg-cd-dock i:hover + i,
.cg-cd-dock i:has(+ i:hover) { transform: scale(1.22) translateY(-3px); }

<div class="cg-cd-dock"><i style="--c:#E8590C"></i><i style="--c:#3A9BD5"></i><i style="--c:#3AA76D"></i><i style="--c:#C2426B"></i><i style="--c:#F2B707"></i></div>

GROSS WT. 1171 B ORIGINAL

CRG-04-023

Sign inContinue

氷ガラス認証カードIce Auth Card

.cg-cd-ice-bg {
  padding: 28px;
  border-radius: 20px;
  background:
    radial-gradient(at 20% 20%, #6FC7E8 0, transparent 55%),
    radial-gradient(at 80% 80%, #3A6FA8 0, transparent 55%),
    #1A3550;
}
.cg-cd-ice {
  width: 190px;
  padding: 22px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px) saturate(1.3) brightness(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.3) brightness(1.08);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .6),
    inset 0 -10px 20px rgba(255, 255, 255, .08),
    0 14px 34px rgba(0, 0, 0, .3);
}
.cg-cd-ice b { display: block; font-size: 16px; color: #fff; margin-bottom: 16px; }
.cg-cd-ice .field {
  display: block;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
}
.cg-cd-ice .btn {
  display: block;
  margin-top: 14px;
  padding: 9px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  color: #1A3550;
  background: rgba(255, 255, 255, .9);
  border-radius: 8px;
  animation: cg-cd-ice-sheen 3s ease-in-out infinite;
}
/* ボタン表面を光沢が横切る(凍ったガラスの反射) */
@keyframes cg-cd-ice-sheen {
  0%, 60% { box-shadow: inset 0 0 0 rgba(255, 255, 255, 0); }
  75% { box-shadow: inset 40px 0 20px rgba(255, 255, 255, .6); }
  90%, 100% { box-shadow: inset 0 0 0 rgba(255, 255, 255, 0); }
}

<div class="cg-cd-ice-bg"><div class="cg-cd-ice"><b>Sign in</b><span class="field"></span><span class="field"></span><i class="btn">Continue</i></div></div>

GROSS WT. 1655 B ORIGINAL

CRG-04-024

Squircle Card

ホバーでcorner-shapeがsquircleからscoopへ変形します。border-radiusと組み合わせる新しいCSSプロパティです。

コーナーシェイプ変形カードCorner-Shape Morph Card

/* corner-shape はborder-radiusの丸め方自体を差し替えるプロパティ。squircle(スクイーク)やscoop等を指定し、
   transitionで滑らかに変形できる。非対応ブラウザでは@supportsでborder-radiusのみの通常カードに落とす */
.cg-cd-cshape {
  width: 260px;
  padding: 28px 24px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 32px;
  corner-shape: squircle;
  transition: corner-shape .4s ease, border-radius .4s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cg-cd-cshape h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
}
.cg-cd-cshape p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #57544c;
}
.cg-cd-cshape:hover {
  corner-shape: scoop;
  border-radius: 40px 12px 40px 12px;
  border-color: #E8590C;
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(27, 26, 23, .18);
}
@supports not (corner-shape: squircle) {
  .cg-cd-cshape { border-radius: 20px; }
}

<div class="cg-cd-cshape"><h3>Squircle Card</h3><p>ホバーでcorner-shapeがsquircleからscoopへ変形します。border-radiusと組み合わせる新しいCSSプロパティです。</p></div>

GROSS WT. 1195 B ORIGINAL

カード・ボックス24点 在庫あり