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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش css : طریقه ایجاد گرادینت (جلسه سوم)

12545 ۱۴ آبان ۹۲

با سلام خدمت همه سولرنی های عزیز. با ادامه آموزش طراحی گرادینت با استفاده از css3 در خدمت شما هستم.

در جلسه پیش تونستیم گرادینت linear افقی و عمودی و مورب رو با استفاده از css3 ایجاد کنیم. درضمن یادگرفتیم که چطوری جهت شروع گرادینت را با استفاده از مقادیر مختلف تعیین کنیم. در این جلسه، یک مقدار دیگه ای رو که در جلسه پیش یادم رفت معرفیش کنم رو با هم می آموزیم به علاوه طریقه طراحی گرادینت مدوّر یا radial.

درصد پیشرفت رنگ های گرادینت

اگر دقت کرده باشید گرادینت هایی که تا حال یادگرفتیم ایجاد کنیم،رنگ های استفاده شده همگی دارای عرض یا ارتفاع مساوی هستند، مثلا گرادینتی که از 3رنگ ایجاد می کردیم، عرض div به طور مساوی بر سه رنگ تقسیم می شد (هر رنگ تقریبا 33 درصد div رو پر می کرد).

حال اگر بخواهیم که مثلا یک رنگ 10درصد، و رنگ دوم 10 درصد دیگر و رنگ سوم 80 درصد باقی را پر کند باید به چه صورت عمل کنیم؟!

برای اینکار در کنار تعیین رنگ، درصد آن را نیز تعیین می کنیم، که قاعده کلی آن به شکل زیر خواهد بود

برای نمونه به کد css زیر دقت کنید : (کد htmlمان کد جلسه قبلی است)

نتیجه کد در مرورگر :

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

به طور دقیقتر، عرض این div  300 پیکسل است که 100% در نظرگرفته می شود، ما در کد فوق معیین کرده ایم که از نقطه ی  0 تا 10% با رنگ قرمز، از نقطه ی  20% با رنگ سبز و از نقطه 50% الی 100% با رنگ زرد پر می شود.

خب همانطور که گفتیم، 0 تا 10% مربوط به  رنگ قرمز ، 20% الی 50% مربوط به رنگ سبز است، پس ناحیه ی 10% تا 20% که بین دو رنگ قرمز و سبز است چه می شود؟!

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

ما به علاوه اینکه با استفاده از % می توانیم مقدار سطح میحطی رنگی را تعیین کنیم، از واحدهای دیگر نیز می توانیم استفاده کنیم(واحد های px, pc, em و ...)

توجه داشته باشید که اگر برای مقادیر x,x2 ,x3 واحدی تعریف نکنیم هم واحد با عنصرشان خواهند شد(معمولا به طور پیشفرض pixel است).

اگر بخواهیم کدی که با استفاده از % نوشتیم با استفاده از واحد بنویسم به شکل زیر خواهد بود.

نتیجه اش نیز همانند تصویر قبلی خواهد بود، حال درمورد این اعداد بیشتر صحبت می کینم :

همانطور که می دانید، عرض divمان 300 پیکسل است. عدد 30 به آن معناست که از 0px تا 30px برابر با رنگ قرمز، از 60px به بعد رنگ سبز، و از 150px به بعد را رنگ زرد پر می کند.

نکته :

با تغییر پیشوند webkit به moz یا o  یا ms می توانید گرادینت linear را در مرورگرهای موزیلا و یا اوپرا و یا اینترنت اکسپلورر نیز فعال کنید.

دقت داشته باشید که مرورگر ie از ورژن 10+ از گرادینت ها پشتیبانی می کنند. و برای فعال سازی گرادینت در ie10- باید از hackهای مخصوصش استفاده کنیم.

radial gradients

حال نوبت به گرادینت های مدوّر یا تابشی می رسد، طریقه کدنویسی این نوع گرادینت ها نیز بسیار ساده است، کد زیر قاعده عمومی را نشان می دهد.

مقادیر color که عمومی هستند و از هر نوع مقداردهی برای رنگها استفاده کنید،

مقادیر startfrom نیز مانند linear هستند، یعنی ، چهار جهت اصلی و چهار جهت فرعی(زاویه ها) + مقدار center که مقدار پیشفرض نیز هست.

البته در نظر داشته باشید که ما در اینجا از مقدار درجه ای (deg) نمی توانیم استفاده کنیم و بجای آن از دو مقدار startfrom1 startfrom2 می توانیم استفاده کنیم که مختصات نقطه شروع گرادینت و قاعده عمومی آن به شکل زیر است :

چند کد نمونه : (استفاده از جهات اصلی)

استفاده از جهات فرعی :

استفاده از مختصات :

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

در روش مختصات دهی از همه واحدها می توانید استفاده کنید.

درضمن می توانید درصد پیشروی هر رنگ را نیز مانند گرادینت های linear تعیین کنید (دقیقا چیزهایی که در ابتدای این جلسه گفتیم.)

به علاوه اینکه می توانید با تغییر پیشوند webkit این نمونه گرادینت ها را در سایر مرورگرها فعال کنید.

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

موفق باشید/.

نکته :

یک مجموعه 20 تایی از گرادینت های زیبا روهم براتون تهیه و با همه مرورگرها نیز سازگارشون کردم. امیدوارم که بدردتون بخوره.

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

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

  • ‏‏
    رضا ساطع بیدگلی(۱۴ آبان ۱۳۹۲)

    چه قد با حال
    انگیزم برای یاد گرفتن CSS دو برابر شد .

  • ‏‏
    حسین محمدی(۱۴ آبان ۱۳۹۲)

    سلام…
    property ی content چه کاری رو انجام میده؟؟؟

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

      برای قرار دادن یک محتوا (متن،کلمه و یا حرف) قبل و یا بعد از تگ ها استفاده میشه . اینجا و اینجا می تونی مثالشو ببینی .

  • ‏‏

    سلام
    ممنون سجادجان مث همیشه فوق العاده بود… 😉

  • ‏‏

    را های ساده تری هم هست:
    http://www.colorzilla.com/gradient-editor
    😉

  • ‏‏

    سلام
    یه سوال سیستم گرادینت های این مدلی چطوریه؟؟ و اونایی که from و to دارند؟؟
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));

    • ‏‏
      سجاد دریس(۱۵ آبان ۱۳۹۲)

      سلام.
      این طریقه کدنویسی برای مرورگرهای قدیمی کروم هست.

  • ‏‏

    عالی است

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram