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



visibility  
mode_comment   ۷

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

gradient

نحوه ایجاد :

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

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back
info نکته :

این ویژگی تنها یک مشکل بزرگ دارد ، و آن پشتیبانی نکردن بسیاری از مرورگر ها از IE می باشد .

info نکته :

بهترین حالت نمایش خاصیت های جدید در CSS3 در مرورگرهای Webkit همانند کروم می باشد.

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

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

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

info نکته :

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

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

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

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

comment دیدگاه کاربران
حسین

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

لقمان آوند

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

سجاد دریس

سلام.
پس کو اِدامش آقا میلاد….. 🙁
منتظریم 🙄

سجاد دریس

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

میلاد حیدری

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

مهرداد

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

میلاد حیدری

سلام

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

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.