سورس کد سایه CSS متریال دیزاین (Material Design)

متریال دیزاین (Material Design) یک نوع و سبک طراحی است که در سال ۲۰۱۴ توسط شرکت گوگل معرفی شد. در این نوع  از طراحی انتقال ها و حرکت ها و انیمیشن های زیبا بهمراه سایه ها و زیبایی های خاصی استفاده شده است . و همینطور در چند سال اخیر طراحان از آن استفاده بیشتری داشته اند.

در این سورس کد سایه‌هایی CSS متریال دیزاین در اختیار شما قرار داده‌ایم….

نمونه‌های سایه CSS متریال دیزاین

سورس کد سایه CSS:

.card-1 { 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
    
.card-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
}

نمونه سورس کد سایه CSS:

.card-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

نمونه سورس کد سایه CSS:

.card-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

نمونه سورس کد سایه CSS:

.card-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

نمونه سورس کد سایه CSS:

.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

امیدوارم خیلی مفید باشه و موفق و پیروز باشید.