آموزش CSS3 (جلسه اول)

آموزش CSS3 (جلسه اول)
  • 1390/8/4
  • علی پامناري
  • 15

سلام دوستان از امروز می خواهم در این جا آموزش CSS3 به زبان ساده و دوستانه برای شما علاقه مندان ارائه کنم.امیدوارم مفید واقع شود.

من در نظر می گیرم شما عزیزان به CSS و HTML مسلط هستید.

در هر جلسه یک ویژگی معرفی می شود.

مقدمه :

برخی خواص CSS3 :

CSS3 خواصی دارد که کار طراحی وب سایت رو خیلی ساده می کند و خروجی کار خیلی تمیزتر در میاد. مثلا خواص border-radius برای گرد کردن گوشه های باکس‌ها باعث میشه تا دیگه نیازی به استفاده از عکس برای گوشه های گرد باکس‌ها و منوها نباشد. یا استفاده از شیب رنگ که طراحی سایت را بسار زیبا و آسان می کند. و استفاده از انیمیشن بدون نیاز به استفاده از کتابخانه های Jquey که باعث می شود سایت طراحی شده سبک تر و در عین حال زیبا باشد. و…

معرفی ویژگی animation در CSS3 :

تعریف و کاربرد :

این ویژگی ۶ مقدار دارد که به معرفی آن می پردازیم.

animation : نام انیمیشن زمان نحوه اجرای تابع تاخیر شمارش تکرار جهت;



animation: name duration timing-function delay iteration-count direction;
  • name : ما برای این که یک انیمیشن ایجاد کنیم باید یک نام برای آن انتخاب کنیم بزارین این طوری بگم فکر کنید داخل C یا PHP می خواهید یک تابع بسازید سپس با استفاده از این اسمی که برای تابع تعریف کرده ایم آن تابع را صدا می کنیم.
  • duration : مدت زمان اجرای تابع
  • timing-function : نحوه نمایش انیمیش که این حالت ها را پشتیبانی می کند:

linear,ease,ease-in,ease-out,ease-in-out

  • delay : تاخیر
  • iteration-count : شمارش تکرار

نکته : اگر از مقدار infinite استفاده کنید انیمیشن شما برای همیشه تکرار می شود.

  • direction : جهت

مثال :

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

خوب حالا یک نام برای انیمیشن انتخاب می کنیم مثلاً boxmove سپس با استفاده از دستورات CSS3 می گوییم باکس ما را از سمت راست صفحه نمایش به سمت چپ صفحه نمایش هدایت کند.

01 div
02 {
03 width:100px;
04 height:100px;
05 background:red;
06 position:relative;
07 animation:boxmove 5s linear;
08 -moz-animation:boxmove 5s infinite; /*Firefox*/
09 -webkit-animation:boxmove infinite; /*Safari and Chrome*/
10 }
11 @keyframes boxmove
12 {
13 from {right:0px;}
14 to {right:200px;}
15 }
16 @-moz-keyframes boxmove /*Firefox*/
17 {
18 from {right:0px;}
19 to {right:200px;}
20 }
21 @-webkit-keyframes boxmove /*Safari and Chrome*/
22 {
23 from {right:0px;}
24 to {right:200px;}
25 }

توضیحات خط ها :

در خط ۳و۴ اندازه باکس ۱۰۰ در ۱۰۰ تعیین شده در خط ۵ رنگ قرمز برای پس زمینه باکس تعیین شده در خط ۶ مقدار position را relative قرار دادیم که بتوانیم باکس مورد نظر را حرکت دهیم در خط ۷ یک نام به عنوان boxmove برای انیمیشن در نظر گرفتیم و مدت زمان اجرای آن را ۵ ثانیه در نظر گرفتیم و شمارش تکرار را توسط کد infinite نامحدود قرار دادیم در خط ۸ و ۹ برای انواع مرورگرها این کد نوشته شده است.

در خط 11 انیمیشن خود را ایجاد می کنیم مثل این که یک تابع داریم ایجاد می کنیم که به باکس مورد نظر گفتیم از right 0 به right 200 تغییر مکان انجام بده.

پیش نمایش

امیدوارم با نظراتی که می دهید به بهتر شدن این دوره آموزشی و انرژی داددن برای ادامه دوره شوید.

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 15 دیدگاه
  1. دوست عزیز خیلی ممنون بابت آموزش اما چند تا نکته :
    1- قبلا هم چنین آموزش هایی ( آموزش پی اچ پی و غیره ) تو گویا آی تی بوده امیدوارم شما مثل اونها بعد از یکی دو جلسه کارتون رو متوقف نکنید و حداقل اگه کاری رو شروع میکنید تموم کنید.
    2-پیش نمایش آموزش اول غیر فعاله.
    باز هم ممنون

    1. سلام دوست عزیز من قصد دارم آموزش کامل CSS3 بدم البته با راهنمایی شما عزیزان که دوره به خوبی آموزش داده می شود.
      لطفاً هر مطلبی که می خواهید آموزش داده شود در نظرات ذکر شود تا در جلسه بعد قرار داده شود(مرتبط با موضوع)
      پیش نمایش آموزش اصلاح شد.

  2. ما هم مثل آقای نصیری امیدواریم ادامه داشته باشه
    پس با قدرت ادامه بده

  3. لطفا در مورد مرورگرهایی که این کدها را پشتیبانی میکنند نیز توضیحاتی بدهید

    با تشکر

    1. با سلام
      این کد را مرورگرهای Firefox5 به بالا chorom9 به بالا و Safari5 به بالا ولی متاسفانه از مرورگر opera پشتیبانی نمی شود.

  4. سلام. ممنون که وقت گذاشتین و این داکیومنت رو تهیه کردین. اما چند تا انتقاد
    1: اینکه قبل از هر آموزشی به مخاطب باید گفت که برای یادگیری چه حداقل هایی لازمه گه شما نگفتین
    2: من وقتی این آموزش رو خوندم فکر کردم الان باید آموزش جلسه مثلا هشتم باشه. یه جورایی مثل داشتان های صادق هدایت از وسطش شروع کردین که برای آموزش خوب نیست.
    3: اگر قرار فقط مواردی که به css3 افزوده شده رو آموزش بدید بهتره عنوان رو عوض کنین در غیر این صورت برای آموزش css از مبانی اون شروع کنین.
    باز هم ممنون از توجهتون

    1. سلام دوست عزیز بله حق با شماست باید مشخص می کردم که برای یادگیری چه حداقل هایی برای یادگیری این دوره نیازمند است.
      من در عنوان ذکر کردم آموزش CSS3 پس باید فقط موارد مربوط به CSS3 بیان شود.

  5. سلام ممنون از سایت بسیار زیبایتان خدا قوت…آقا چرا طراحی سایت را از اولیش شروع نمیکنید یا راهنمایی کنید که ما از کجا باید شروع کنیم..من عاشق طراحی سایت هستم اما اینقدر دنیای عجیبی هست که آدم توش غرق میشه…
    اگه لطف کنید و بخشی رو توی سایت راه اندازی کنید که طراحی وب سایت رو از ابتدا شروع کنه یک دنیا ممنون میشیم…
    باز هم سپاسگذارم.

    1. سلام دوست عزیز شما با کتاب هایی که در سطح وب فراوان استفاده کنید.برای شروع تمام تگ های HTML تمرین کنید سپس CSS کار کنید تا به سطح مناسب از دانش طراحی سایت دست پیدا کنید انشاالله بعد از این دوره آموزشی قصد دارم مسابقه طراحی و آموزش طراحی با فتوشاپ و سپس تبدیل آن به کد به دوستان عزیز آموزش بدم تا آن زمان اگر تمرین کنید مطمئناً شما هم می توانید در مسابقه شرکت کنید
      موفق باشید.

  6. چطور میشه چند تصویر رو روی هم قرار داد؟ میخوام قالب رو حد الامکان با div طراحی کنم و از table استفاده نشه. فایل زیر کدهای قسمتی هست که میخوام تغییر بدم+یک تصویر برای نمونه

    ممنون میشم css مربوطه رو برام بنویسین و کدهای قالب رو ویرایش کنین
    دیدگاهم رو تایید نکنین چون یه درخواست شخصی هست و فقط همین راه رو برای ارتباط پیدا کردم.
    برای پاسخ توی سایتم کامنت بذارین و یا ایمیل بزنین

  7. ممنون من همه ی این کارا رو کردم و جواب گرفتم ولی اونایی که نتونستن موفق بشن ، بیان وبلاگ من یه ویدئو آموزشی براشون درست کردم . امیدوارم که مشکلتون حل بشه .

    http://ishare.blog.ir/post/Video-tutorial-for-installing-WordPress-on-Local-host

  8. سلام
    شما چند روز روز پیش یه پست زدید که طراحی وبسایت می خواهید آموزش بدید پس چی شد به همین زودی جا زدید خود اون پست رو هم نتونستم پیدا کنم فکر میکنم حذف شده
    اگه میخواهید ادامه بدید و آموزش هارو بزارید به من یه ایمیل بزنید اگه نه که مردم الاف شما نیستند
    با تشکر.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *