3D रिपल यूआई

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

30 March 2025

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Gelişmiş Ripple UI</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <style>
    :root {
      --bg: #0d1117;
      --fg: #ffffff;
      --glass: rgba(255, 255, 255, 0.05);
      --blur: 15px;
    }

body.light {
      --bg: #f5f5f5;
      --fg: #222;
      --glass: rgba(0, 0, 0, 0.05);
    }

* {
      box-sizing: border-box;
    }

body {
      margin: 0;
      height: 100vh;
      background: var(--bg);
      color: var(--fg);
      font-family: 'Segoe UI', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: background 0.3s, color 0.3s;
    }

.container {
      display: flex;
      gap: 20px;
      padding: 20px;
      background: var(--glass);
      border-radius: 16px;
      backdrop-filter: blur(var(--blur));
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

.btn-glass {
      position: relative;
      overflow: hidden;
      padding: 14px 24px;
      font-size: 16px;
      border: none;
      border-radius: 10px;
      background: var(--glass);
      color: var(--fg);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: transform 0.2s;
    }

.btn-glass:hover {
      transform: translateY(-2px);
    }

.btn-glass .fa {
      font-size: 18px;
    }

.ripple {
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      opacity: 0.4;
      pointer-events: none;
      background: currentColor;
    }

@keyframes ripple-effect {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }

/* Tooltip */
    .btn-glass::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 130%;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 6px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      white-space: nowrap;
    }

.btn-glass:hover::after {
      opacity: 1;
    }

/* Dark Mode Toggle */
    .toggle-mode {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--glass);
      padding: 10px 14px;
      border-radius: 12px;
      cursor: pointer;
      font-size: 18px;
      color: var(--fg);
      transition: 0.3s;
    }

.loading .fa {
      animation: spin 1s linear infinite;
    }

@keyframes spin {
      0% { transform: rotate(0); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>

buttons.forEach(({ icon, text, color, tooltip }) => {
    const btn = document.createElement("button");
    btn.className = "btn-glass";
    btn.style.color = color;
    btn.setAttribute("data-tooltip", tooltip);

const i = document.createElement("i");
    i.className = `fa ${icon}`;
    btn.appendChild(i);

const span = document.createElement("span");
    span.textContent = text;
    btn.appendChild(span);

// Ripple
    btn.addEventListener("click", e => {
      sound.currentTime = 0;
      sound.play();

// Ripple
      const ripple = document.createElement("span");
      ripple.className = "ripple";
      const rect = btn.getBoundingClientRect();
      const size = Math.max(rect.width, rect.height);
      ripple.style.width = ripple.style.height = `${size}px`;
      ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
      ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
      ripple.style.animation = "ripple-effect 600ms ease-out";
      btn.appendChild(ripple);
      setTimeout(() => ripple.remove(), 600);

// Loading simülasyonu
      const iconEl = btn.querySelector(".fa");
      const originalClass = iconEl.className;
      iconEl.className = "fa fa-spinner";
      btn.classList.add("loading");

setTimeout(() => {
        iconEl.className = originalClass;
        btn.classList.remove("loading");
      }, 1500);
    });

app.appendChild(btn);
  });

// Dark Mode Toggle
  const modeBtn = document.getElementById("modeBtn");
  modeBtn.addEventListener("click", () => {
    document.body.classList.toggle("light");
    const icon = modeBtn.querySelector("i");
    icon.className = document.body.classList.contains("light") ? "fa fa-sun" : "fa fa-moon";
  });
</script>

</body>
</html>

3D रिपल यूआई

अनुशंसित

ytr3d3 द्वारा एक कोड

उत्पाद कार्ड यूआई डिज़ाइन

सिलेंडर ग्रिड पृष्ठभूमि 3D

HTML

CSS

JS

अनुशंसित

ytr3d3 द्वारा एक कोड

उत्पाद कार्ड यूआई डिज़ाइन

सिलेंडर ग्रिड पृष्ठभूमि 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS