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

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

نحوه ایجاد :

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

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

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

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

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

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 یک شی شیشه ای مانند تنها با چند خط کد ایجاد نمائید .

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

نویسنده

میلاد حیدری

19 ساله، ساکن تهران و دانشجوی مهندسی کامپیوتر ؛طراح وب سایت ، سئو کار با سابقه کاری ، مطالعه بسیار زیاد در امر سئو و برندینگ اینترنتی و آشنایی با زبان های همچون PHP,JavaScript,html5,CSS3, Jquery ، با زبان انگلیسی آشنایی کامل دارم و شدیدا طرفدار استقلال و فرهاد مجیدی هستم.