• slide 0

    کاملترین دوره آموزش PHP به زبان فارسی !

  • slide 1

    آموزش فروشگاه ساز Open Cart - مقدمه

  • slide 2

    وردپرس - ایجاد شورتکد و دکمه اختصاصی در ادیتور - قسمت اول

  • slide 3

    LivIcons : آیکون ها زنده!

  • slide 4

    9 استایل زیبا برای CheckBox با CSS3


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

میلاد حیدری ۳۰ تیر ۹۱ 10,142 بازدید

سلام دوستان ، امروز قصد داریم یک انیمیشن خیلی کوتاه با CSS3 را با یکدیگر ایجاد نمائیم که اگر این روش را یاد بگیرد می توانید به راحتی شروع به رسم نموداری با CSS3 نمائید .

قبل از اینکه وارد مبحث آموزش شویم  بهتر است در ابتدا خروجی را به شما نشان دهیم:

کلیک نمائید !!!

همانطور که خروجی را مشاهده نمودید ، در این بخش قصد داریم این انیمیشن کوتاه را به شما دوستان یاد دهیم .

در ابتدا برای عنصر div یک استایل تعریف می کنیم :

  • radius : این کد که برابر با 5 می باشد برای مشخص کردن خمیدگی گوشه ها کاربرد دارد.

سپس یک کد هم برای div می نویسیم ،زمانی که اشاره گر ماوس روی شکل ما قرار گرفت :

این کد نشان می دهد وقتی که اشاره گر ماوس روی شکل قرار گرفت طول آن به 500 ارتقاع یابد و از لحاظ ظاهری ، رنگ نیز تغییر کند.

حال وقت تعیین سرعت شروع نمودار می باشد :

ease : در ابتدا سرعت کم ، سپس زیاد و مجددا کم می شود :

linear : با همان سرعتی که شروع می شود ، خاتمه پیدا می کند :

ease-in : دارای سرعت شروع کندی می باشد :

ease-out : دارای سرعت پایان کندی می باشد :

ease-in-out : سرعت شروع و پایان کند می باشد :

نکته : ما در این قسمت چون می خواستیم 5 رده بندی سرعت را نمایش دهیم ، آنها را در id های تعریف نمودیم ، اما اگر شما بخواهید میتوانید بدون تعریف کردن id یا class این کار را انجام دهید ، برای اینکار کافیست این 5 ویژگی را در قابل transition انجام دهید.

حال وقت فراخوانی کد استایل ما می باشد :

نکته : ما در این قسمت ، اندازه سرعت را برابر با 3 ثانیه قرار داده ایم .
نکته : برای رسم اشکال فوق می توانستیم از keyframes نیز  استفاده نمائیم . در قسمت های بعدی مثال هایی را در رابطه با این دستور خواهیم زد.

اگر براتون جالب بود پس کلیک بر روی پلاس وان ، یک نظری هم بدهید

لینک دانلود PDF مطالب برای کاربران VIP در دسترس است . شما هم می توانید عضو VIP شوید .
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها

تاکنون 29 دیدگاه برای این مطلب مطرح شده است . نظردهی برای این مطلب بسته شده است .
  • ‏‏

    سلام.
    آقا میلاد یه سوال داشتم.
    خصوصیت display در CSS چه کاری رو انجام میده؟
    ممنون میشم جواب بدید. :?:

    0
    • ‏‏
      میلاد حیدری(۱ مرداد ۱۳۹۱)

      این خاصیت برای نحوه نمایش عنصر ما استفاده می شود

      این خاصیت دارای سه پارامتر می باشد :

      display : none : اگر این خاصیت را استفاده نمائید ، عنصر شما پنهان می باشد.
      display :block : این خاصیت معمولا برای منوها استفاده می شود منوی هایی که در گوشه بعضی از سایت ها دیده می شود
      display : inline : با این خاصیت مثلا می توانید یک منوی افقی ایجاد نمائید

      اگر متوجمه نشدید بگوید تا مثال هایی بزنم

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

      شیوه نمایش تگ رو تعیین می کنه . مثلا مقدار none میگه که تگ مخفی باشه . اینجا رو ببینید .

      0
  • ‏‏

    background-color : black این بکراند رو سیاه می کنه من می خوام عکسم سیاه سفید شه !!!!

    0
    • ‏‏
      میلاد حیدری(۱ مرداد ۱۳۹۱)

      یک دستور برای بگکرداند دو رنگی به صورت گرادینت فکر میکنم باشه ولی الان یادم نیست ، یادم اومد بهتون میگم

      0
  • ‏‏

    متوجه شدم ممنونم.
    :wink:

    0
  • ‏‏

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

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

      سلام
      فرض می کنیم سه داده در دیتابیس با اندازه های 30 ، 70 و 100 دارید . این مقادبر رو از دیتابیس دریافت میکنید (کوئری میزنید) . درصد هر داده رو نسبت به کل حساب میکنید . مثلا درصد داده اول 30 تقسیم بر 200 میشه 15 درصد . در اندازه ستون ها از این درصد استفاده کنید .

      0
  • ‏‏

    تو مطمئنی این نموداره ؟

    0
  • 0
    1
    0
    0
    X

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

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

    ورود به سایت

    ورود سریع از طریق اکانت یاهو/جیمیل شما
    Username :
    Password :
    Remember ?  

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

    عبارت :