جلسه ۳۶ – مثال های باحال تر و کارت های زیبا با استفاده از Shadow

چطور با Shadow مثال های کاربردی بسازیم؟ چگونه با Shadow کارت های زیبا طراحی کنیم؟ چگونه در CSS کارت طراحی کنیم؟ در این مقاله می‌خواهیم چند مثال کاربردی و باحال را با Shadow ایجاد کنیم. با سایه ها میشه خیلی کارهای باحالی انجام داد.

ساده ترینشون، ساخت و طراحی کارت ها هستن که در این مقاله بهشون می پردازیم.

کارت ها در CSS

کارت ها از جدا نشدنی ترین اجزای طراحی وب سایت هستن.

با کارت ها می‌تونیم یک فرد یا یک خدمت خاص رو معرفی کنیم.

کارت ها طراحی بسیار ساده ای دارن و در عین حال، سه بعدی به نظر می‌رسن. همین سه بعدی به نظر رسیدن اون ها می‌تونه باعث جلب توجه کاربران سایت بشه.

کارت ها معمولا از سه بخش تشکیل می‌شن:

• تصویر: تصویری که معرفی شخص و یا محصول رو بر عهده داره.
• تیتر: تیتری که معرفی شخص و محصول رو بر عهده داره.
• توضیحات: توضیحاتی که معرفی شخص و محصول رو بر عهده دارن!

برای فهم بهتر، لازمه که وارد مثال ها بشیم.

کارت های معرفی شخص

به کارت های زیر توجه کنین:

همونطور که میبینیم، میشه یک تفاوت کاملا واضح رو بین این دو کارت تشخیص داد. کارت سمت چپ، به خاطر سایه هاش سه بعدی به نظر می‌رسه در حالی که کارت سمت راست، اینطور نیست.

نکته: همیشه کارت ها نباید سه بعدی باشن، این انتخاب بر اساس ساختار و رابط کاربری وب سایت مورد نظر صورت می‌گیره، اما در این مقاله، با کارت های سه بعدی کار می‌کنیم.

حالا یه مثال ساده تر رو همراه با کدهاش بررسی کنیم.

کد HTML:

<div class="card">
   <img src="navid.jpg">
   <div class="intro">
      <p>نوید معدن نژاد</p>
      <p>مدرس CSS در میزفا</p>
   </div>
</div>

کد CSS:

*{
   direction:rtl;
   font-family: iransansweb;
   font-size: 1.01em;
}

div.card{
   width:20%;
   height:500px;
   border: 1px solid rgba(0,0,0,0.1);
   padding:30px;
   box-shadow: 0px 6px 6px lightgray;
}

div.card img{
   width:100%;
}

div.card .intro{
   border-bottom: 1px solid rgba(0,0,0,0.1);
   border-top: 1px solid rgba(0,0,0,0.1);
   text-align: center;
   margin-top:30px;
}

نتیجه:

همونطور که می بینیم، به راحتی می تونیم توسط دستوراتی که قبلا یاد گرفتیم، این کارت ها رو طراحی کنیم و بسازیم.

کارت های معرفی خدمات

یکی دیگه از کاربرد های مهم کارت ها، برای معرفی محصول و یا یک خدمت خاص می‌تونه باشه.

تبلیغ کالاهای مختلف، دوره های آموزشی و رویداد های مهم از وظایف این کارت ها هستن.

به مثال زیر توجه کنین:

کد HTML:

<div class="card">
   <img src="laptop.png">
   <div class="intro">
      <p>ASUS FX504 لپ تاپ </p>
      <p class="description"> از برترین و معروف ترین نسل لپ تاپ های ایسوس که بعد از خریدش پشیمون نمی شید</p>
   </div>
   <div class="prices">
      <p class="cheap">۳۰۰۰.۰۰۰ تومان</p>
      <p class="expensive">۵۰۰۰.۰۰۰ تومان</p>
   </div>
   <button>ادامه مطلب</button>
</div>

کد CSS:

*{
   font-family: iransansweb;
}
body{
   display: flex;
   justify-content: center;
}
.card{
   background-image: linear-gradient(#000000,#434343);
   width:30vw;
   height:80vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   color:rgba(255,255,255,0.8);
   box-shadow: 0px 5px 5px darkgray;
   border-radius: 5px;
}
.intro{
   display: flex;
   flex-direction: column;
   align-items: center;
   width:80%;
}
.card img{
   width:60%;
   height: auto;
   margin:20px;
}
.card .description{
   text-align: right;
   font-size: 0.7em;
}
.prices{
   display: flex;
   width: 80%;
   justify-content: space-between;
   align-items: center;
}
.prices .cheap{
   color:lawngreen;
   font-size: 1.05em;
}
.prices .expensive{
   color:red;
   text-decoration-line: line-through;
   font-size: 0.9em;
}
.card button{
   padding:5px 20px;
   border-radius:5px;
   color: white;
   background-color: limegreen;
   border:none;
}

نتیجه:

دستور جدیدی که در کد های کارت فوق می‌بینیم، flex نام داره که در موردش می‌تونین تو مقاله flexbox در CSS‌ میزفا بیشتر مطالعه کنین. اما فعلا لازم نیست نگرانش باشین، هدف این مقاله، آشنایی با ساختار کارت ها و کاربردشون بود 🙂

نکته: یکی از راه هایی که می تونین کارت هاتون رو جذاب تر کنین، اینه که از دستوراتی مثل hover استفاده کنین، برای مثال زمانی که نشانگر روی کارت میره، کارت بزرگ تر میشه، و یا رنگش تغییر می کنه!

اگه جایی از مطالب رو متوجه نمیشین حتما تو قسمت نظرات ذکر کنین تا با هم اوکیش کنیم 🙂

پایان ترم

سوال:

کارت ها فقط محدود به دنیای CSS و طراحی وب سایت نیستن. عملکرد اپلیکیشن هایی مثل اینستاگرام، بر پایه شکل‌های پیچیده تری از کارت ها چیده شده. برای مثال به پروفایل اینستاگرام زیر دقت کنین:

به نظر شما، معرفی شخص و خدمات در چه قسمت هایی از یک پروفایل اینستاگرامی، یا همون کارت پیشرفته انجام می‌گیره؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله آموزش زبان css با ساختار کارت ها آشنا شدیم و یاد گرفتیم که می‌تونیم در دو موقعیت “معرفی شخص” و ”معرفی محصول و خدمات” ازشون بهره ببریم.

فهمیدیم که عنصر اصلی تشکیل دهنده کارت ها یا “چیزی که کارت ها رو، کارت می‌کنه!” سایه ها هستن که در بیشتر از هشتاد درصد کارت ها استفاده می‌شن.

امیدوارم که مفاهیم این مقاله رو به خوبی درک کرده باشین 🙂

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی