الگو:کادر اطلاعاتی: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

دیداریویکی‌متن

@@ خط ۱: / خط ۱: @@
 <html>
-<!-- باکس خدمات چاپ متین - با سایه‌های هدایت شده به زیر کادر -->
+<!-- باکس خدمات با اصلاح قطعی نفوذ سایه به داخل کادر -->
 <div class="service-box">
    <h2 class="service-title">چاپ بنر در چاپ متین</h2>
@@ خط ۱۸: / خط ۱۸: @@
    position: relative;
    direction: rtl;
-   background: #ffffff;
+   background: #ffffff; /* رنگ کاملاً سفید بدون نفوذ سایه */
    max-width: 950px;
-   margin: 40px auto;
+   margin: 50px auto;
    padding: 28px 38px;
    border-top: 3px solid #8b1e1e;
@@ خط ۲۷: / خط ۲۷: @@
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
+  /* ایجاد لایه‌بندی برای اطمینان از قرارگیری روی سایه‌ها */
+  z-index: 2;
    box-shadow: none;
-  z-index: 1; /* افزایش لایه باکس اصلی برای پوشش کامل لبه سایه‌ها */
 }
-/* سایه 1: سمت راست (هدایت شده به زیر کادر) */
+/* استایل مشترک برای هر دو سایه */
-.service-box::before {
+.service-box::before,
+.service-box::after {
    content: "";
    position: absolute;
-   right: 0;
+   /* سایه کمی پایین‌تر از لبه شروع می‌شود تا به داخل کادر نفوذ نکند */
-   bottom: -15px; /* نزدیک‌تر کردن به لبه پایینی برای پنهان شدن لبه بالا */
+  bottom: -12px;
-   width: 52%;
+  width: 48%;
-   height: 20px;
+  height: 25px;
+   z-index: -1; /* فرستادن به پشت باکس اصلی */
+  filter: blur(14px);
+  pointer-events: none;
+  /* جلوگیری از پخش شدن سایه به سمت بالا */
+   clip-path: inset(0px -50px -50px -50px);
+}
+/* سایه 1: سمت راست (پررنگ در راست، محو در مرکز) */
+.service-box::before {
+   right: 5px;
    background: linear-gradient(
      to left,
-     rgba(0, 0, 0, 0.38) 0%,
+     rgba(0, 0, 0, 0.45) 0%,
-     rgba(0, 0, 0, 0.30) 18%,
+     rgba(0, 0, 0, 0.25) 40%,
-    rgba(0, 0, 0, 0.18) 40%,
+     rgba(0, 0, 0, 0) 100%
-     rgba(0, 0, 0, 0.08) 62%,
-    rgba(0, 0, 0, 0.00) 100%
    );
-  filter: blur(12px); /* بلور متناسب جهت عدم نفوذ سایه به بالای لبه پایینی */
-  z-index: -1;
-  pointer-events: none;
 }
-/* سایه 2: سمت چپ (هدایت شده به زیر کادر) */
+/* سایه 2: سمت چپ (پررنگ در چپ، محو در مرکز) */
 .service-box::after {
-  content: "";
+   left: 5px;
-  position: absolute;
-   left: 0;
-  bottom: -15px; /* نزدیک‌تر کردن به لبه پایینی برای پنهان شدن لبه بالا */
-  width: 52%;
-  height: 20px;
    background: linear-gradient(
      to right,
-     rgba(0, 0, 0, 0.38) 0%,
+     rgba(0, 0, 0, 0.45) 0%,
-     rgba(0, 0, 0, 0.30) 18%,
+     rgba(0, 0, 0, 0.25) 40%,
-    rgba(0, 0, 0, 0.18) 40%,
+     rgba(0, 0, 0, 0) 100%
-     rgba(0, 0, 0, 0.08) 62%,
-    rgba(0, 0, 0, 0.00) 100%
    );
-  filter: blur(12px); /* بلور متناسب جهت عدم نفوذ سایه به بالای لبه پایینی */
-  z-index: -1;
-  pointer-events: none;
 }
@@ خط ۱۰۱: / خط ۹۹: @@
 }
 </style>
 </html>