متفاوت ترین مجله اینترنتی ...

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

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. Pesare-Nime-Shab می‌گوید

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

  3. احمدینا می‌گوید

    ممنون ، پیش نمایش پست مشکل دارد

  4. suntafa می‌گوید

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

    با تشکر

    1. علی پامناري می‌گوید

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

  5. عرفان می‌گوید

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

    1. علی پامناري می‌گوید

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

  6. جواد می‌گوید

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

    1. علی پامناري می‌گوید

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

  7. Ali می‌گوید

    عالی بود ممنون

  8. محمد علی می‌گوید

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

    http://up.iran-forum.ir/uploads/file1/1331480755.zip

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

  9. hamid می‌گوید

    عالی بود موفق باشید

  10. احسان می‌گوید

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

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

  11. afy می‌گوید

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

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.

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