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

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

اول از همه باید بدانیم متریال دیزاین به چه معناست؟ متریال دیزاین سبکی/زبانی جدید در طراحی است که گوگل در یکی از کنفرانس های خبری خود آن را معرفی کرده است. اگر بخواهیم دقیق تر باشیم در ماه ژوئن سال قبل (۲۰۱۴)

متریال دیزاین بیش از حد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) باشد اما خیلی زیباتر با انیمییشن‌ها و  Transition های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی آنها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate میگوید همانگونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد.

اگر بخواهیم در یک جمله بگوییم متریال دیزاین چیست. می‌توانیم بگویم متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت (Flat 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);
}

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