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

مثال های کاربردی Shadow

مثال های باحال Shadow
مثال های باحال 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;
}

نتیجه:

کارت معرفی محصول در CSS - خرید لپ تاپ

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

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

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

کوییز مقاله ۳۶

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

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

[/box]

نتیجه گیری

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

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

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

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

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

 

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

12 نظر

12 پاسخ

  1. سلام خدمت شما. ممنون از شما سایت شما عالی هست و مطالب خیلی خوب و کامل توضیح داده میشه. فقط یه سوال دارم میخوام که یه چنین چیزی داشته باشم که روی عکس کارت یه عکس دیگه باشه(مانند این عکس آپلود شده از سایت mdbootstrap)

    1. سلام محمدجواد، خواهش میکنیم 🙂
      برای پیاده سازی اینطور چیزی میتونی از دستور position: absolute برای عکس دوم، یعنی همون فلشه، استفاده کنی. این دستور باعث میشه عنصرت به صورت کاملا ازادانه و بدون تاثیر بر عناصر دیگه تو صفحه حرکت کنه. سپس با کمک خاصیت های top، bottom، right و left میتونی حرکتش بدی. تو مقاله خاصیت position میزفا بیشتر راجبش نوشتیم که میتونی مطالعه کنی.

  2. با سلام
    قسمت بیوگرامی حساب هر شخص محل معرفی معرفی شخص است.
    و کپشن هر پست می تونه محل معرفی محصول و یا شخص باشه.

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

    1. سلام حسین. دقیقا همینطوریه که میگی، ممنون ازت? ما محصولات و خدماتمون رو در پست ها معرفی میکنیم و در قسمت بیو هم، به معرفی خودمون میپردازیم.

  4. سلام خسته نباشید
    ببخشید میشه بجای طراحی کارت با css از فتوشاپ طراحی کرد بعد اورد توی سایت

  5. سلام
    در جواب سوالتون در پایان ترم من فکر می کنم بیوگرافی در اینستاگرام نقش همون معرفی شخص یا محصول رو داشته باشه

    1. سلام پریسا.
      قسمت اول پاسخت درسته، بیوگرافی میتونه نقش معرفی شخص و کسب و کار رو داشته باشه 🙂
      اما عموما محصول رو تو یک قسمت دیگه از صفحه اینستاگرامی معرفی می کنن.

  6. سلام ممنون از آموزشای خوبتون
    خب چطوری کد css و htmlترکیب کنیم فقط rel style sheet
    ?
    میشه روند دقیق اینارو توضیح بدین

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=