الگو:کادر اطلاعاتی: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
<!-- باکس خدمات | <!-- باکس خدمات - سایه هدایت شده به سمت بالا --> | ||
<div class="service-box"> | <div class="service-box"> | ||
<h2 class="service-title">چاپ بنر در چاپ متین</h2> | <h2 class="service-title">چاپ بنر در چاپ متین</h2> | ||
| خط ۱۸: | خط ۱۸: | ||
position: relative; | position: relative; | ||
direction: rtl; | direction: rtl; | ||
background: #ffffff; | background: #ffffff; | ||
max-width: 950px; | max-width: 950px; | ||
margin: 50px auto; | margin: 50px auto; | ||
padding: | padding: 30px 40px; | ||
border-top: | border-top: 4px solid #8b1e1e; | ||
border-left: 1px solid #e5e7eb; | border-left: 1px solid #e5e7eb; | ||
border-right: 1px solid #e5e7eb; | border-right: 1px solid #e5e7eb; | ||
border-bottom: | border-bottom: none; | ||
border-radius: | border-radius: 12px; | ||
z-index: 2; | z-index: 2; | ||
} | } | ||
.service-box::before, | .service-box::before, | ||
.service-box::after { | .service-box::after { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
/* سایه | /* تغییر در اینجا: سایه ۵ پیکسل بالاتر رفت */ | ||
bottom: - | bottom: -5px; | ||
width: | width: 45%; | ||
height: 25px; | height: 25px; | ||
z-index: -1; | z-index: -1; | ||
filter: blur(14px); | filter: blur(14px); | ||
pointer-events: none; | pointer-events: none; | ||
/* | /* لبه بالایی سایه را کات میکند تا نفوذ به داخل کادر صفر شود */ | ||
clip-path: inset(0px -50px -50px -50px); | clip-path: inset(0px -50px -50px -50px); | ||
} | } | ||
.service-box::before { | .service-box::before { | ||
right: | right: 15px; | ||
background: linear-gradient( | background: linear-gradient( | ||
to left, | to left, | ||
rgba(0, 0, 0, 0. | rgba(0, 0, 0, 0.40) 0%, | ||
rgba(0, 0, 0, 0. | rgba(0, 0, 0, 0.20) 40%, | ||
rgba(0, 0, 0, 0) 100% | rgba(0, 0, 0, 0) 100% | ||
); | ); | ||
} | } | ||
.service-box::after { | .service-box::after { | ||
left: | left: 15px; | ||
background: linear-gradient( | background: linear-gradient( | ||
to right, | to right, | ||
rgba(0, 0, 0, 0. | rgba(0, 0, 0, 0.40) 0%, | ||
rgba(0, 0, 0, 0. | rgba(0, 0, 0, 0.20) 40%, | ||
rgba(0, 0, 0, 0) 100% | rgba(0, 0, 0, 0) 100% | ||
); | ); | ||
| خط ۹۶: | خط ۹۰: | ||
margin: 20px 15px; | margin: 20px 15px; | ||
padding: 20px; | padding: 20px; | ||
border-radius: 10px; | |||
} | } | ||
} | } | ||