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

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



  آیا می دانید تا کنون 6258 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 291 ۵ اردیبهشت ۹۵

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

در این بخش مثالهای مربوط به کارتها رو براتون قرار میدم.

فایل index.html رو باز کنید و مرحله به مرحله کدهای زیر رو قرار بدین و خروجی اونا رو در مرورگر ببینید.

میبینید که در ابتدا یک ردیف یا Row قرار دادیم و در اون هم یک div قرار دادیم و گفتیم که در دستگاه های متوسط 6 ستون از 12 ستون رو بگیر و در دستگاه های با نمایشگر کوچک 12 ستون رو اشغال کن. درون این المنت، کارت خودمون رو قرار دادیم و رنگ blue-grey با درجه روشنایی 4 رو برای اون در نظر گرفتیم. درون Card مورد نظر card-content و card-action رو قرار دادیم.

خروجی بصورت زیر خواهد بود:card1

حالا اگه بخایم بجای متن بالایی یک عکس قرار بدیم بصورت زیر عمل میکنیم:

خروجی:card2

حالا اگر بخایم کاری کنیم که با کلیک بر روی عکس المنت card-reveal بصورت زیبا نمایش داده بشه، باید بصورت زیر عمل کنید:

میبینید که برای عکس مورد نظر یک کلاس activator قرار داده شده و زمانی که بر روی اون کلیک میکنید المنت card-reveal نمایش داده میشه. gif زیر رو درست کردم تا روند کار رو به شما نشون بدم:card

حالا برای درست کردن کارتهای card-panel و small و medium و large بصورت زیر عمل میکنیم:

خروجی بصورت زیر هست:card3

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram