سورس کد سایه 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);
}

.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);
}

.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);
}

.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);
}

.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);
}

.card-5 {

box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

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

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

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

Babiato forum

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

مطالب زیر را حتما مطالعه کنید

کد و الگوریتم مثلث خیام پاسکال به زبان ++C

جمع دو عدد با ++C

محاسبه ب.م.م و ک.م.م دو عدد با ++C

کد ضرب ماتریس ها در ++C

کد ماشین حساب به زبان سی پلاس پلاس ++C

برنامه معکوس کردن یک آرایه به زبان اسمبلی

دیدگاهتان را بنویسید لغو پاسخ

Babiato forum