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

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

آموزش CSS

در قسمت قبلی آموزش CSS با transform و transition آشنا شدیم و دیدیم که با این دستورات میتوان تغییراتی را در مدت زمانی مشخصی بر روی هر جزئی ایجاد کرد. در این قسمت با انیمیشن آشنا میشویم و یاد میگیریم که چگونه با استفاده از transition و transform انیمیشن های ساده ای برای صفحه وبمان طراحی کنیم.

انیمیشن در CSS3

با استفاده از انیمیشن ها میتوان هر تغییری را در استایل اجزاء اسناد HTML ایجاد کرد. این تغییرات متحرک بوده و میتوان برای جذابیت بیشتر صفحه وب از آن استفاده کرد. CSS3 این اجازه را به طراحان سایت میدهد که بدون استفاده از جاوا اسکریپت در اسناد HTML انیمیشن های دلخواهی را قرار دهند. در این قسمت با هم ساخت انیمیشن های ساده را بررسی میکنیم.

برای ساخت انیمیشن دستوری به نام @keyframes داریم که در این دستور هر پراپرتی را که میخواهیم تغییر دهیم جای میگیرد. بعد از نوشتن پراپرتی هایی که میخواهیم تغییر دهیم در این دستور، باید این انیمیشن را به جزء مورد نظر بچسبانیم. برای عمل کردن انیمیشن نیز باید مدت زمانی مشخصی را سِت کرد تا جزء به تدریج و رفته رفته تغییر استایل دهد.

پس قاعده کلی کار بدین صورت است که ابتدا از طریق پراپرتی animation-name نامی را برای انیمیشنمان انخاب میکنیم. بعد از انتخاب نام، با پراپرتی animation-duration مدت زمانی را برای نمایش انیمیشن سِت میکنیم که اگر زمان سِت نشود انیمیشن اجرا نمیشود چون مقدار دیفالت 0 است. این دو پراپرتی برای جزئی که میخواهیم انیمیشن روی آن انجام شود نوشته میشوند.

حال به سراغ ساخت انیمیشن میرویم. در ابتدا باید دستور @keyframes را بنویسیم در ادامه باید نامی را که سِت کرده ایم را بنویسیم تا انیمیشنمان را به جزء بچسبانیم. در ادامه استایلهایی را که میخواهیم تغییر دهیم در پراپرتی from و to و درون {} ( آکولاد ) مینویسیم.

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

[us_single_image image=”11775″ align=”center”]

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

from یعنی هنگام شروع و to یعنی در پایان. بجای from میتوان 0% و به جای t0 میتوانی 100% بنویسیم. هنگامی که از درصد استفاده میکنیم میتوانیم برای هر لحظه هر تغییری را بنویسیم. این درصد ها متناسب با مدت زمان انیمیشن است. مثلا اگر مدت زمان انیمیشن 5s، 40%  یعنی 2s . در اینصورت میتوان تغییرات بیشتری را نوشت. دستورات انیمیشن بالا را به دستورات زیر تغییر دهید:

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

[us_single_image image=”11776″ align=”center”]

نکته: اگر پراپرتی 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 دیدیم.

تمام این تنظیمات را باید برای جزئی نوشت که میخواهیم انیمیشن روی آن انجام شود. تنظیمات انیمیشن را هم میتوان به صورت shorthand نوشت. در این صورت برای جزء مورد نظر پراپرتی animation را نوشته و به آن به ترتیب زیر مقدار میدهیم:

ترکیب transform و animation

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

[us_single_image image=”11777″ align=”center”]

تنظیمات دکمه ها در CSS3

در ادامه این قسمت تنظیماتی را که در CSS3 برای دکمه ها اضافه شده است را بررسی میکنیم. در قسمت های گذشته دکمه هایی را در صفحه قرار دادیم:

[us_single_image image=”11778″ align=”center”]

[us_single_image image=”11779″ align=”center”]

برای تنظیم عرض دکمه هم پراپرتی width را برای آن سِت میکنیم. مقدار دیفالت دکمه متناسب با عبارت نوشته شده روی آن است.

برای قرار دادن دکمه ها در کنار هم مارجین آنها را از بین میبریم و آنها را float left یا float right میکنیم.

ساخت دکمه Animated

منظور از Animated یعنی با کلیک بر روی دکمه، دکمه متحرک شود:

[us_single_image image=”11780″ align=”center”]

صفحه گذاری با CSS

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

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

[us_single_image image=”11781″ align=”center”]

تنظیمات دلخواه در صفحه گذاری

برای مشخص کردن صفحه ای که در آن هستیم، برای آن صفحه کلاس active را سِت میکنیم. برای بهتر شدن صفحه گذاری تنظیمات hover over را نیز انجام میدهیم.

برای گرد کردن حاشیه اعداد، پراپرتی border-radius را سِت میکنیم.

پراپرتی transition را هم میتوان برای a ها سِت کرد تا رنگ زمینه به تدریج تغییر کند. و اگر بخواهیم برای شماره صفحات حاشیه قرار دهیم، پراپرتی border را برای a ها نیز سِت میکنیم.

برای گرد کردن حاشیه خانه اول و آخر، li هایی که فرزند اول و آخر هستند را انتخاب کرده و حاشیه آنها را گرد میکنیم. و اگر بخواهیم بین شماره ها فاصله باشد، از پراپرتی margin استفاده میکنیم که مارجین چپ و راست را تغییر میدهیم.

پراپرتی font-size نیز برای تعیین اندازه فونت اعداد نوشته شده است.

برای قرار دادن اعداد در وسط صفحه، تمام لیست را درون یک دایو قرار میدهیم و برای این دایو text-align را center قرار میدهیم.

تمام مراحل را به ترتیب در مثال زیر انجام داده ایم. در بعضی موارد برای نمایش بهتر کدهای مراحل قبل را کامنت کرده ایم.

[us_single_image image=”11782″ align=”center”]

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

اگر به صفحات روزنامه دقت کنید میبینید که بعضی صفحات دارای عنوان اصلی هستند که در یک کادر بزرگ نوشته شده است. متن و محتوا نیز در چند ستون نوشته شده است. کاری که میکنیم این است که تمام متن را درون یک دایو میریزیم و با پراپرتی های زیر تنظیمات لازم را انجام میدهیم:

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

  • در کروم :
[us_single_image image=”11783″ align=”center”]

در فایر فاکس:

[us_single_image image=”11784″ align=”center”]

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

User Interface

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

پراپرتی resizing امکان تغییر اندازه اجزا را در عرض، ارتفاع یا هر دو را میدهد. مقادیری که این پراپرتی میگیرد horizontal ، vertical و both است. این پراپرتی برای هر جزئی به کار رود، کاربر میتواند از طریق موس ( و نه تنظیمات مرورگر ) اندازه جزء را تغییر دهد.

box-sizing

همانطور که میدانید وقتی عرض و ارتفاع و مارجین و پَدینگ مشخصی را برای یک جزء تعیین میکنیم، اندازه جزء کمی بیشتر از عرض و ارتفاع تعیین شده است. یعنی برای محاسبه عرض ( ارتفاع ) مقدار width  را با اندازه حاشیه و پَدینگ جمع میکنیم تا اندازه واقعی بدست آید. پراپرتی box-sizing این امکان را به وجود آورده است که عرض و ارتفاع را با پَدینگ و حاشیه ترکیب کنیم تا این مشکل تعیین اندازه بر طرف شود و توسعه دهندگان وب مجبور نباشند جزء مورد نظرشان را کوچکتر از اندازه مورد نظر ایجاد کنند.

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

[us_single_image image=”11785″ align=”center”]

وقتی که از box-sizing برای این دو دایو استفاده میکنیم، پَدینگ و حاشیه و عرض و ارتفاع با هم ادغام میشوند و اندازه دایوها، دقیقا اندازه عرض و ارتفاع خواهد بود:

[us_single_image image=”11786″ align=”center”]

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

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