در این قسمت از آموزش CSS3 مبحث Gradient در سایت وب سیتی آموزش داده شده است و همین طور دلیل استفاده از webkit- و moz- و … نیز توضیح داده شده است .
Gradient چیست ؟؟
معنی Gradient می شود شیب ( سطح شیب دار ) ولی توی دنیای کامپیوتر ما به تصویری که از طیف رنگ های مختلف به صورت شیب دار به وجود میاد بهش گرادینت می گیم .
webkit- و ms- و moz- و o- چی هستن و برای چی استفاده می کنیم ؟
webkit- یه موتور چیدمان هست که امکان نمایش دادن صفحات رو برای یه مرورگر فراهم میکنه اگه به زبان ساده تر بگم یعنی این وب کیت یه موتوری هست که مروگر با اون کار می کنه تا صفحات یا همون وب سایت هارو به ما نشون بده .
حالا شاید براتون سوال باشه که چرا ما باید دوباره از عبارت موتور مروگر استفاده بکنیم ؟؟ در جواب باید بگم وقتی یه کدی رو می نویسیم بعضی از مروگر ها نیاز دارن که این کدها رو شناسایی کنن و ما با نوشتن این عبارت در اول کدها به مرورگر کمک می کنیم که به راحتی اون کد رو شناسایی بکنه .
در مروگر کروم و سافاری چون از موتر چیدمان وب کیت استفاده می کنند .پس باید از webkit- استفاده کنیم .
برای مروگر فایرفاکس از عبارت moz- استفاده می کنیم .
برای مروگر اپرا از o- استفاده می کنیم .
برای اینترنت اکسپلورر از ms- استفاده می کنیم .
نحوه استفاده از Linear-Gradient در CSS3 :
سینتکس گرادینت خطی به صورت زیر است :
background: linear-gradient(direction , color1 , color2 , ...);
در کد بالا به جای direction باید جهت را انتخاب کنید و بعد به ترتیب رنگ های مورد نظر خودتون رو بنویسید توضیحات بیش تر در فیلم آموزش CSS3 داده شده است .
کد HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>وب سیتی</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="box"></div> </body> </html>
کد CSS :
.box{ width:500px; height: 500px; background: -webkit-linear-gradient(top ,red , gold , deeppink , blue); background: -ms-linear-gradient(top ,red , gold , deeppink , blue); background: -o-linear-gradient(top ,red , gold , deeppink , blue); background: -moz-linear-gradient(top ,red , gold , deeppink , blue); }
می تونید یه بازه رنگ رو چندین بار تکرار کنید برای این کار از کد زیر استفاده می کنیم :
repeating-linear-gradient(red , yellow , green );
اگر کد بالارو اجرا کنید خواهید دید که رنگ های قرمز ، زرد ، سبز تکرار می شوند .
Radial Gradient در CSS3 :
این نوع گرادینت باعث ایجاد شکل هایی مثل یه پرتو یا دایره مانند می شود .
به صورت زیر از این کد استفاد می کنیم :
radial-gradient(red , gold , green);
توضیحات بیش تر در فیلم آموزشی داده شده است .
سلام بهش احتیاج داشتم مرسی
سلام
مفید بود مرسی