Hướng dẫn tạo hiệu ứng VIP cao cấp cho Init Manga

1 tuần 0 2 12 phút đọc
English version

Một trong những chi tiết giúp website manga trở nên nổi bật hơn chính là hiệu ứng dành riêng cho thành viên VIP. Thay vì chỉ đổi màu nickname hoặc thêm badge đơn giản, nhiều website hiện nay bắt đầu sử dụng các hiệu ứng kính mờ, ánh sáng động và gradient cao cấp để tạo cảm giác “premium” rõ rệt hơn cho bình luận, review và chatbox.

Hướng dẫn tạo hiệu ứng VIP cao cấp cho Init Manga
Mục lục

Trong bài viết này, chúng ta sẽ cùng nâng cấp giao diện VIP trên Init Manga bằng nhiều phong cách khác nhau như Liquid Glass, Aurora, Neon Cyber và Royal Gold. Các mẫu đều được tối ưu để hoạt động tốt với hệ thống bình luận và chatbox của Init Manga.

Liquid Glass VIP Style

Liquid Glass là phong cách nổi bật với hiệu ứng kính mờ, blur nền và ánh sáng phản chiếu nhiều lớp. Đây là kiểu thiết kế đang được sử dụng rất nhiều trên các giao diện hiện đại vì mang lại cảm giác mềm mại, sang trọng và cao cấp hơn hẳn CSS truyền thống.

Mẫu này phù hợp với:

  • Website manga hiện đại
  • Giao diện sáng hoặc dark mode
  • Hệ thống donate VIP
  • Cộng đồng chatbox hoạt động mạnh
<style>
.iue-vip-badge {
    background: linear-gradient(90deg, #f39c12, #e91e63, #9c27b0);
    background-size: 200% 200%;
    animation: iueVipGradient 3s ease infinite;
    box-shadow: 0 0 6px rgb(0 0 0 / 0.2);
    font-weight: 600;
    transition: transform 0.3s ease;
}
@keyframes iueVipGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.init-chatbox-message-body.is-vip,
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-comment-primary.is-vip,
.recent-comment-content.is-vip,
.recent-review-content.is-vip {
    position: relative;
    background: rgb(255 255 255 / 0.35);
    border: 1px solid rgb(255 255 255 / 0.22);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.08),
        inset 0 1px 12px rgb(255 255 255 / 0.18);
    color: #666;
    overflow: hidden;
}
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: var(--im-theme-color);
}
.init-chatbox-message-body.is-vip::before,
.uk-comment-primary.is-vip::before,
.recent-comment-content.is-vip::before,
.recent-review-content.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.45),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.25),
            transparent 55%
        ),
        radial-gradient(
            80% 160% at 50% 120%,
            rgb(0 0 0 / 0.06),
            transparent 60%
        );
    mix-blend-mode: soft-light;
    z-index: -1;
}
.init-chatbox-message-body.is-vip::after,
.uk-comment-primary.is-vip::after,
.recent-comment-content.is-vip::after,
.recent-review-content.is-vip::after {
    content: "";
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background: radial-gradient(
            180px 160px at 20% 30%,
            rgb(135 206 250 / 0.22),
            transparent 60%
        ),
        radial-gradient(
            220px 200px at 75% 35%,
            rgb(255 182 193 / 0.2),
            transparent 65%
        ),
        radial-gradient(
            260px 220px at 40% 80%,
            rgb(144 238 144 / 0.18),
            transparent 65%
        ),
        radial-gradient(
            160px 140px at 85% 85%,
            rgb(255 255 255 / 0.25),
            transparent 60%
        );
    filter: blur(2px);
    background-size: 100% 100%;
    opacity: 0.9;
    z-index: -1;
}
.uk-light.is-vip,
.uk-light .init-chatbox-message-body.is-vip,
.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-light .uk-comment-primary.is-vip,
.uk-light .recent-comment-content.is-vip,
.uk-light .recent-review-content.is-vip {
    background: rgb(22 22 24 / 0.45);
    border-color: rgb(255 255 255 / 0.1);
    box-shadow: 0 3px 15px rgb(0 0 0 / 0.15),
        inset 0 1px 10px rgb(255 255 255 / 0.06);
    color: rgb(255 255 255 / 0.7);
}
.uk-light .init-chatbox-message-body.is-vip::after,
.uk-light .uk-comment-primary.is-vip::after,
.uk-light .recent-comment-content.is-vip::after,
.uk-light .recent-review-content.is-vip::after {
    background: radial-gradient(
            200px 180px at 20% 30%,
            rgb(135 206 250 / 0.18),
            transparent 60%
        ),
        radial-gradient(
            240px 220px at 75% 35%,
            rgb(186 85 211 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            280px 240px at 40% 80%,
            rgb(100 149 237 / 0.14),
            transparent 65%
        ),
        radial-gradient(
            180px 160px at 85% 85%,
            rgb(255 255 255 / 0.12),
            transparent 60%
        );
    opacity: 0.75;
}
</style>

Aurora VIP Style

Aurora VIP Style sử dụng các lớp gradient chuyển động nhẹ tạo hiệu ứng cực quang mềm mại. Khi kết hợp với dark mode, phần bình luận VIP sẽ có cảm giác nổi khối và chiều sâu rất đẹp.

Điểm nổi bật của mẫu Aurora:

  • Gradient chuyển động mượt
  • Hiệu ứng ánh sáng fantasy
  • Rất hợp giao diện anime hoặc fantasy manga
  • Giữ độ đọc tốt dù dùng nền tối
<style>
.iue-vip-badge {
    background: linear-gradient(
        135deg,
        #00c2ff,
        #4facfe,
        #7b61ff,
        #00e5ff
    );
    background-size: 300% 300%;
    animation: iueAuroraGradient 6s ease infinite;
    box-shadow:
        0 0 10px rgb(79 172 254 / 0.25),
        0 0 18px rgb(123 97 255 / 0.18),
        inset 0 1px 2px rgb(255 255 255 / 0.18);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgb(255 255 255 / 0.12);
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.iue-vip-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 14px rgb(79 172 254 / 0.32),
        0 0 24px rgb(123 97 255 / 0.24),
        inset 0 1px 3px rgb(255 255 255 / 0.22);
}

.iue-vip-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(255 255 255 / 0.18),
            transparent 80%
        );
    transform: translateX(-120%);
    animation: iueAuroraShine 5s linear infinite;
}

.iue-vip-badge::after {
    content: "";
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgb(0 229 255 / 0.18),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgb(123 97 255 / 0.18),
            transparent 45%
        );
    filter: blur(10px);
    opacity: 0.8;
}

@keyframes iueAuroraGradient {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes iueAuroraShine {
    100% {
        transform: translateX(120%);
    }
}

.init-chatbox-message-body.is-vip,
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-comment-primary.is-vip,
.recent-comment-content.is-vip,
.recent-review-content.is-vip {
    position: relative;
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 0.3),
            rgb(255 255 255 / 0.12)
        );
    border: 1px solid rgb(255 255 255 / 0.16);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        0 8px 30px rgb(0 0 0 / 0.08),
        inset 0 1px 10px rgb(255 255 255 / 0.14),
        inset 0 -1px 8px rgb(255 255 255 / 0.04);
    color: #666;
    overflow: hidden;
    isolation: isolate;
}

.init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: var(--im-theme-color);
}

.init-chatbox-message-body.is-vip::before,
.uk-comment-primary.is-vip::before,
.recent-comment-content.is-vip::before,
.recent-review-content.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.35),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.18),
            transparent 55%
        ),
        radial-gradient(
            80% 180% at 50% 120%,
            rgb(0 0 0 / 0.08),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.06),
            transparent 30%
        );
    mix-blend-mode: soft-light;
    z-index: -2;
}

.init-chatbox-message-body.is-vip::after,
.uk-comment-primary.is-vip::after,
.recent-comment-content.is-vip::after,
.recent-review-content.is-vip::after {
    content: "";
    position: absolute;
    inset: -15%;
    pointer-events: none;
    background:
        radial-gradient(
            260px 220px at 15% 25%,
            rgb(0 229 255 / 0.18),
            transparent 60%
        ),
        radial-gradient(
            320px 280px at 85% 20%,
            rgb(123 97 255 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            300px 260px at 40% 85%,
            rgb(79 172 254 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            240px 200px at 90% 90%,
            rgb(255 255 255 / 0.14),
            transparent 60%
        ),
        radial-gradient(
            180px 160px at 55% 45%,
            rgb(0 194 255 / 0.12),
            transparent 65%
        );
    filter: blur(4px);
    opacity: 0.95;
    z-index: -1;
    animation: iueAuroraFlow 12s ease-in-out infinite alternate;
}

@keyframes iueAuroraFlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-2%, -1%, 0) scale(1.03);
    }

    100% {
        transform: translate3d(2%, 1%, 0) scale(1.05);
    }
}

.uk-light.is-vip,
.uk-light .init-chatbox-message-body.is-vip,
.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-light .uk-comment-primary.is-vip,
.uk-light .recent-comment-content.is-vip,
.uk-light .recent-review-content.is-vip {
    background:
        linear-gradient(
            145deg,
            rgb(15 18 35 / 0.55),
            rgb(18 24 42 / 0.42)
        );
    border-color: rgb(255 255 255 / 0.08);
    box-shadow:
        0 10px 32px rgb(0 0 0 / 0.18),
        inset 0 1px 10px rgb(255 255 255 / 0.04),
        inset 0 -1px 8px rgb(255 255 255 / 0.02);
    color: rgb(255 255 255 / 0.72);
}

.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: rgb(130 220 255);
}

.uk-light .init-chatbox-message-body.is-vip::before,
.uk-light .uk-comment-primary.is-vip::before,
.uk-light .recent-comment-content.is-vip::before,
.uk-light .recent-review-content.is-vip::before {
    background:
        radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.08),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.04),
            transparent 55%
        ),
        radial-gradient(
            80% 180% at 50% 120%,
            rgb(0 0 0 / 0.18),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.03),
            transparent 30%
        );
}

.uk-light .init-chatbox-message-body.is-vip::after,
.uk-light .uk-comment-primary.is-vip::after,
.uk-light .recent-comment-content.is-vip::after,
.uk-light .recent-review-content.is-vip::after {
    background:
        radial-gradient(
            280px 240px at 15% 25%,
            rgb(0 229 255 / 0.14),
            transparent 60%
        ),
        radial-gradient(
            340px 300px at 85% 20%,
            rgb(123 97 255 / 0.14),
            transparent 65%
        ),
        radial-gradient(
            320px 280px at 40% 85%,
            rgb(79 172 254 / 0.12),
            transparent 65%
        ),
        radial-gradient(
            260px 220px at 90% 90%,
            rgb(255 255 255 / 0.06),
            transparent 60%
        ),
        radial-gradient(
            200px 180px at 55% 45%,
            rgb(0 194 255 / 0.08),
            transparent 65%
        );
    opacity: 0.78;
}
</style>

Neon Cyber VIP Style

Nếu website của bạn mang phong cách cyberpunk hoặc sci-fi thì Neon Cyber là lựa chọn cực kỳ phù hợp. Hiệu ứng glow neon giúp khung bình luận VIP nổi bật ngay lập tức, đặc biệt đẹp vào buổi tối hoặc khi sử dụng dark mode.

Phong cách Neon Cyber thường được dùng cho:

  • Website manga hành động
  • Theme cyberpunk
  • Giao diện sci-fi
  • Hệ thống VIP nhiều cấp độ
<style>
.iue-vip-badge {
    background:
        linear-gradient(
            135deg,
            #00f5ff,
            #00b7ff,
            #8b5cf6,
            #ff00ff
        );
    background-size: 300% 300%;
    animation: iueCyberGradient 5s ease infinite;
    border: 1px solid rgb(255 255 255 / 0.14);
    color: #fff;
    font-weight: 700;
    text-shadow:
        0 0 4px rgb(255 255 255 / 0.3),
        0 0 10px rgb(0 245 255 / 0.45);
    box-shadow:
        0 0 10px rgb(0 245 255 / 0.35),
        0 0 22px rgb(139 92 246 / 0.2),
        inset 0 1px 2px rgb(255 255 255 / 0.18);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.iue-vip-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 14px rgb(0 245 255 / 0.45),
        0 0 28px rgb(255 0 255 / 0.28),
        inset 0 1px 3px rgb(255 255 255 / 0.24);
}

.iue-vip-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(255 255 255 / 0.22),
            transparent 80%
        );
    transform: translateX(-140%);
    animation: iueCyberShine 4s linear infinite;
}

.iue-vip-badge::after {
    content: "";
    position: absolute;
    inset: -35%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgb(0 245 255 / 0.25),
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgb(255 0 255 / 0.22),
            transparent 46%
        );
    filter: blur(10px);
    opacity: 0.85;
    z-index: -1;
}

@keyframes iueCyberGradient {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes iueCyberShine {
    100% {
        transform: translateX(140%);
    }
}

.init-chatbox-message-body.is-vip,
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-comment-primary.is-vip,
.recent-comment-content.is-vip,
.recent-review-content.is-vip {
    position: relative;
    background:
        linear-gradient(
            145deg,
            rgb(8 10 22 / 0.92),
            rgb(14 18 32 / 0.82)
        );
    border: 1px solid rgb(0 245 255 / 0.12);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 0 12px rgb(0 245 255 / 0.08),
        0 0 24px rgb(139 92 246 / 0.08),
        inset 0 1px 8px rgb(255 255 255 / 0.04),
        inset 0 -1px 6px rgb(255 255 255 / 0.02);
    color: rgb(255 255 255 / 0.76);
    overflow: hidden;
    isolation: isolate;
}

.init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: rgb(90 220 255);
}

.init-chatbox-message-body.is-vip::before,
.uk-comment-primary.is-vip::before,
.recent-comment-content.is-vip::before,
.recent-review-content.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            135deg,
            rgb(0 245 255 / 0.06),
            transparent 30%,
            transparent 70%,
            rgb(255 0 255 / 0.06)
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.03),
            transparent 25%
        ),
        repeating-linear-gradient(
            180deg,
            rgb(255 255 255 / 0.015) 0px,
            rgb(255 255 255 / 0.015) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: screen;
    z-index: -2;
}

.init-chatbox-message-body.is-vip::after,
.uk-comment-primary.is-vip::after,
.recent-comment-content.is-vip::after,
.recent-review-content.is-vip::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(
            280px 240px at 15% 20%,
            rgb(0 245 255 / 0.18),
            transparent 60%
        ),
        radial-gradient(
            320px 280px at 85% 25%,
            rgb(255 0 255 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            340px 300px at 40% 85%,
            rgb(139 92 246 / 0.14),
            transparent 65%
        ),
        radial-gradient(
            220px 200px at 90% 90%,
            rgb(255 255 255 / 0.08),
            transparent 60%
        ),
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(0 245 255 / 0.04),
            transparent 80%
        );
    filter: blur(8px);
    opacity: 0.95;
    z-index: -1;
    animation: iueCyberFlow 10s ease-in-out infinite alternate;
}

@keyframes iueCyberFlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-1.5%, 1%, 0) scale(1.03);
    }

    100% {
        transform: translate3d(1.5%, -1%, 0) scale(1.05);
    }
}

.uk-light.is-vip,
.uk-light .init-chatbox-message-body.is-vip,
.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-light .uk-comment-primary.is-vip,
.uk-light .recent-comment-content.is-vip,
.uk-light .recent-review-content.is-vip {
    background:
        linear-gradient(
            145deg,
            rgb(12 14 26 / 0.88),
            rgb(18 22 36 / 0.78)
        );
    border-color: rgb(0 245 255 / 0.1);
    box-shadow:
        0 0 14px rgb(0 245 255 / 0.1),
        0 0 26px rgb(139 92 246 / 0.08),
        inset 0 1px 8px rgb(255 255 255 / 0.03),
        inset 0 -1px 6px rgb(255 255 255 / 0.015);
    color: rgb(255 255 255 / 0.72);
}

.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: rgb(100 225 255);
}

.uk-light .init-chatbox-message-body.is-vip::before,
.uk-light .uk-comment-primary.is-vip::before,
.uk-light .recent-comment-content.is-vip::before,
.uk-light .recent-review-content.is-vip::before {
    background:
        linear-gradient(
            135deg,
            rgb(0 245 255 / 0.05),
            transparent 30%,
            transparent 70%,
            rgb(255 0 255 / 0.05)
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.02),
            transparent 25%
        ),
        repeating-linear-gradient(
            180deg,
            rgb(255 255 255 / 0.01) 0px,
            rgb(255 255 255 / 0.01) 1px,
            transparent 1px,
            transparent 3px
        );
}

.uk-light .init-chatbox-message-body.is-vip::after,
.uk-light .uk-comment-primary.is-vip::after,
.uk-light .recent-comment-content.is-vip::after,
.uk-light .recent-review-content.is-vip::after {
    background:
        radial-gradient(
            300px 260px at 15% 20%,
            rgb(0 245 255 / 0.14),
            transparent 60%
        ),
        radial-gradient(
            340px 300px at 85% 25%,
            rgb(255 0 255 / 0.12),
            transparent 65%
        ),
        radial-gradient(
            360px 320px at 40% 85%,
            rgb(139 92 246 / 0.1),
            transparent 65%
        ),
        radial-gradient(
            240px 220px at 90% 90%,
            rgb(255 255 255 / 0.04),
            transparent 60%
        ),
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(0 245 255 / 0.03),
            transparent 80%
        );
    opacity: 0.82;
}
</style>

Royal Gold VIP Style

Royal Gold tập trung vào cảm giác sang trọng với tông vàng hoàng gia và hiệu ứng ánh kim nhẹ. Đây là kiểu CSS rất hợp cho các website có hệ thống donate hoặc thành viên premium cao cấp.

Ưu điểm của Royal Gold:

  • Tạo cảm giác VIP rõ rệt
  • Dễ phối với giao diện sáng
  • Màu sắc sang trọng nhưng không quá chói
  • Hiệu ứng nổi bật mà vẫn giữ độ tinh tế
<style>
.iue-vip-badge {
    background:
        linear-gradient(
            135deg,
            #fff3b0,
            #ffd86b,
            #ffbf3f,
            #ffe8a3
        );
    background-size: 300% 300%;
    animation: iueRoyalGoldGradient 6s ease infinite;
    border: 1px solid rgb(255 240 180 / 0.35);
    color: #6b4300;
    font-weight: 700;
    text-shadow:
        0 1px 1px rgb(255 255 255 / 0.35),
        0 0 6px rgb(255 215 0 / 0.2);
    box-shadow:
        0 0 10px rgb(255 191 63 / 0.22),
        0 0 24px rgb(255 215 0 / 0.16),
        inset 0 1px 3px rgb(255 255 255 / 0.45),
        inset 0 -1px 2px rgb(180 120 0 / 0.08);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.iue-vip-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 14px rgb(255 191 63 / 0.3),
        0 0 28px rgb(255 215 0 / 0.22),
        inset 0 1px 4px rgb(255 255 255 / 0.5),
        inset 0 -1px 3px rgb(180 120 0 / 0.12);
}

.iue-vip-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(255 255 255 / 0.38),
            transparent 80%
        );
    transform: translateX(-140%);
    animation: iueRoyalGoldShine 5s linear infinite;
}

.iue-vip-badge::after {
    content: "";
    position: absolute;
    inset: -35%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgb(255 255 255 / 0.35),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgb(255 215 0 / 0.24),
            transparent 45%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgb(255 191 63 / 0.18),
            transparent 48%
        );
    filter: blur(10px);
    opacity: 0.9;
    z-index: -1;
}

@keyframes iueRoyalGoldGradient {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes iueRoyalGoldShine {
    100% {
        transform: translateX(140%);
    }
}

.init-chatbox-message-body.is-vip,
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-comment-primary.is-vip,
.recent-comment-content.is-vip,
.recent-review-content.is-vip {
    position: relative;
    background:
        linear-gradient(
            145deg,
            rgb(255 249 229 / 0.92),
            rgb(255 241 196 / 0.82)
        );
    border: 1px solid rgb(255 215 0 / 0.16);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 6px 20px rgb(255 193 7 / 0.08),
        0 0 26px rgb(255 215 0 / 0.06),
        inset 0 1px 10px rgb(255 255 255 / 0.4),
        inset 0 -1px 8px rgb(180 120 0 / 0.04);
    color: #7a5200;
    overflow: hidden;
    isolation: isolate;
}

.init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: #c27b00;
}

.init-chatbox-message-body.is-vip::before,
.uk-comment-primary.is-vip::before,
.recent-comment-content.is-vip::before,
.recent-review-content.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.42),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.2),
            transparent 55%
        ),
        radial-gradient(
            80% 180% at 50% 120%,
            rgb(180 120 0 / 0.06),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.08),
            transparent 30%
        );
    mix-blend-mode: soft-light;
    z-index: -2;
}

.init-chatbox-message-body.is-vip::after,
.uk-comment-primary.is-vip::after,
.recent-comment-content.is-vip::after,
.recent-review-content.is-vip::after {
    content: "";
    position: absolute;
    inset: -18%;
    pointer-events: none;
    background:
        radial-gradient(
            260px 220px at 15% 25%,
            rgb(255 255 255 / 0.3),
            transparent 60%
        ),
        radial-gradient(
            320px 280px at 85% 20%,
            rgb(255 215 0 / 0.18),
            transparent 65%
        ),
        radial-gradient(
            340px 300px at 40% 85%,
            rgb(255 191 63 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            240px 220px at 90% 90%,
            rgb(255 255 255 / 0.16),
            transparent 60%
        ),
        radial-gradient(
            180px 160px at 55% 45%,
            rgb(255 224 130 / 0.14),
            transparent 65%
        );
    filter: blur(6px);
    opacity: 0.95;
    z-index: -1;
    animation: iueRoyalGoldFlow 12s ease-in-out infinite alternate;
}

@keyframes iueRoyalGoldFlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-1.5%, 1%, 0) scale(1.03);
    }

    100% {
        transform: translate3d(1.5%, -1%, 0) scale(1.05);
    }
}

.uk-light.is-vip,
.uk-light .init-chatbox-message-body.is-vip,
.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-light .uk-comment-primary.is-vip,
.uk-light .recent-comment-content.is-vip,
.uk-light .recent-review-content.is-vip {
    background:
        linear-gradient(
            145deg,
            rgb(44 32 12 / 0.72),
            rgb(60 42 14 / 0.62)
        );
    border-color: rgb(255 215 0 / 0.1);
    box-shadow:
        0 8px 22px rgb(0 0 0 / 0.16),
        0 0 28px rgb(255 215 0 / 0.08),
        inset 0 1px 8px rgb(255 255 255 / 0.04),
        inset 0 -1px 6px rgb(255 255 255 / 0.02);
    color: rgb(255 235 180 / 0.76);
}

.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: rgb(255 210 90);
}

.uk-light .init-chatbox-message-body.is-vip::before,
.uk-light .uk-comment-primary.is-vip::before,
.uk-light .recent-comment-content.is-vip::before,
.uk-light .recent-review-content.is-vip::before {
    background:
        radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.06),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.03),
            transparent 55%
        ),
        radial-gradient(
            80% 180% at 50% 120%,
            rgb(0 0 0 / 0.14),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.03),
            transparent 30%
        );
}

.uk-light .init-chatbox-message-body.is-vip::after,
.uk-light .uk-comment-primary.is-vip::after,
.uk-light .recent-comment-content.is-vip::after,
.uk-light .recent-review-content.is-vip::after {
    background:
        radial-gradient(
            280px 240px at 15% 25%,
            rgb(255 255 255 / 0.08),
            transparent 60%
        ),
        radial-gradient(
            340px 300px at 85% 20%,
            rgb(255 215 0 / 0.12),
            transparent 65%
        ),
        radial-gradient(
            360px 320px at 40% 85%,
            rgb(255 191 63 / 0.1),
            transparent 65%
        ),
        radial-gradient(
            260px 240px at 90% 90%,
            rgb(255 255 255 / 0.04),
            transparent 60%
        ),
        radial-gradient(
            200px 180px at 55% 45%,
            rgb(255 224 130 / 0.08),
            transparent 65%
        );
    opacity: 0.8;
}
</style>

Một số lưu ý khi tùy biến VIP CSS trên Init Manga

  • Không nên lạm dụng animation quá mạnh vì có thể làm giảm hiệu năng trên mobile
  • Nên giữ độ tương phản đủ cao để nội dung bình luận dễ đọc
  • Backdrop blur đẹp nhất khi website có background hoặc layer phía sau
  • Có thể kết hợp thêm badge animation để tăng độ nổi bật cho VIP
  • Nên kiểm tra cả light mode và dark mode trước khi áp dụng chính thức

Tổng kết

Việc nâng cấp giao diện VIP không chỉ giúp website manga đẹp hơn mà còn tạo cảm giác giá trị cho người dùng premium. Với các phong cách như Liquid Glass, Aurora, Neon Cyber và Royal Gold, bạn có thể dễ dàng biến hệ thống bình luận và chatbox của Init Manga trở nên nổi bật, hiện đại và chuyên nghiệp hơn rất nhiều.

Tùy theo phong cách website, bạn có thể chọn hiệu ứng nhẹ nhàng, fantasy hoặc cyberpunk để tạo dấu ấn riêng cho cộng đồng của mình.

Series: Hướng dẫn Init Manga , Init Manga toàn tập

Bài Viết Liên Quan

Bình luận

  • Không có bình luận.

Init Toolbox

Nhấn Ctrl + \ trên máy tính, hoặc vuốt sang trái ở bất kỳ đâu trên mobile.

Đăng nhập





Đang tải...

Quên mật khẩu?
Tạo tài khoản mới