طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش CSS – بخش دوازدهم

آموزش CSS

دوستان عزیز سلام؛ همراه شما دوستان عزیز هستم در آموزش CSS – بخش دوازدهم و در این جلسه می خواهم مطالب زیر را برای شما دوستان گرامی  شرح دهم:

  • انیمیشن در CSS3
  • دکمه ها در CSS3
  • صفحه گذاری در CSS3
  • طراحی چند ستونه صفحات در CSS3
  • رابط کاربری در CSS3

در جلسه قبل با ویژگی های  transform و transition  آشنا شدیم و دیدیم که با این دستورات می توان تغییراتی را در مدت زمانی مشخصی بر روی هر المانی ایجاد کرد.

مطابق با قولی که دادم در این جلسه می خواهم شما را با انیمیشن که یکی از جذابترین ماژول های CSS3 می باشد، آشنا کنم. همراه من باشید:

انیمیشن در CSS3

انیمیشن چیست؟ چرا از آن استفاده می کنیم؟

اصولا هر دستور CSS را برای زیبا سازی المان ها می نویسیم. پس انیمیشن را هم برای جذابیت بیشتر صفحه وب استفاده می کنیم چرا که با استفاده از انیمیشن می توان به سادگی به المان های HTML جان بخشید. اما منظور از جان بخشیدن چیست؟

همانطور که می دانید المان های HTML زمانی که در صفحه قرار می گیرند، فقط یک سبک دارند و ساکن و بی حرکت در مکان تعیین شده جای می گیرند. با استفاده از انیمیشن می توان هر سبک از هر المان را به تدریج و طی هر زمان دلخواه، به سبک دیگری تغییر داد. به عنوان مثال می توان همزمان با جابجایی المان از مکانی به مکان دیگر، سبک هایی مثل رنگ زمینه، عرض، ارتفاع و … را تغییر داد.

آیا انیمیشن را تنها با استفاده از CSS می سازیم؟

البته که نه. با استفاده از جاوا اسکریپت هم می توانیم انیمیشن بسازیم که در جلسه دوازدهم آموزش جاوااسکریپت با هم این کار را انجام می دهیم.

فعلا بیایید ببینیم که در CSS3 چگونه یک انیمیشن را می سازیم؟

ساختار انیمیشن

ساختار کلی انیمیشن به صورت زیر می باشد:

خدمت شما عرض شود که برای ساخت انیمیشن دستوری به نام @keyframes  داریم که در این دستور هر سبکی را که می خواهیم به سبک دیگر تغییر یابد، قرار می گیرد تا انیمیشن این تغییرات سبک را در یک مدت زمان مشخص انجام دهد.

خب حالا باید چکار کنیم؟ بله دوستان، در ادامه باید انیمیشن را به المان (های) مورد نظر بچسبانیم. چگونه این کار را انجام دهیم؟

با استفاده از ویژگی animation-name  که برای المان مورد نظر نوشته می شود، نام انیمیشن (که نامی دلخواه است و دقیقا بعد از دستور @keyframes  نوشته می شود) را انتخاب می کنیم. حال باید زمانی اجرای انیمیشن را با استفاده از ویژگی animation-duration  تعیین کنیم.

اگر مدت زمان اجرای انیمیشن تعیین نشود، انیمیشن اجرا نمی شود.

اما شاید بپرسید که from  و to  چه ویژگی هایی هستند؟

در پاسخ باید خدمت شما عرض کنم که یکی از روش های ساخت انیمیشن این است که سبک های آغاز انیمیشن را در دستور from  بنویسیم و سبک های پایان انیمیشن (یعنی سبک های نهایی المان ها) را در دستور to  بنویسیم. و این یعنی تغییرات از سبک (هایی) آغاز شود و به سبک (هایی) ختم شود.

در مثال زیر می بینید که تغییرات رنگ زمینه دیو از cyan به blue تغییر میابد:

آموزش CSS

بعد از تغییر، مجددا رنگ زمینه فیروزه ای خواهد شد. با رفرش کردن صفحه انیمیشن مجددا اجرا می شود.

در مثال بالا دیدید که انیمیشن فقط شامل دو مرحله بود. می توانیم با استفاده از % مدت زمان انیمیشن را به چند مرحله تقسیم کنیم و در هر مرحله دستورات خاصی اجرا شود. مثلا اگر بخواهیم انیمیشن در 4 مرحله با فاصله زمانی یکسان اجرا شود، به صورت زیر عمل می کنیم:

0% یعنی زمان آغاز انیمیشن، 25% زمانی است که یک چهارم زمان اجرای انیمیشن سپری شده باشد و همینطور تا 100% یعنی زمانی که انیمیشن کامل شده باشد. اما آیا می توان در هر مرحله چندین ویژگی را همزمان تغییر داد؟

بله دوستان. البته که می توانیم این کار را انجام دهیم. یک مثال ساده در این زمینه را ببینید:

آموزش CSS

اگر ویژگی position  برای دیو تنظیم نشود، جابجایی صورت نمی گیرد.

حال بیایید ببینیم که چه دستورات دیگری را برای ساخت یک انیمیشن زیبا می توان استفاده کرد:

دیگر ویژگی های ساخت انیمیشن

برای انیمیشن نیز با ویژگی animation-delay  می توان تاخیر زمانی را تنظیم کرد. یعنی با باز شدن صفحه بعد از مدت زمان تعیین شده، انیمیشن اجرا شود.

در حالت پیش فرض انیمیشن ساخته شده یک بار اجرا می شود. ویژگی animation-iteration-count  تعداد دفعات اجرای انیمیشن را تعیین می کند. اگر مقدار infinite  به این ویژگی داده شود، انیمیشن تا زمانی که صفحه باز است اجرا می شود. می توان مقدار عددی مثلا 5 را بدهیم یعنی انیمیشن 5 بار از 0 تا 100 اجرا شود.

ویژگی animation-direction  برای تعیین جهت (از 100% تا 0% یا برعکس) انیمیشن است. این ویژگی مقادیر reverse ، alternate  و alternate-reverse  را می گیرد که مقدار reverse  برای اجرای انیمیشن از 100% تا 0% (برعکس) است. مقدار alternate  انیمیشن را از 0 تا 100 و بعد تا 0 و سپس تا 100 اجرا می کند. مقدار سوم هم که ترکیبی از این دو مقدار است.

ویژگی animation-timing-function  برای تعیین منحنی سرعت انیمیشن است. مقادیری را که می توان به این ویژگی داد عبارتند از: linear ، ease ، ease-in ، ease-out  و ease-in-out  است. این مقادیر همان عملکردی را دارند که در قسمت قبل برای transition-timing-function  دیدیم.

خب این ویژگی ها را در کجا باید بنویسیم؟ در کدهای بخش انیمیشن و یا برای المانی که انیمیشن روی آن اجرا می شود می نویسیم؟

بله دوستان. این ویژگی را باید برای المان نوشت. همچنین توجه داشته باشید که می توان دستورات بالا را می توان با الگوی زیر خلاصه نویسی کرد:

ترکیب transform و animation

در مثال زیر ترکیب transform  و انیمیشن را با هم می بینیم:

آموزش CSS

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

در مبحث بعدی ازاین جلسه می خواهیم ببینیم که در CSS3 چه تنظیمات دیگری را می توان روی دکمه ها انجام داد:

دکمه ها در CSS3

در مثال زیر نحوه قرار دادن دکمه در صفحه را مرور می کنیم:

آموزش CSS

رنگ دکمه رو با چه ویژگی می توان تغییر داد؟

بله، برای تنظیمات رنگ این دکمه ها از ویژگی background-color  استفاده می کنیم.

همانطور که می دانید برای تغییر اندازه فونت عبارتی که روی دکمه نوشته می شود، از ویژگی font-size  با مقادیر با واحد های اندازه (px، pt و …) استفاده می کنیم.

Padding  هم برای تعیین اندازه فاصله بین حاشیه و عبارت روی دکمه و همچنین بزرگ و یا کوچک کردن دکمه است.

برای گرد کردن دکمه از ویژگی border-radius  استفاده می کنیم. مقادیر این ویژگی می تواند px یا % باشد.

تمام ویژگی هایی که مربوط به حاشیه و رنگ حاشیه و hover over و box-shadow  است را می توان برای دکمه ها به کار برد.

ساخت دکمه ی غیر فعال

در مثال زیر می بینید که چگونه می توان یک دکمه غیر فعال را طراحی کرد:

آموزش CSS

با استفاده از ویژگی width  هم می توان عرض دکمه ها را تنظیم کرد که اندازه پیش فرض دکمه متناسب با عبارت نوشته شده روی آن می باشد.

ساخت دکمه متحرک

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

آموزش CSS

در ادامه این جلسه می خواهم نحوه صفحه گذاری صفحات وب را برای شما دوستان و همراهان سایت سازان شرح دهم:

صفحه گذاری در CSS3

زمانی که داد های سایت افزایش میابد (مثلا تعداد مقالات سایت بیشتر می شود) می توان جهت دسترسی آسان و راحت کاربران به این داده ها، چندین صفحه را ایجاد و آن ها را شماره گذاری کرد تا کاربر به راحتی به تمام صفحات دسترسی داشته باشد.

در مثال زیر صفحه گذاری ساده ای را انجام می دهیم:

آموزش CSS

یک مثال بهتر در این زمینه را در ادامه می بینید:

آموزش CSS

به این ترتیب می توانید صفحه گذاری را به هر صورت دلخواه سبک دهی کنید.

حال به سراغ مبحث بعدی یعنی طراحی چند ستونه صفحات می رویم:

طراحی صفحات چند ستونه در CSS3

اگر به صفحات روزنامه ها نگاهی گذارا بیندازید خواهید دید که هر صفحه به چند ستون تقسیم شده است. این کار را می توانیم به راحتی با استفاده از CSS انجام دهیم. کاری که می کنیم این است که تمام متن را درون یک دیو می ریزیم و با ویژگی های زیر تنظیمات لازم را انجام می دهیم:

  • column-count : این ویژگی تعداد ستونی که محتوا باید در آنها قرار گیرد را تعیین می کند.
  • column-gap : فاصله بین ستون ها را با این ویژگی تنظیم می کنیم.
  • column-rule-style : این ویژگی نوع خط بین ستونها را تعیین می کند. مقادیر solid، dashed و … را می توان به این ویژگی داد.
  • column-rule-width : این ویژگی نیز پهنای خطوط بین ستون ها را تنظیم می کند.
  • column-rule-color : همانطور که پیداست این ویژگی نیز برای تعیین رنگ خطوط جداکننده ستون ها بکار می رود.
  • column-rule : سه ویژگی بالا را می توان در این ویژگی خلاصه کرد. مقدار اول این ویژگی عرض، مقدار دوم نوع خط و مقدار سوم رنگ خطوط را انتخاب می کند.
  • column-span : عنوان متن را می توان در یک المان سرصفحه (مثلا h1) نوشت و با استفاده از این ویژگی می توان تعداد ستون هایی که می خواهیم عنوان در طول آنها بسط یابد را تعیین می کنیم.
  • column-width : این ویژگی نیز عرض ستونها (از یک خط جدا کننده تا خط بعدی) را تعیین می کند.

در کروم :

آموزش CSS

در فایر فاکس:

آموزش CSS

column-span  در کروم پشتیبانی نمی شود.

و آخرین مبحث این جلسه:

رابط کاربری در CSS3

در CSS3 ویژگی هایی مثل box-sizing  و resizing  برای داشتن رابط کاربری بهتری ایجاد شده اند.

ویژگی resizing  امکان تغییر اندازه المان ها را در عرض، ارتفاع یا هر دو را می دهد. مقادیری که این ویژگی می تواند دریافت کند عبارتست از: horizontal  ، vertical  و both  است. این ویژگی برای هر المانی به کار رود، کاربر می تواند از طریق موس (و نه تنظیمات مرورگر) اندازه آن را تغییر دهد.

box-sizing

همانطور که در جلسه چهارم آموزش CSS دیدیم، وقتی عرض ، ارتفاع ، فاصله داخلی و خارجی مشخصی را برای یک المان تعیین می کنیم، اندازه آن کمی  بیشتر از عرض و ارتفاع تعیین شده است. یعنی برای محاسبه عرض (ارتفاع ) مقدار width  ( height ) را با اندازه حاشیه و فاصله داخلی جمع می کنیم تا اندازه واقعی بدست آید.

ویژگی box-sizing  تعیین می کند که آیا اندازه تعیین شده برای المان، شامل حاشیه ها و فاصله داخلی باشد یا نه؟

بیایید کاربرد این ویژگیرا در یک مثال بررسی کنیم:

فرض کنید می خواهید دو المان دیو را با طول و عرض برابر در صفحه قرار دهید که یکی با فاصله داخلی 5px و دیگری با فاصله داخلی 50px باشد. دراین صورت این دیو ها با وجود داشتن عرض و ارتفاع برابر، هم اندازه نخواهند بود:

آموزش CSS

وقتی که از box-sizing  برای این دو عنصر استفاده می کنیم، فاصله داخلی و حاشیه و عرض و ارتفاع با هم ادغام می شوند و اندازه دیوها، دقیقا مطابق با اندازه تعیین شده در ویژگی های width  و height  خواهد بود:

آموزش CSS

این روش کار طراحان وبسایت را راحت تر می کند تا همیشه درگیر محاسبات برای تععین اندازه دقیق المان ها نباشند. بنابراین معمولا برای تمام المان ها دستور زیر را می نویسند:

دوستان عزیزم آموزش CSS – بخش دوازدهم را در اینجا به پایان میرسانم. امیدوارم که از مطالب امروز هم استفاده کافی را برده باشید. پیشنهاد، انتقاد و نظرات شما دوستان گرامی مشوق ما در تهیه آموزشهای مفید تر و کاربردی تر خواهد بود.

در جلسه بعدی (که جلسه پایانی آموزش CSS3 خواهد بود) با مبحث مهم flexbox و Media Query آشنا می شویم.

همراه ما باشید.

نوشته های مرتبط