آریانیک ...

مجله آریانیک - اخبار > طراحی سایت با css3

Aryanic Blog

Blog



چهارشنبه ٦ بهمن ١٤٠٠ ١٨:٣٣
photo

امروزه با توجه به افزایش کارهایی که به صورت غیر حضوری و از راه دور از طریق اینترنت انجام می گیرد، سایت های اینترنتی برای انجام این کارها بسیار پرکاربرد هستند. در نتیجه برای انجام کار از طریق اینترنت، طراحی سایت یک از نکات قابل توجه است. طراحی سایت را می توان به دو روش انجام داد: با استفاده از کد نویسی و بدون استفاده از کد نویسی. برای طراحی سایت با کد نویسی بایستی حداقل یکی از زبان های برنامه نویسی مرتبط را آموخته و برنامه مربوط به سایت مورد نظر را نوشت.

اما برای طراحی سایت بدون کد نویسی از سیستم های مدیریت محتوا استفاده می شود که یکی از محبوب ترین این سیستم ها، سیستم متن باز و رایگان وردپرس است. برای طراحی سایت به هریک از روش های نام برده می توان از ابزارهای مختلفی استفاده کرد. از جمله این ابزارها می توان به وردپرس، PHP، لاراول، HTML، CSS، ASP.net و موارد دیگر اشاره کرد.

 

CSS3 از زبان هایی است که برای استایل دادن به وبسایت استفاده می شود و با استفاده از آن می توان صفحات سبکی طراحی کرد که سرعت بارگذاری بالایی دارند. اگر طراحی سایت با استفاده از CSS3 به همراه HTML انجام شود، می توان یک سایت بسیار زیبا، طراحی کرد. به طوری که استخوان بندی سایت با استفاده از HTML طراحی شود و ظاهر زیبای آن با استفاده از CSS3 طراحی شود. یکی از گزینه هایی که توجه بسیاری از کاربران وبسایت ها را جلب می کند، انیمیشن ها هستند.

 

علامت نرم افزار CSS

ایجاد انیمیشن در CSS3 با مشخص کردن خاصیت های مختلف و کلمه کلیدی keyframe امکان پذیر است. از مزایای استفاده از CSS3 می توان به موارد زیر اشاره کرد:

·       ظاهر صفحات وب را می توان بدون دستورات HTML طراحی کرد.

·       از تکرار دستورات، پیشگیری می شود.

·       صفحات با سرعت بیشتری بارگذاری می شوند.

·       می توان از فایل های CSS3 دیگر نیز برای تغییر ظاهر صفحات استفاده کرد.

ایجاد انیمیشن در طراحی سایت

در CSS3، انیمیشن ها مانند ترنزیشن ها هستند با این تفاوت که ترنزیشن تغییر استایل یک یا چند عنصر را از یک حالت به حالت دیگر انجام می دهد اما انیمیشن تغییر استایل یک یا چند عنصر را از یک حالت به حالت های متعددی انجام می دهد. انیمیشن ها در CSS3 متشکل از دو بخش کلی هستند: خاصیت های انیمیشن و کلمه کلیدی @keyframes.

خاصیت انیمیشن بایستی قبل از ساخت آن مشخص شود. این خاصیت ها عبارتند از:

·       Animation-name: اولین کار، تخصیص یک نام به انیمیشن است.

·       Animation-duraion: مدت زمان اجرای انیمیشن را مشخص می کند.

·       Animation-delay: مدت زمانی که می توان اجرای انیمیشن را به تاخیر انداخت، مشخص می کند.

·       Animation-iteration-count: تعداد دفعاتی که انیمیشن بایستی اجرا شود را مشخص می کند.

·       Animation-direction: این خاصیت جهت اجرای انیمیشن را مشخص می کند.

·       Animation-timing-function: سرعت تغییر استایل در مراحل مختلف انیمیشن را مشخص می کند.

·       Animation-fill-mode: مشخص کننده حالت عنصر انیمیشنی قبل و بعد از اجرای انیمیشن است.

·       Animation-play-state: حالت انیمیشن را مشخص می کند. که دارای دو حالت running  (در حال اجرا) و paused (متوقف( است.

·       Animation: با این خاصیت، می توان تمام خاصیت های نام برده را در یک دستور تعریف کرد.

برای استفاده از @keyframes کافیست این کلمه را نوشته و بعد از آن نام انیمیشن مورد نظر را نوشت. برای تعیین مراحل پیشروی انیمیشن دو راه وجود دارد: استفاده از from و to و استفاده از درصد پیشروی.

استفاده از from و to اغلب برای انیمیشن های ساده که تنها دو مرحله دارند کاربرد دارد. که در بخش from استایل اولیه عنصر و در بخش to استایل نهایی انیمیشن مشخص می شود.

برای استفاده از درصد پیشروی، می توان در هر درصدی از انیمیشن، استایل متفاوتی برای انیمیشن تعریف کرد.