• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش طراحی متریال با Materialize (جلسه 11) - کارت ها - بخش اول

0 296 ۴ اردیبهشت ۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

Materialize تعدادی کلاس CSS تعریف کرده و میتونین با استفاده از اونا کارتهای متناسب با سلیقه خودتون رو بسازید و در سایتتون قرار بدین. این کارتها انواع مختلفی دارن و هر کدام وظیفه خاصی رو انجام میدن و در زمینه خاصی به کار گرفته میشن.

در این زمینه کلاسهای زیر وجود داره:

  • card : این کلاس اجباری هست و باید برای div اصلی و پدر قرار داده بشه و با اینکار یک Materialize Card درست میکنیم
  • card-content : این کلاس رو به المنتی که در برگیرنده محتوای کارت هست نسبت میدیم. این المنت فرزند المنت با کلاس card هست و بقیه موارد در این المنت قرار داده میشن
  • card-title : این کلاس رو برای div که عنوان کارت رو مشخص میکنه قرار داده میشه
  • card-action : این کلاس رو معمولا برای آخرین div درون card در نظر میگیرن و در اون لینکها و دکمه های مورد نظر که هر کدام اقدام خاصی رو انجام میدن، نسبت داده میشه
  • card-image : با نسبت دادن این کلاس به div میفهمونیم که در وظیفه اون نمایش تصویر در card هست
  • card-reveal : با استفاده از این کلاس به div مورد نظر میفهمونیم که در ابتدا نباید در کارت نمایش داده بشه و زمانی آشکار بشه که روی یک المنت مشخص کلیک بشه
  • activator : این کلاس رو باید به عکسی بدین که زمانی که بر روی اون کلیک میشه، المنت card-reveal نمایش داده بشه
  • card-panel : با استفاده از این کلاس مشخص میکنید که این کارت، یک کارت ساده هست و Padding و Shadow برای اون در نظر گرفته میشه
  • small : با استفاده از این کلاس مشخص میکنید که این المنت یک کارت کوچک هست. ارتفاع این کارت 300 پیکسل خواهد شد
  • medium : با استفاده از این کلاس مشخص میکنید که این المنت یک کارت متوسط هست. ارتفاع این کارت 400 پیکسل خواهد بود
  • large : با استفاده از این کلاس مشخص میکنید که این المنت یک کارت بزرگ هست. ارتفاع این کارت 500 پیکسل خواهد بود

مثالهای مربوط به کارتها رو در جلسه بعد براتون قرار میدم.

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

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram