الگو:کادر اطلاعاتی: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
<!-- باکس خدمات چاپ متین - | <!-- باکس خدمات چاپ متین - با سایه اختصاصی گوشهدار --> | ||
<div class="matin-info-box"> | <div class="matin-info-box"> | ||
<h2 class="matin-title">چاپ بنر در چاپ متین</h2> | <h2 class="matin-title">چاپ بنر در چاپ متین</h2> | ||
| خط ۲۰: | خط ۲۰: | ||
padding: 30px 40px; | padding: 30px 40px; | ||
/* | /* تنظیمات گوشه و کادر */ | ||
border-radius: 8px; | border-radius: 8px; | ||
border-top: 5px solid #8b1e1e; | border-top: 5px solid #8b1e1e; | ||
border-left: 1px solid #e5e7eb; | border-left: 1px solid #e5e7eb; | ||
| خط ۲۹: | خط ۲۷: | ||
border-bottom: 1px solid #e5e7eb; | border-bottom: 1px solid #e5e7eb; | ||
/* سایه | /* این مورد برای قرارگیری سایهها ضروری است */ | ||
box-shadow: 0 15px | position: relative; | ||
z-index: 1; | |||
/* | } | ||
/* ایجاد سایه اختصاصی در گوشهها */ | |||
.matin-info-box::before, | |||
.matin-info-box::after { | |||
content: ""; | |||
position: absolute; | |||
bottom: 15px; | |||
z-index: -1; /* سایه پشت باکس قرار میگیرد */ | |||
width: 45%; | |||
height: 10px; | |||
/* سایه غلیظ و تیره */ | |||
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.6); | |||
} | |||
.matin-info-box::before { | |||
left: 10px; | |||
transform: rotate(-3deg); /* شیب سمت چپ */ | |||
} | |||
.matin-info-box::after { | |||
right: 10px; | |||
transform: rotate(3deg); /* شیب سمت راست */ | |||
} | } | ||
| خط ۶۱: | خط ۸۰: | ||
padding: 20px; | padding: 20px; | ||
margin: 20px 15px; | margin: 20px 15px; | ||
} | } | ||
} | } | ||