|
|
| (۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| <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: 40px 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;
| |
| box-shadow: none;
| |
| z-index: 1; /* افزایش لایه باکس اصلی برای پوشش کامل لبه سایهها */
| |
| }
| |
|
| |
| /* سایه 1: سمت راست (هدایت شده به زیر کادر) */
| |
| .service-box::before {
| |
| content: "";
| |
| position: absolute;
| |
| right: 0;
| |
| bottom: -15px; /* نزدیکتر کردن به لبه پایینی برای پنهان شدن لبه بالا */
| |
| width: 52%;
| |
| height: 20px;
| |
| background: linear-gradient(
| |
| to left,
| |
| rgba(0, 0, 0, 0.38) 0%,
| |
| rgba(0, 0, 0, 0.30) 18%,
| |
| rgba(0, 0, 0, 0.18) 40%,
| |
| rgba(0, 0, 0, 0.08) 62%,
| |
| rgba(0, 0, 0, 0.00) 100%
| |
| );
| |
| filter: blur(12px); /* بلور متناسب جهت عدم نفوذ سایه به بالای لبه پایینی */
| |
| z-index: -1;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| /* سایه 2: سمت چپ (هدایت شده به زیر کادر) */
| |
| .service-box::after {
| |
| content: "";
| |
| 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.30) 18%,
| |
| rgba(0, 0, 0, 0.18) 40%,
| |
| rgba(0, 0, 0, 0.08) 62%,
| |
| rgba(0, 0, 0, 0.00) 100%
| |
| );
| |
| filter: blur(12px); /* بلور متناسب جهت عدم نفوذ سایه به بالای لبه پایینی */
| |
| z-index: -1;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .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> |