فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>


<!-- باکس خدمات چاپ متین - نسخه نهایی با سایه دقیق (بدون سایه در وسط) -->
<!-- باکس خدمات چاپ متین - با سایه‌های هدایت شده به زیر کادر -->
<div class="matin-info-box">
<div class="service-box">
    <h2 class="matin-title">چاپ بنر در چاپ متین</h2>
  <h2 class="service-title">چاپ بنر در چاپ متین</h2>
    <div class="matin-body">
  <div class="service-content">
        <p>
    <p>
            هنگامی که شما از <strong>چاپ متین</strong> بازدید می‌کنید، لازم نیست نگران از کیفیت بنر و یا <strong>چاپ سررسید اختصاصی</strong> خود باشید. اگر قبلاً بنر خود را طراحی کرده‌اید، به سادگی فایل‌های آماده خود را بر روی سایت ما آپلود کنید. بعد از اینکه سفارش خود را ارسال کردید، فایل‌های شما را بررسی می‌کنیم تا اطمینان حاصل شود که فایل‌ها دارای شرایط درست و دقیق هستند و ما در نهایت برای شما تأیید <strong>چاپ روی بنر</strong> را ارسال خواهیم کرد.
      هنگامی که شما از <strong>چاپ متین</strong> بازدید می‌کنید، لازم نیست نگران از کیفیت بنر و یا  
        </p>
      <strong>چاپ سررسید اختصاصی</strong> خود باشید. اگر قبلاً بنر خود را طراحی کرده‌اید، به سادگی فایل‌های آماده خود را  
    </div>
      بر روی سایت ما آپلود کنید. بعد از اینکه سفارش خود را ارسال کردید، فایل‌های شما را بررسی می‌کنیم تا اطمینان حاصل شود  
      که فایل‌ها دارای شرایط درست و دقیق هستند و ما در نهایت برای شما تأیید <strong>چاپ روی بنر</strong> را ارسال خواهیم کرد.
    </p>
  </div>
</div>
</div>


<style>
<style>
.matin-info-box {
.service-box {
    direction: rtl;
  position: relative;
    font-family: 'IRANSans', Tahoma, Arial, sans-serif;
  direction: rtl;
    background-color: #ffffff;
  background: #ffffff;
    max-width: 950px;
  max-width: 950px;
    margin: 40px auto;
  margin: 40px auto;
    padding: 30px 40px;
  padding: 28px 38px;
    position: relative; /* برای قرارگیری سایه‌ها */
  border-top: 3px solid #8b1e1e;
   
  border-left: 1px solid #e5e7eb;
    /* استایل اصلی باکس */
  border-right: 1px solid #e5e7eb;
    border: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
    border-top: 3px solid #8b1e1e; /* نوار زرشکی بالا */
  border-radius: 0;
    border-radius: 0; /* تیز بودن گوشه‌ها مشابه تصویر */
  box-shadow: none;
   
  z-index: 1; /* افزایش لایه باکس اصلی برای پوشش کامل لبه سایه‌ها */
    /* حذف سایه پیش‌فرض */
    box-shadow: none !important;
}
}


/* ایجاد سایه اختصاصی (تیره‌تر در گوشه‌ها، بدون سایه در وسط) */
/* سایه 1: سمت راست (هدایت شده به زیر کادر) */
.matin-info-box::before,
.service-box::before {
.matin-info-box::after {
  content: "";
    content: "";
  position: absolute;
    position: absolute;
  right: 0;
    bottom: -15px; /* تنظیم فاصله از پایین */
  bottom: -15px; /* نزدیک‌تر کردن به لبه پایینی برای پنهان شدن لبه بالا */
    z-index: -1;
  width: 52%;
    width: 45%; /* پوشش حدود نیمی از عرض هر طرف */
  height: 20px;
    height: 20px;
  background: linear-gradient(
    background: rgba(0, 0, 0, 0.35); /* تیرگی بیشتر */
    to left,
    filter: blur(15px); /* پخش‌شدگی نرم */
    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;
}
}


.matin-info-box::before {
/* سایه 2: سمت چپ (هدایت شده به زیر کادر) */
     left: 10px; /* سایه چپ */
.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;
}
}


.matin-info-box::after {
.service-title {
    right: 10px; /* سایه راست */
  margin: 0 0 22px 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}
}


.matin-title {
.service-content p {
    font-size: 1.5rem;
  margin: 0;
    color: #333;
  text-align: justify;
    text-align: center;
  font-size: 1.05rem;
    margin: 0 0 25px 0;
  line-height: 2;
    font-weight: 700;
  color: #374151;
}
}


.matin-body p {
.service-content strong {
    font-size: 1.05rem;
  color: #8b1e1e;
    line-height: 2;
  font-weight: 700;
    color: #374151;
    text-align: justify;
    margin: 0;
}
}


.matin-body strong {
    color: #8b1e1e;
    font-weight: 700;
}
/* ریسپانسیو */
@media (max-width: 600px) {
@media (max-width: 600px) {
    .matin-info-box {
  .service-box {
        padding: 20px;
    margin: 20px 15px;
        margin: 20px 15px;
    padding: 20px;
    }
  }
}
}
</style>
</style>


</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کادر_اطلاعاتی»