CSS 예제 모음

/* 네온 사인 스타일 */
 
[data-state="inactive"],
[data-state="active"] {
  --key-radius: 6px;
  font-size: 24px;
  font-weight: 700;
}
 
[data-state="inactive"] {
  --key-bg: transparent;
  --key-border: 3px solid #474244;
  --key-text-color: #474244;
}
 
[data-state="active"] {
  --key-bg: transparent;
  --key-border: 3px solid #ff2b80;
  --key-text-color: #ff2b80;
  text-shadow: 0px 0px 3px #ff2b80;
  box-shadow: 0px 0px 4px #b3245d, 0px 0px 4px #b3245d;
}
 
/* 파란색 키 변형 */
.blue[data-state="active"] {
  --key-bg: transparent;
  --key-border: 3px solid #2ebef3;
  --key-text-color: #2ebef3;
  text-shadow: 0px 0px 3px #2ebef3;
  box-shadow: 0px 0px 4px #2b8eff, 0px 0px 4px #2b8eff;
}
 
/* 카운터 스타일 */
.counter {
  font-size: 24px;
  font-weight: 700;
}
 
.counter[data-counter-state="inactive"] {
  --counter-color: #474244;
}
 
.counter[data-counter-state="active"] {
  --counter-color: #ff2b80;
  text-shadow: 0px 0px 3px #ff2b80;
}
 
.blue .counter[data-counter-state="active"] {
  --counter-color: #2ebef3;
  text-shadow: 0px 0px 3px #2ebef3;
}

/* 파스텔 3D 스타일 */
 
[data-state="inactive"],
[data-state="active"] {
  --key-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  touch-action: manipulation;
  transition: 0.13s ease-in-out;
  cursor: pointer;
}
 
[data-state="inactive"] {
  --key-bg: #ffd4e5;
  --key-border: 2px solid #e8b4c8;
  --key-text-color: #8b5a6b;
  box-shadow: 0px 4px 0px #d9a0b8, 0px 6px 12px rgba(217, 160, 184, 0.3);
}
 
[data-state="active"] {
  --key-bg: #ffc4dd;
  --key-border: 2px solid #e8b4c8;
  --key-text-color: #8b5a6b;
  box-shadow: 0px 0px 0px #d9a0b8, 0px 2px 8px rgba(217, 160, 184, 0.2);
  --key-offset-x: 0px;
  --key-offset-y: 4px;
}
 
/* 카운터 스타일 */
.counter {
  font-size: 14px;
  font-weight: 600;
}
 
.counter[data-counter-state="inactive"] {
  --counter-color: #c9a0b8;
}
 
.counter[data-counter-state="active"] {
  --counter-color: #8b5a6b;
}

/* 미니멀 플랫 스타일 */
 
[data-state="inactive"],
[data-state="active"] {
  --key-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: 0.05s ease-out;
}
 
[data-state="inactive"] {
  --key-bg: #f5f5f5;
  --key-border: none;
  --key-text-color: #333;
}
 
[data-state="active"] {
  --key-bg: #333;
  --key-border: none;
  --key-text-color: #fff;
}
 
/* 카운터 스타일 */
.counter {
  font-size: 12px;
  font-weight: 400;
}
 
.counter[data-counter-state="inactive"] {
  --counter-color: #999;
}
 
.counter[data-counter-state="active"] {
  --counter-color: #333;
}

/* 다크 글래스 스타일 */
 
[data-state="inactive"],
[data-state="active"] {
  --key-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  transition: 0.15s ease;
  backdrop-filter: blur(10px);
}
 
[data-state="inactive"] {
  --key-bg: rgba(255, 255, 255, 0.1);
  --key-border: 1px solid rgba(255, 255, 255, 0.2);
  --key-text-color: rgba(255, 255, 255, 0.6);
}
 
[data-state="active"] {
  --key-bg: rgba(255, 255, 255, 0.25);
  --key-border: 1px solid rgba(255, 255, 255, 0.4);
  --key-text-color: #fff;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1);
}
 
/* 카운터 스타일 */
.counter {
  font-size: 14px;
}
 
.counter[data-counter-state="inactive"] {
  --counter-color: rgba(255, 255, 255, 0.4);
}
 
.counter[data-counter-state="active"] {
  --counter-color: rgba(255, 255, 255, 0.9);
}

/* 레트로 게임 스타일 */
 
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
 
[data-state="inactive"],
[data-state="active"] {
  --key-radius: 0px;
  font-size: 12px;
  font-weight: 400;
  font-family: "Press Start 2P", cursive;
  transition: none;
  image-rendering: pixelated;
}
 
[data-state="inactive"] {
  --key-bg: #2d2d2d;
  --key-border: 4px solid #5a5a5a;
  --key-text-color: #5a5a5a;
}
 
[data-state="active"] {
  --key-bg: #ffcc00;
  --key-border: 4px solid #ff9900;
  --key-text-color: #000;
}
 
/* 카운터 스타일 */
.counter {
  font-size: 8px;
  font-family: "Press Start 2P", cursive;
}
 
.counter[data-counter-state="inactive"] {
  --counter-color: #5a5a5a;
}
 
.counter[data-counter-state="active"] {
  --counter-color: #ffcc00;
}

/* 그라데이션 스타일 */
 
[data-state="inactive"],
[data-state="active"] {
  --key-radius: 16px;
  font-size: 20px;
  font-weight: 700;
  transition: 0.2s ease;
}
 
[data-state="inactive"] {
  --key-bg: transparent;
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  --key-border: 2px solid #3d3d3d;
  --key-text-color: #666;
}
 
[data-state="active"] {
  --key-bg: transparent;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --key-border: 2px solid #8b5cf6;
  --key-text-color: #fff;
  box-shadow: 0px 4px 15px rgba(102, 126, 234, 0.4);
}
 
/* 노란색 키 변형 */
.gold[data-state="active"] {
  --key-bg: transparent;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --key-border: 2px solid #f5576c;
  box-shadow: 0px 4px 15px rgba(245, 87, 108, 0.4);
}
 
/* 카운터 스타일 */
.counter[data-counter-state="inactive"] {
  --counter-color: #666;
}
 
.counter[data-counter-state="active"] {
  --counter-color: #fff;
  text-shadow: 0px 0px 10px rgba(139, 92, 246, 0.5);
}