illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش CSS (فصل یازدهم – جلسه دوم) : آشنایی با جلوه های ویژه ی CSS3

24437 ۲۰ اردیبهشت ۹۲

خاصیت transition


در این جلسه راجع به افکت ها و انیمیشن ها در css3 صحبت خواهیم کرد که با استفاده از css3 و البته بدون استفاده از جاوااسکریپت ، فلش یا جی کوئری ،چگونه بتوانیم افکتها و انیمشینهای حرکتی جالب را بر روی عناصر صفحه وبمان اعمال کنیم.
قاعده کلی یک افکت در css3 به این صورت است که ابتدا باید تعیین کنیم افکت قرار است چه تغییراتی ایجاد کند، و دوم اینکه در چه مدت زمانی ان تغییرات باید انجام شود. (مدت زمان اجرای افکت).
قاعده کلی به شکل زیر است

property : خصوصیتی که افکت بر آن اعمال میشود.
duration : مدت زمان اجرای افکت.

نکته : دقت کنید که اگر مدت زمان تعیین نشود، هیچ اتفاقی نخواهد افتاد زیرا مدت زمان پیشفرض 0 ثانیه است. در ضمن باید از واحد های زیر برای تعیین مدت زمان استفاده کرد.


مثال : کد html

کد css

در مثال بالا تعیین کرده ایم که در صورتی که نشانگر موس بر روی تگ div قرار گرفت عرض آن در مدت 2ثانیه به 400px تغییر کند.
به یاد داشته باشید اگر بیش از یک property دارید که میخوایید افکت بر آن ها اعمال شود باید افکت ها را با استفاده از , از هم جدا کنید : مثال

البته زمانی از , برای جدا کردن property ها استفاده میشود که زمان اجرای آن ها متفاوت باشد ( مانند مثال بالا) و اگرهمه ی مقادیر آن propertyها شبیه به هم باشد به جا اوردن نام property از مقدار all استفاده می شود. : مثال

افکت های پیشرفته تر


در مثال های قبل فقط از دو مقدار استفاده کردیم با اینکه خصوصیت transition میتواند چهار مقدار بگیرد و قاعده کلی ان به شکل زیر است :

timing-function : افکت های از پیش تعیین شده توسط css3 برای تقسیم زمان، که یکی از مقادیر زیر را می پذیرد :

delay : مدت زمان تاخیر در اجرای افکت.

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

مثال بالا تعیین می کند که افکت به مدت دوثانیه بر روی عرض المنت پس از 1ثانیه تاخیر اجرا شود.

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 42 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    با عرض سلام وخسته نباشید اگه میشه قسمت css را تکمیل کنید آموزشش را و همانطور که قبلا گفته بودید آموزش ساخت قالب از صفر رو شروع کنید خیلی ممنون ! من از خیلی وقت منتظرم

    • ‏‏
      سجاد دریس(۷ خرداد ۱۳۹۲)

      سلام.
      آموزش ها رو دارم قرار میدم.
      طراحی قالب هم چشم موقش که برسه اونم میذارم.

    • ‏‏
      رها امیر چرمهینی(۷ خرداد ۱۳۹۲)

      سلام اقای دریس
      و تشکر ازبابت جواب
      اما بالاخره و بعد از یک ماه سرچ جوابم رو پیدا کردم اونکه باید عرض با درصد تعریف بشه که مسلمه
      اما به این طراحی ها میگن responsive که با المنتهای media در اندازه های عرض مختلف تعریف میشه حالا خواهشم اینه اگه برای شما مقدوره واطلاعی دارین در این زمینه یه اموزش مختصر بنویسید
      که در دو عرض متفاوت چگونگی نوشتن و تعریف media در css رو توضیح بده ؟

      با تشکر وارزوی توفیق

      • ‏‏
        سجاد دریس(۷ خرداد ۱۳۹۲)

        سلام.
        طراحی responsive فرق میکنه با طراحی با مقدار %،
        وقتی از مقدار درصد استفاده میکنیم، با تغییر اندازه مرورگر حتی 1px بازم کل اندازه های بقیه المنتا تغییر میکنه.
        اما در responsive تعیین میکنیم که مثلا اگه اندازه مرورگر 1024*768 بود یا کوچیکتر(برای تبلت ها و موبایل ها) اندازه به مقدار مشخصی تغییر کنه. که با استفاده از media قابل انجامه.
        البته الان بیشتر responsive رو با % انجام میدن، یعنی هم از media استفاده میکنن هم اندازها با % تعریف میشه، تا همیشه، وقتی اندازه مرورگر تغییر کنه، قالب به درستی نمایش داده بشه.
        منتظر ادامه آموزش css باشید. روش media رو براتون کامل توضیح خواهم داد.

        • ‏‏
          رهاامیر چرمهینی(۱۱ خرداد ۱۳۹۲)

          با سلام اگه امکان داره یدونه بنر اسلاید شو هم که هم بصورت خودکار اسلاید بشه و هم دکمه next & previous داشته باشه با html و css بصورت کامل بنوسید
          با تشکر وارزوی توفیق

        • ‏‏
          سجاد دریس(۱۱ خرداد ۱۳۹۲)

          سلام.
          برای آموزش طراحی قالب در نظر گرفتم. همچین چیزی رو

  • ‏‏

    قربونت برم سجاد جون
    خوب بود من اینا رو از w3schools یاد گرفتم خوشحال شدم که مثال های خوبی گذاشتی
    تنها چیزی من مشکل دارم همین animation هست نمیتونم بسازم
    ولی اینا رو بلدم
    ممکنه توی 7learn همکارت بشم چون به جی کوئری
    مسلطم و خیلی چیز ها از طراحی وب میدونم میخوام آموزش بزارم همه ببینن ولی قبلش میخوام php یاد بگیرم

    • ‏‏
      لقمان آوند(۱ خرداد ۱۳۹۲)

      فرم درخواست همکاری رو پر کنید دوست عزیز …

    • ‏‏
      سجاد دریس(۲ خرداد ۱۳۹۲)

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

  • ‏‏
    عرفان(۱ خرداد ۱۳۹۲)

    ممنون الان فعلا در حال یادگیری زبان پی اچ پی هستم بعد از اون حتما …

  • ‏‏
    عرفان(۲ خرداد ۱۳۹۲)

    ممنون داداش سجاد عاشقتم یه کدی دیدم انمیشن هست
    روش کار کردم و یاد گرفتم
    چشم ثبت نام میکنم ولی الان امتحانات هست نمیتونم درست بیام فیلم آموزشی ضبط کنم

    • ‏‏
      سجاد دریس(۷ خرداد ۱۳۹۲)

      سلام.
      اینم آموزش ایجاد انیمشین.

      چندتا مثال هم گذاشتم اخر پست حتما به دردت میخورن

  • ‏‏

    سلام
    مرسی از آموزش ها عالی بود .
    یه سوال، بهتر واسه انیمشن از css استفاده کنیم یا jquery؟ جواب هرکدوم بود مزیتش نسبت به اون یکی چیه ؟ خودم فکر می کنمcss.

    • ‏‏
      وحید صالحی(۲۵ مرداد ۱۳۹۲)

      css توی ایجاد انیمیشن محدودیت داره و برای ایجاد انیمیشن های ساده خوبه در حالی که در جی کوئری بواسته پلاگین هایی که داره دست طراح رو برای ایجاد خلاقیت خیلی باز میزاره البته ویژگی انیمیشن در css3 ارئه شد و هنوز جای رشد داره ولی در کل css و جی کوئری رابطه بسیار خوب و نزدیکی دارن که ترکیب این 2 باهم فوق العاده میشه…

  • ‏‏

    یه سوال کلی که تو مثالهاتون بهش برخوردم اینه که مثلا تو همین مثال چرا تو فایل css برای سلکتور div که کلاس box تعریف شده به صورت :
    div .boxتعریف شده؟؟ چرا به صورت box. خالی تعریف نشده؟؟؟ا ا جلسات قبلی به این مشکل برخوردم … اگه میشه منو راهنمایی کنید .
    با تشکر

    • ‏‏
      سجاد دریس(۱۴ شهریور ۱۳۹۲)

      سلام
      استایلی که با کلاس .box بتعریف میشه به همه ی تگ هایی که دارای کلاس box باشند اعمال میشه
      اما div.box فقط بر روی تگ های div دارای کلاس box اعمال میشه.

  • ‏‏

    سلام .برای من کد transition کار نمی کنه ……
    لطفا این کد ساده ای که قرار میدم رو نگاه کنید و اشکالمو لطفا بگید …
    html:

    و کد css:


    الان میخوام وقتی که موس روی جدول رفت تغییر عرض بده ولی اینکار انجام نمیشه!! :sad: نوشتن من مشکل داره؟؟؟ میشه بگید کجاش؟؟

    • ‏‏
      سجاد دریس(۱۷ شهریور ۱۳۹۲)

      بفرمایید اینم از کدهای صحیح :

      • ‏‏

        دستت درد نکنه … نوشتنامون که با هم فرق نداشت …موندم چرا ج نمیداد ….

  • ‏‏

    با سلام، ضمن تشکر از وبسایت خوبتون،
    من میخوام با کلیک روی دکمه next تصویرم عوض بشه و چند ثانیه طول بکشه، اما هر ترانزیشنی که دادم نشد، ممنون میشم اگه راهنمایی بفرمایید.

    • ‏‏
      کیوان علی محمدی(۲۳ شهریور ۱۳۹۲)

      بهتره از افکت های جی کوئری استفاده کنید.

      • ‏‏

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

      • ‏‏

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram