با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش 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 از کتابخانه آیکون ihd محبوب زیر پشتیبانی می کند:
برای استفاده از یک آیکون آن را در یک کلاس عنصر <i> اچ تی ام ال جایگذاری نمایید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <html> <head> <title>The PURE.CSS Icons</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css"> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style> .xsmall { font-size: 70%; } .small { font-size: 85%; } .large { font-size: 110%; } .xlarge { font-size: 125%; } </style> </head> <body> <h2>Icons Demo</h2> <hr/> <h3>Font Awesome Icon Demo</h3> <i class = "fa fa-cloud xsmall"></i> <i class = "fa fa-cloud small"></i> <i class = "fa fa-cloud"></i> <i class = "fa fa-cloud large"></i> <i class = "fa fa-cloud xlarge"></i> <h3>Google Material Design Icon Demo</h3> <i class = "material-icons xsmall">cloud</i> <i class = "material-icons small">cloud</i> <i class = "material-icons large">cloud</i> <i class = "material-icons xlarge">cloud</i> <i class = "material-icons">cloud</i> <h3>Bootstrap Icon Demo</h3> <i class = "glyphicon glyphicon-cloud xsmall"></i> <i class = "glyphicon glyphicon-cloud small"></i> <i class = "glyphicon glyphicon-cloud"></i> <i class = "glyphicon glyphicon-cloud large"></i> <i class = "glyphicon glyphicon-cloud xlarge"></i> <h3>Button with Icon Demo</h3> <button class = "pure-button"><i class = "fa fa-cog"></i> Settings</button> <a class = "pure-button" href = "#"><i class = "fa fa-shopping-cart fa-lg"></i> Checkout</a> </body> </html> |
نتیجه را تأیید کنید.
نتیجه به صورت تصویر زیر آشکار خواهد شد.
در جلسه آخر از دوره آموزشی Pure CSS با آموزش کار با آیکون ها در Pure CSS همراه شما بودیم.
این دوره نیز به پایان رسید اما یادگیری همچنان ادامه دارد.
در دوره های آموزشی دیگر پی وی لرن میزبان شما خواهیم بود.
با پی وی لرن همراه باشید.