🎨 نقشه راه کدهای فان CSS: یک نگاه سریع

با ما همراه شو تا دنیای کدها رو باحال‌تر کنیم! اگر سوالی داشتی، همین حالا تماس بگیر: 09202232789

آماده‌ایم تا وب‌سایتمون رو از حالت “معمولی” به “خاص” تبدیل کنیم! 🚀

فهرست مطالب: راهنمای گام‌به‌گام جادوگری با CSS

• ✍️ افکت تایپ‌کردن متن (Typewriter Effect)
• 🔘 دکمه‌های سه‌بعدی و جذاب
• 👾 افکت گلیچ (Glitch Effect)
• 🃏 کارت‌های فلیپ (Flip Cards)
• ⏳ انیمیشن‌های لودینگ خلاقانه
• 🖼️ افکت پارالاکس (Parallax Effect)
• 🎨 شکل‌های بلاب (Blob Shapes)
• 🗂️ آکاردئون با CSS خالص
• ⚠️ عیب‌یابی سریع: مشکلات رایج و راه‌حل‌ها
• ❓ سوالات متداول (FAQ)

چطور کار می‌کنه؟

این افکت معمولاً با ترکیب دو انیمیشن CSS ساخته میشه: یکی برای ظاهر شدن تدریجی متن (مثل پاک کردن) و دیگری برای شبیه‌سازی کرسر چشمک‌زن (Blinking Cursor). تو کد زیر، با استفاده از @keyframes این دو بخش رو کنترل می‌کنیم.

این کد رو کپی کن و به فایل HTML خودت اضافه کن:

<div class="container">
  <h1 class="typewriter">به دنیای جادویی CSS خوش اومدی!</h1>
</div>
    

این کد رو کپی کن و به فایل CSS خودت اضافه کن:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px; /* برای نمایش بهتر افکت */
    background-color: #f0f0f0;
}

.typewriter {
    overflow: hidden; /* پنهان کردن متن اضافی */
    border-right: .15em solid orange; /* کرسر چشمک‌زن */
    white-space: nowrap; /* جلوگیری از شکستن خط */
    margin: 0 auto; /* مرکز قرار گرفتن */
    letter-spacing: .15em; /* فاصله بین حروف */
    animation:
        typing 3.5s steps(30, end),
        blink-caret .75s step-end infinite;
    font-family: monospace;
    font-size: 2.5em;
    color: #333;
}

/* انیمیشن تایپ‌کردن */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* انیمیشن کرسر چشمک‌زن */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
}
    

نکات و شخصی‌سازی:

• `steps()`: این تابع مشخص می‌کنه که انیمیشن چطور پیش بره. عدد اول تعداد “گام‌ها” یا همون حروف رو مشخص می‌کنه. اگر متنت کوتاهه، این عدد رو کم کن.
• `animation-duration`: مدت زمان `typing` رو با طول متنت تنظیم کن تا طبیعی‌تر به نظر برسه.
• `border-color`: رنگ کرسر چشمک‌زن رو عوض کن تا با تم سایتت جور دربیاد.
• برای محتواهای متنوع‌تر می‌تونی از جاوااسکریپت برای کنترل متن در حال تایپ استفاده کنی، اما برای افکت‌های ساده، CSS خالص بهترینه.

کد HTML دکمه رو اینجا ببین:

<button class="pushable-btn">
  <span class="front">کلیک کن!</span>
</button>
    

این کد CSS رو به استایل‌شیتت اضافه کن:

.pushable-btn {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.front {
    display: block;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25em;
    background: hsl(180deg 100% 40%);
    color: white;
    transform: translateY(-6px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable-btn:active .front {
    transform: translateY(-2px);
    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable-btn:hover .front {
    transform: translateY(-8px);
    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable-btn:focus:not(:focus-visible) {
    outline: none;
}
    

چطور این دکمه کار میکنه؟

برای ساخت این دکمه سه‌بعدی، ما از دو لایه استفاده می‌کنیم: یک لایه زیرین که نقش “سایه” یا “عمق” دکمه رو داره (که در اینجا با `background` و `transform` زیرین شبیه‌سازی میشه) و یک لایه جلویی (`.front`) که متن دکمه رو نشون میده. وقتی کاربر روی دکمه هاور می‌کنه یا کلیک می‌کنه، لایه جلویی کمی جابجا میشه و این توهم رو ایجاد می‌کنه که دکمه داره فشرده میشه. با `transition` هم حرکت رو نرم‌تر می‌کنیم. این روش باعث میشه حس اصطحکاک و فشار واقعی به کاربر منتقل بشه.

برای دسترسی به مجموعه‌ای کامل‌تر از کدهای آماده و اسنیپت‌های CSS، می‌تونی سری به بخش کدهای آماده و اسنیپت توی وب‌سایت fa-tools.ir بزنی.

کد HTML مربوط به متن گلیچ:

<h1 class="glitch" data-text="GLITCH">GLITCH</h1>
    

کد CSS برای افکت گلیچ:

.glitch {
    position: relative;
    color: #fff;
    font-size: 4em;
    font-weight: bold;
    text-shadow:
        0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
        0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    animation: glitch 500ms infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333; /* رنگ پس‌زمینه برای جلوه بهتر */
}

.glitch::before {
    left: -2px;
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75);
    animation: glitch-left 1s infinite;
}

.glitch::after {
    left: 2px;
    text-shadow: -0.05em 0 0 rgba(0, 255, 0, 0.75);
    animation: glitch-right 1s infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    to {
        transform: translate(0);
    }
}

@keyframes glitch-left {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(2px, -2px);
    }
    40% {
        transform: translate(-2px, 2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(-2px, -2px);
    }
    to {
        transform: translate(0);
    }
}

@keyframes glitch-right {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(2px, -2px);
    }
    60% {
        transform: translate(-2px, -2px);
    }
    80% {
        transform: translate(2px, 2px);
    }
    to {
        transform: translate(0);
    }
}
    

چند نکته برای افکت گلیچ:

• `data-text`: این ویژگی برای تکرار متن در `::before` و `::after` استفاده میشه تا اون لایه‌های رنگی زیرین رو بسازه.
• `text-shadow`: این ویژگی سایه‌های رنگی رو ایجاد می‌کنه که حس گلیچ رو تقویت می‌کنه. می‌تونی رنگ‌ها و آفست‌ها رو تغییر بدی.
• `animation`: با تغییر مقادیر زمان (مثلاً `500ms` یا `1s`) و تابع‌های زمانی (مثلاً `linear` یا `ease-in-out`) می‌تونی سرعت و شدت گلیچ رو کنترل کنی.
• استفاده از این افکت در جای مناسب و با اعتدال می‌تونه تأثیرگذاری زیادی داشته باشه. افراط در اون ممکنه کاربر رو خسته کنه.

ساختار HTML برای یک کارت فلیپ:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h2>جلو کارت</h2>
      <p>اطلاعات اولیه</p>
    </div>
    <div class="flip-card-back">
      <h2>پشت کارت</h2>
      <p>اطلاعات تکمیلی و جذاب!</p>
    </div>
  </div>
</div>
    

کد CSS برای کارت فلیپ:

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* این خط باعث افکت سه‌بعدی میشه */
    margin: 20px auto; /* برای مرکز قرار گرفتن */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* پنهان کردن پشت هنگام چرخش */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

.flip-card-front {
    background-color: #28a745;
    color: white;
}

.flip-card-back {
    background-color: #007bff;
    color: white;
    transform: rotateY(180deg);
}
    

چند نکته مهم:

• `perspective`: این ویژگی روی عنصر والد (`.flip-card`) اعمال میشه و عمق سه‌بعدی رو ایجاد می‌کنه.
• `transform-style: preserve-3d`: این ویژگی روی عنصر داخلی (`.flip-card-inner`) اعمال میشه و تضمین می‌کنه که فرزندانش هم در فضای سه‌بعدی قرار بگیرن.
• `backface-visibility: hidden`: این ویژگی باعث میشه سمت پشت کارت وقتی چرخش می‌کنه، دیده نشه.
• می‌تونی به جای `hover` از جاوااسکریپت برای فعال‌سازی `transform` استفاده کنی تا با کلیک هم کار کنه.

این کد HTML رو اضافه کن:

<div class="loader-container">
  <div class="loader"></div>
</div>
    

کد CSS برای لودر:

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* تمام صفحه رو پوشش بده */
    background-color: #f0f2f5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
    

چند نکته برای شخصی‌سازی لودر:

• `border-top`: با تغییر رنگ این ویژگی می‌تونی رنگ متحرک لودر رو عوض کنی.
• `width` و `height`: اندازه لودر رو تغییر میده.
• `animation-duration`: با تغییر `2s` می‌تونی سرعت چرخش رو کم یا زیاد کنی.
• می‌تونی به جای دایره، شکل‌های دیگه رو هم با `border-radius` و `transform` به حرکت دربیاری. خلاق باش!

این کد HTML رو به ساختار صفحه اضافه کن:

<div class="parallax-container">
  <div class="parallax-section">
    <h2>بخش اول</h2>
    <p>متن جذاب در بخش اول با پس‌زمینه ثابت</p>
  </div>
  <div class="normal-section">
    <h2>محتوای معمولی</h2>
    <p>اینجا محتوای عادی سایت قرار می‌گیره که روی پس‌زمینه اسکرول میشه.</p>
  </div>
  <div class="parallax-section bg-2">
    <h2>بخش دوم</h2>
    <p>با یه پس‌زمینه پارالاکس دیگه</p>
  </div>
</div>
    

کد CSS برای افکت پارالاکس:

.parallax-container {
    height: 100vh; /* برای دیدن بهتر افکت */
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px; /* پایه برای افکت پارالاکس */
    font-family: 'Vazirmatn', sans-serif, Arial;
}

.parallax-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2em;
    text-align: center;
    transform-style: preserve-3d;
}

.parallax-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('https://via.placeholder.com/1500/007bff/ffffff?text=Background1'); /* تصویر پس‌زمینه شما */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* کلید اصلی افکت پارالاکس */
    transform: translateZ(-1px) scale(2); /* برای شبیه‌سازی حرکت متفاوت */
    z-index: -1;
}

.normal-section {
    height: 80vh;
    background-color: #f8f8f8;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    padding: 50px;
    box-sizing: border-box;
    text-align: center;
}

/* برای پس‌زمینه دوم */
.parallax-section.bg-2::before {
    background-image: url('https://via.placeholder.com/1500/28a745/ffffff?text=Background2');
}
    

ملاحظات پارالاکس:

• `perspective`: این ویژگی روی عنصر والد اسکرول‌شونده قرار می‌گیره (اینجا `parallax-container`).
• `transform: translateZ(-1px) scale(2)`: این ترفند جادویی باعث میشه عنصر پس‌زمینه دورتر به نظر برسه (با `translateZ`) و بعد بزرگتر بشه (با `scale`) تا فضای خالی رو پر کنه. این ترکیب، حرکت کندتر رو هنگام اسکرول ایجاد می‌کنه.
• تصاویر پس‌زمینه: حتماً از تصاویر با کیفیت و مناسب برای پس‌زمینه استفاده کن تا افکت جذاب‌تر بشه.
• مواظب باش که افکت پارالاکس زیاد باعث کندی عملکرد سایت روی دستگاه‌های ضعیف نشه. همیشه تست عملکرد رو فراموش نکن.

ساختار HTML برای بلاب:

<div class="blob-container">
  <div class="blob"></div>
</div>
    

کد CSS برای بلاب:

.blob-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: #f8f8f8;
    margin: 30px 0;
    overflow: hidden;
}

.blob {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #FF6B6B, #FFD166);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 8s ease-in-out infinite both alternate;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

@keyframes morph {
    0% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: rotate(0deg);
    }
    50% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: rotate(360deg);
    }
}
    

نکات بلاب‌سازی:

• `border-radius`: اینجاست که جادو اتفاق میفته! با دادن چهار مقدار برای هر گوشه و بعد از `/` چهار مقدار برای هر طرف، می‌تونی شکل‌های نامنظم و ارگانیک بسازی.
• `@keyframes morph`: در این انیمیشن، ما مقادیر `border-radius` و `transform` رو در طول زمان تغییر میدیم تا بلاب حرکت و تغییر شکل داشته باشه.
• می‌تونی از ابزارهای آنلاین تولید بلاب استفاده کنی که مقادیر `border-radius` رو برات ایجاد می‌کنن. فقط کافیه “CSS blob generator” رو سرچ کنی.
• برای ایجاد بلاب‌های پیچیده‌تر، SVG هم گزینه خوبیه، اما برای سادگی و کارایی، CSS تنها کافیه.

این کد HTML رو به صفحه اضافه کن:

<div class="accordion">
  <input type="checkbox" id="question1" class="accordion-toggle">
  <label for="question1" class="accordion-header">سوال اول: CSS چیست؟</label>
  <div class="accordion-content">
    <p>CSS (Cascading Style Sheets) زبانی برای استایل‌دهی و زیباسازی صفحات وب است.</p>
  </div>

  <input type="checkbox" id="question2" class="accordion-toggle">
  <label for="question2" class="accordion-header">سوال دوم: کاربرد اصلی CSS چیست؟</label>
  <div class="accordion-content">
    <p>CSS برای کنترل رنگ‌ها، فونت‌ها، چیدمان و سایر جنبه‌های ظاهری صفحات HTML استفاده می‌شود.</p>
  </div>
</div>
    

کد CSS برای آکاردئون:

.accordion {
    width: 80%;
    max-width: 700px;
    margin: 30px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-toggle {
    display: none; /* پنهان کردن checkbox اصلی */
}

.accordion-header {
    background-color: #f2f2f2;
    color: #333;
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    position: relative;
    transition: background-color 0.3s ease;
}

.accordion-header::after {
    content: '+';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    transition: transform 0.3s ease;
}

.accordion-header:hover {
    background-color: #e9e9e9;
}

.accordion-content {
    background-color: #fff;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    border-bottom: 1px solid #eee;
}

.accordion-content p {
    margin: 15px 0;
    line-height: 1.7;
    color: #555;
}

/* وقتی checkbox تیک خورده باشه */
.accordion-toggle:checked + .accordion-header {
    background-color: #e0f7fa;
    color: #00838F;
}

.accordion-toggle:checked + .accordion-header::after {
    content: '-';
    transform: translateY(-50%) rotate(0deg); /* برای علامت منفی */
}

.accordion-toggle:checked + .accordion-header + .accordion-content {
    max-height: 200px; /* این مقدار باید بزرگتر از ارتفاع محتوا باشد */
    padding: 15px 20px;
}
    

ترفند این آکاردئون:

• `input[type=”checkbox”] + label`: با استفاده از این انتخابگر و خاصیت `+` (Adjacent Sibling Combinator)، می‌تونیم وقتی `checkbox` تیک می‌خوره، استایل `label` مربوط به خودش رو تغییر بدیم.
• `label + div`: بازم از همین ترفند استفاده می‌کنیم تا وقتی `label` (که حالا فعال شده) رو کلیک می‌کنیم، `div` بعدی (که محتوای آکاردئون هست) باز بشه.
• `max-height`: برای باز و بسته شدن نرم محتوا، از `max-height: 0` برای حالت بسته و یه مقدار بزرگتر (مثل `200px` یا بیشتر) برای حالت باز استفاده می‌کنیم. این مقدار باید به اندازه کافی بزرگ باشه که تمام محتوات رو نشون بده.
• مهمترین نکته اینه که هر `input` و `label` باید `id` و `for` یکسان و منحصربه‌فرد داشته باشن.

جدول مقایسه‌ای: انتخاب افکت مناسب

1. انیمیشن‌ها اجرا نمیشن یا کند هستن

• راه‌حل:
  • مطمئن شو که `animation` و `@keyframes` رو درست تعریف کردی و اسمشون هم یکیه.
  • برای افزایش کارایی، از `transform` و `opacity` برای انیمیشن‌ها استفاده کن، نه `width`/`height` یا `margin`/`padding`. این خواص باعث رندرینگ مجدد صفحه میشن و کندی ایجاد می‌کنن.
  • توی مرورگر Chrome، از ابزارهای توسعه‌دهنده (Developer Tools) قسمت Performance رو چک کن تا Bottleneck رو پیدا کنی.
  • اگه از ترنزیشن‌های طولانی استفاده می‌کنی، امتحان کن که آیا `transition-timing-function` مناسبی انتخاب کردی یا نه.

2. افکت‌های سه‌بعدی خوب دیده نمیشن یا خرابن

• راه‌حل:
  • خاصیت `perspective` رو روی عنصر والد (Container) تنظیم کن. این ویژگی به مرورگر میگه که چطور عناصر رو در فضای سه‌بعدی رندر کنه.
  • `transform-style: preserve-3d` رو به عنصری که قراره در فضای سه‌بعدی حرکت کنه (مثل `.flip-card-inner`) اضافه کن.
  • از `backface-visibility: hidden` برای پنهان کردن پشت عناصر وقتی چرخش می‌کنن، استفاده کن.
  • بعضی از مرورگرها نیاز به پیشوند vendor مثل `-webkit-` دارن. اگه مشکل داشتی، اون‌ها رو اضافه کن.

3. کدهای CSS با هم تداخل دارن

• راه‌حل:
  • از انتخابگرهای (Selectors) خاص‌تر استفاده کن تا مطمئن بشی فقط عنصر مورد نظر رو هدف قرار دادی.
  • `!important` رو تا حد امکان استفاده نکن، چون باعث میشه مدیریت CSSت خیلی سخت بشه.
  • ترتیب نوشتن CSS هم مهمه؛ کدی که آخر میاد، ممکنه کد قبلی رو override کنه.
  • برای پروژه‌های بزرگ، از روش‌هایی مثل BEM (Block-Element-Modifier) یا ماژولار کردن CSS استفاده کن.

4. Responsive نبودن در موبایل و تبلت

• راه‌حل:
  • همیشه با <meta name="viewport" content="width=device-width, initial-scale=1.0"> توی HTML شروع کن.
  • از Media Queries (@media) برای تنظیم استایل‌ها بر اساس اندازه صفحه استفاده کن.
  • برای ابعاد، به جای `px` از واحد‌های نسبی مثل `em`, `rem`, `vh`, `vw`, `%` استفاده کن.
  • سعی کن از روش Mobile-First (اول برای موبایل طراحی کن بعد برای دسکتاپ) استفاده کنی.

⚡ در یک نگاه: جادوی مدرن CSS

اگر زمان کافی برای خواندن کل مقاله را ندارید، این سه ترفند اصلی را به خاطر بسپارید:

📂 فهرست مطالب این مقاله

• چرا باید از کدهای فان و خلاقانه CSS استفاده کنیم؟
• ۱۰ کد فوق‌العاده جالب و کاربردی CSS
  • ۱. افکت متن نئونی درخشان
  • ۲. دکمه با افکت مایع و ژله‌ای
  • ۳. حالت شب و روز جادویی بدون نیاز به جاوااسکریپت
  • ۴. افکت تایپ‌نویسنده پویا
  • ۵. افکت شیشه مات پیشرفته (Glassmorphism)
• جدول مقایسه: CSS خالص در مقابل روش‌های قدیمی
• چگونه این کدها را در وب‌سایت خود پیاده‌سازی کنیم؟
• عیب‌یابی سریع (Troubleshooting) کدهای CSS
• سوالات متداول کاربران

🛠 عیب‌یابی مشکلات رایج اجرای کدها

گاهی اوقات ممکن است کدها پس از قرار گرفتن در وب‌سایت شما آنطور که انتظار می‌رود عمل نکنند. در این صورت بررسی چک‌لیست زیر مشکل شما را حل خواهد کرد:

• کش شدن مرورگر: حتماً پس از ذخیره کردن کدها، کش مرورگر خود را با فشردن کلیدهای ترکیبی Ctrl + F5 کاملاً پاک کنید.
• تداخل اولویت‌ها: اگر ویژگی خاصی بر روی المان شما اعمال نمی‌شود، از سلکتورهای قوی‌تر استفاده کنید یا به طور موقت به ویژگی استایل، شناسه !important بدهید.
• پشتیبانی از پیشوندها: برای ویژگی‌هایی مثل backdrop-filter، حتما پیشوندهایی مانند -webkit- را اعمال کنید تا در مرورگر سافاری آیفون به خوبی رندر شود.