در این پست شما را با انواع مختلفی از ایجاد گرادینتها در CSS3 آشنا خواهیم ساخت ، همانطور که میدانید ایجاد گرادینت تا سالیان نه چندان دور در صفحات وب غیر ممکن بود ، اما HTML5 و CSS3 این افسانه را به واقعیت تبدیل کردند ، دیگر با استقاده از هر یک از این دو زبان میتوانید به راحتی گرادینت خود را به دلخواه رنگ و اندازه و شیب ایجاد نمائید .
نحوه ایجاد :
در ابتدا بهتر است الگورینم این کار را برای شما بازگو نمائیم:
در ابتدا یک رنگ صاف در پس زمینه شی که میخواهیم گرادینت ایجاد نمائیم ، درست میکنیم ، سپس یک رنگ دیگر (که این رنگ میتواند همان رنگ اصلی باشد و یا میتواند رنگ دیگری باشد ) به صورت نیمه شفاف در وسط و یا هر نقطه دیگر شی خود ایجاد مینمائیم . دو ویژگی جالبی که CSS3 برای طراحی گرادینت ایجاد کرده است این است که سبک شیب میتواند متمایز با رنگ اصلی باشد ، همچنین برای ایجاد شیب نیاز نیست ریاضی مهندسی پاس کرده باشید!
این ویژگی تنها یک مشکل بزرگ دارد ، و آن پشتیبانی نکردن بسیاری از مرورگر ها از IE میباشد .
بهترین حالت نمایش خاصیتهای جدید در CSS3 در مرورگرهای Webkit همانند کروم میباشد.
یک مثال کلی از انواع گرادینت :
در ابتدا خروجی را مشاهده نمائید :
همانطور که خروجی را ملاحظه نمودید ، ما گرادینتهای مختلفی را با استفاده از css3 ایجاد نموده ایم ، بعضی از این گرادینتها به صورت شیشه ای مانند ایجاد شده اند ، برای ایجاد حالت شیشه ای از خاصیت rgba استفاده نموده ایم .
برای نمایش گرادیت در مرورگرهای webkit از دستور webkit-gradient و در مرورگر فایرفاکس از دستور moz-linear-gradient استفاده میشود .
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .5)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(50%, rgba(0, 0, 0, .2)), to(rgba(255, 255, 255, .1))); background: -moz-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2) 50%, rgba(0, 0, 0, .2) 50%, rgba(255, 255, 255, .1));
مثالی دیگر : ایجاد یک Box کاملا شیشه ای
شما میتوانید با استفاده از css3 یک شی شیشه ای مانند تنها با چند خط کد ایجاد نمائید .
در بخش دوم این مطالب ، سعی خواهیم کرد چند مثال دیگر را برا شما بازگو نمائیم...
سلام
ممنون از مطلبتون
ولی یه سوال انحرافی داشتم که به بحث مربوط نمی شه
میخواستم بدونم چطور با سی اس اس میشه کپی برداری از مطالب سایت رو ممنوع کرد؟؟
اگر دیده باشید بعضی از وبلاگها و سایتها هستند که هیچ مطلب یا عکسی رو نمیشه ازشون کپی کرد
یعنی کلا کلیک راست غیر فعاله
ممنون میشم توضیح بدید
سلام
ممنون از لطفتون
این کار رو با css انجام نمی دهند ، بلکه با جاوا اسکریپت این کار رو انجام می دهند ، توی فروم این سوال رو بپرسید تا پاسختان درج شود
سلام.
پس کو اِدامش آقا میلاد….. 🙁
منتظریم 🙄
سلام.
آقا میلاد کی ادامه آموزشو میذارین؟
فعلا به علت مسائل کاری سرم خیلی شلوغه ، باید ببینم کی میتونم قسمت دوم رو بنویسم!
ببخشید.من یه سوال داشتم چرا این+1 هایی که کدش رو در این سایت گذاشتین کار نمی کنند 😥 راستی سایت شما بهترین سایت و کاملترین در نوع خودش هست. 😳
سلام
کد مشکلی نداره دوست عزیز . با وی پی ان وارد بشید دکمه ها رو می بینید . مشکل از اینترنته !