دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱۹
  • خرداد

جلسه ۰۹ : آموزش کار با آیکون ها در Pure CSS

  • دسته‌بندی‌ها :
جلسه ۰۹ : آموزش کار با آیکون ها در Pure CSS
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در جلسه گذشته آموختیم که چگونه می توان با کمک کلاس های Pure CSS به خلق تصاویری پرداخت که از ویژگی ریسپانسیو بودن برخوردار هستند. در این جلسه که آخرین جلسه از دوره آموزش Pure CSS است؛ آموزش کار با آیکون ها در Pure CSS را به علاقمندان این دوره ارائه می کنیم.

      آموزش کار با آیکون ها در Pure CSS

      مروری بر آنچه در Pure CSS آموختیم

      طراحی فرم ها

      برای طراحی دکمه از شش استایل استفاده می شود:

      pure-form
      یک فرم داخل خط را فشرده نشان می دهد.

      pure-form-stacked
      یک stacked form را با عناصر ورودی زیر بر چسب ها را نشان می دهد تا از آن برای pure-form استفاده نماید.

      pure-form-aligned
      یک فرم aligned form را با عناصر زیر برچسب ها نشان می دهد تا از آن برای pure-form استفاده نماید.

      pure-input-rounded
      یک کنترل فرم form control را با گوشه های گرد نمایش می دهد.

      pure-button
      از این کلاس برای زیبا سازی یک دکمه استفاده می شود.

      pure-checkbox
      از این کلاس برای زیبا سازی یک چک باکس استفاده می شود.

      pure-radio
      این کلاس radio ها را به صورت شکلیل تری در می آورد.

      طراحی دکمه ها

      برای طراحی دکمه ها در Pure CSS از کلاس های زیر استفاده می کردیم:

      pure-button
      این کلاس استانداردهایی را برای ایجاد دکمه ها در نظر می گیرد که می تواند برای استایل یک لینک و دکمه به کار برده شود.

      pure-button-disabled
      از این کلاس برای نمایش یک دکمه به صورت غیر فعال استفاده می شود تا به بتوان آن را در کنار pure-button به کار برد.

      pure-button-active
      از این کلاس برای نشان دادن یک دکمه در حال فشردن استفاده می شود تا به بتوان آن را در کنار pure-button به کار برد.

      طراحی جداول

      در ادامه می توانید تعدادی از کلاس هایی که با کمک آن ها می توان به طراحی و ایجاد جدول ها در Pure CSS پرداخت را ببینید.

      pure-table
      این کلاس جدول پایه را نمایش می دهد که در آن padding ها، border  ها و header ها به صورت پیش فرض مشخص اند.

      pure-table-bordered
      این کلاس مرز border  جدول ها و سطرهای آن را مشخص می نماید.

      pure-table-horizontal
      این کلاس به تعیین خط های افقی می پردازد.

      pure-table-striped
      این کلاس خطوط جدول را مشخص می نماید.

      pure-table-odd
      اگر این کلاس بر روی هر tr دیگر اعمال شود، پس زمینه سطر را تغییر می دهد و اثر zebra-styled را ایجاد می کند.

      طراحی و کار با تصاویر

      به طور کل می توان برای کار و طراحی تصاویر از کلاس زیر استفاده نمود:

      pure-img
      این کلاس یک استایل پایه و اصلی را به عنوان نمایش تصاویر بدون border به کار می برد.
      با استفاده از این این قابلیت تصاویر می توانند بدون تغییر کیفیت تغییر اندازه یابند.

      آیکون ها در Pure CSS

      Pure.CSS از کتابخانه آیکون ihd محبوب زیر پشتیبانی می کند:

      • آیکون های Font Awesome
      • آیکون های Google Material
      • آیکون های Bootstrap

      موارد استفاده

      برای استفاده از یک آیکون آن را در یک کلاس عنصر <i> اچ تی ام ال جایگذاری نمایید.

      مثال

      مثال : 

      نتیجه

      نتیجه را تأیید کنید.
      نتیجه به صورت تصویر زیر آشکار خواهد شد.

      آموزش کار با آیکون ها در Pure CSS

      آموزش کار با آیکون ها در Pure CSS

      کلام آخر

      در جلسه آخر از دوره آموزشی Pure CSS با آموزش کار با آیکون ها در Pure CSS همراه شما بودیم.
      این دوره نیز به پایان رسید اما یادگیری همچنان ادامه دارد.
      در دوره های آموزشی دیگر پی وی لرن میزبان شما خواهیم بود.
      با پی وی لرن همراه باشید.

      QR:  جلسه ۰۹ : آموزش کار با آیکون ها در Pure CSS
      به اشتراک بگذارید