|
|
| (۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| <html> | | <html> |
| | | <div class="nikan-box"> |
| <!-- باکس خدمات با اصلاح قطعی نفوذ سایه به داخل کادر -->
| | <!-- متن خود را اینجا وارد کنید --> |
| <div class="service-box"> | | <p>هنگامی که شما از چاپ متین بازدید میکنید، لازم نیست نگران از کیفیت بنر و یا چاپ سررسید اختصاصی خود باشید...</p> |
| <h2 class="service-title">چاپ بنر در چاپ متین</h2>
| |
| <div class="service-content">
| |
| <p> | |
| هنگامی که شما از <strong>چاپ متین</strong> بازدید میکنید، لازم نیست نگران از کیفیت بنر و یا
| |
| <strong>چاپ سررسید اختصاصی</strong> خود باشید. اگر قبلاً بنر خود را طراحی کردهاید، به سادگی فایلهای آماده خود را
| |
| بر روی سایت ما آپلود کنید. بعد از اینکه سفارش خود را ارسال کردید، فایلهای شما را بررسی میکنیم تا اطمینان حاصل شود
| |
| که فایلها دارای شرایط درست و دقیق هستند و ما در نهایت برای شما تأیید <strong>چاپ روی بنر</strong> را ارسال خواهیم کرد.
| |
| </p>
| |
| </div>
| |
| </div> | | </div> |
|
| |
| <style>
| |
| .service-box {
| |
| position: relative;
| |
| direction: rtl;
| |
| background: #ffffff; /* رنگ کاملاً سفید بدون نفوذ سایه */
| |
| max-width: 950px;
| |
| margin: 50px auto;
| |
| padding: 28px 38px;
| |
| border-top: 3px solid #8b1e1e;
| |
| border-left: 1px solid #e5e7eb;
| |
| border-right: 1px solid #e5e7eb;
| |
| border-bottom: 1px solid #e5e7eb;
| |
| border-radius: 0;
| |
|
| |
| /* ایجاد لایهبندی برای اطمینان از قرارگیری روی سایهها */
| |
| z-index: 2;
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /* استایل مشترک برای هر دو سایه */
| |
| .service-box::before,
| |
| .service-box::after {
| |
| content: "";
| |
| position: absolute;
| |
| /* سایه کمی پایینتر از لبه شروع میشود تا به داخل کادر نفوذ نکند */
| |
| bottom: -12px;
| |
| width: 48%;
| |
| 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.45) 0%,
| |
| rgba(0, 0, 0, 0.25) 40%,
| |
| rgba(0, 0, 0, 0) 100%
| |
| );
| |
| }
| |
|
| |
| /* سایه 2: سمت چپ (پررنگ در چپ، محو در مرکز) */
| |
| .service-box::after {
| |
| left: 5px;
| |
| background: linear-gradient(
| |
| to right,
| |
| rgba(0, 0, 0, 0.45) 0%,
| |
| rgba(0, 0, 0, 0.25) 40%,
| |
| rgba(0, 0, 0, 0) 100%
| |
| );
| |
| }
| |
|
| |
| .service-title {
| |
| margin: 0 0 22px 0;
| |
| text-align: center;
| |
| font-size: 1.5rem;
| |
| font-weight: 700;
| |
| color: #333;
| |
| }
| |
|
| |
| .service-content p {
| |
| margin: 0;
| |
| text-align: justify;
| |
| font-size: 1.05rem;
| |
| line-height: 2;
| |
| color: #374151;
| |
| }
| |
|
| |
| .service-content strong {
| |
| color: #8b1e1e;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| @media (max-width: 600px) {
| |
| .service-box {
| |
| margin: 20px 15px;
| |
| padding: 20px;
| |
| }
| |
| }
| |
| </style>
| |
|
| |
|
| </html> | | </html> |
هنگامی که شما از چاپ متین بازدید میکنید، لازم نیست نگران از کیفیت بنر و یا چاپ سررسید اختصاصی خود باشید...