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

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



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

حالت های مختلف ایجاد گرادینت در CSS3 (بخش اول)

10561 ۱۲ شهریور ۹۱

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

gradient

نحوه ایجاد :

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

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

نکته : این ویژگی تنها یک مشکل بزرگ دارد ، و آن پشتیبانی نکردن بسیاری از مرورگر ها از IE می باشد .
نکته : بهترین حالت نمایش خاصیت های جدید در CSS3 در مرورگرهای Webkit همانند کروم می باشد.

یک مثال کلی از انواع گرادینت :

در ابتدا خروجی را مشاهده نمائید :

همانطور که خروجی را ملاحظه نمودید ، ما گرادینت های مختلفی را با استفاده از css3 ایجاد نموده ایم ، بعضی از این گرادینت ها به صورت شیشه ای مانند ایجاد شده اند ، برای ایجاد حالت شیشه ای از خاصیت rgba استفاده نموده ایم .

نکته : برای نمایش گرادیت در مرورگر های webkit از دستور webkit-gradient و در مرورگر فایرفاکس از دستور moz-linear-gradient استفاده می شود .

مثالی دیگر : ایجاد یک Box کاملا شیشه ای

شما می توانید با استفاده از css3 یک شی شیشه ای مانند تنها با چند خط کد ایجاد نمائید .

در بخش دوم این مطالب ، سعی خواهیم کرد چند مثال دیگر را برا شما بازگو نمائیم...

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

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

  • ‏‏

    ببخشید.من یه سوال داشتم چرا این+1 هایی که کدش رو در این سایت گذاشتین کار نمی کنند 😥 راستی سایت شما بهترین سایت و کاملترین در نوع خودش هست. 😳

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

      سلام
      کد مشکلی نداره دوست عزیز . با وی پی ان وارد بشید دکمه ها رو می بینید . مشکل از اینترنته !

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

    سلام.
    پس کو اِدامش آقا میلاد….. :sad:
    منتظریم :roll:

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

      سلام.
      آقا میلاد کی ادامه آموزشو میذارین؟

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

        فعلا به علت مسائل کاری سرم خیلی شلوغه ، باید ببینم کی میتونم قسمت دوم رو بنویسم!

  • ‏‏

    سلام
    ممنون از مطلبتون
    ولی یه سوال انحرافی داشتم که به بحث مربوط نمی شه
    میخواستم بدونم چطور با سی اس اس میشه کپی برداری از مطالب سایت رو ممنوع کرد؟؟
    اگر دیده باشید بعضی از وبلاگها و سایتها هستند که هیچ مطلب یا عکسی رو نمیشه ازشون کپی کرد
    یعنی کلا کلیک راست غیر فعاله
    ممنون میشم توضیح بدید

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

      سلام

      ممنون از لطفتون

      این کار رو با css انجام نمی دهند ، بلکه با جاوا اسکریپت این کار رو انجام می دهند ، توی فروم این سوال رو بپرسید تا پاسختان درج شود

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram