به قسمت سوم از سری آموزشی CSS پیشرفته خوش آمدید! بحث امروز ما gradient ها (تلفظ اصلی: گِرِیدیِنت) است. gradient ها عناصر رنگی هستند که به صورت نرم به یکدیگر تبدیل می شوند. (در مثال ها خواهید دید). ما در CSS دو نوع از این gradient ها را داریم:
- gradient های linear (خطی): این gradient ها به صورت مورب به جهات مختلف (مانند بالا، پایین، راست و چپ) می روند.
- gradient های radial (شعاعی): یک مرکز دارند و به صورت شعاع برای آن مرکز حرکت می کنند.
بیایید هر دو نوع را بررسی کنیم.
انواع گرادینت در CSS
gradient های خطی
برای ایجاد این نوع از gradient ها نیاز داریم که حداقل 2 رنگ مختلف را انتخاب کرده باشیم. کار gradient این است که بین این 2 رنگ به صورت نرم انتقال رنگی انجام دهد. ساختار کلی این دستور به شکل زیر است:
|
|
background-image:linear-gradient(direction,color-stop1,color-stop2,...);
|
در کد بالا direction به معنی جهت است؛ یعنی اینکه gradient از کدام سمت به کدام سمت برود! حالت پیش فرض این مقدار بالا به پایین است. در مثال زیر سعی کرده ایم بین قرمز و زرد یک انتقال رنگی انجام دهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(red,yellow);/* کد گرادینت */
}
</style>
</head>
<body>
<h1>Linear Gradient-Top toBottom</h1>
<p>Thislinear gradient starts at the top.It starts red,transitioning toyellow:</p>
<div id="grad1"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازگرادینتهاپشتیبانینمیکنند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
هشدار: Internet Explorer 9 و نسخه های قبل تر آن از گرادینت ها پشتیبانی نمی کنند.
در مثال بعدی می خواهیم این جهت را تغییر دهیم تا از چپ به راست تغییر کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(toright,red,yellow);/* کد گرادینت */
}
</style>
</head>
<body>
<h1>Linear Gradient-Left toRight</h1>
<p>Thislinear gradient starts at the left.It starts red,transitioning toyellow:</p>
<div id="grad1"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازگرادینتهاپشتیبانینمیکنند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که گفتیم می توانیم این نوع از gradient ها را به صورت مورب نیز استفاده کنیم.
در مثال زیر گفته ایم که gradient از بالا و چپ شروع شده و سپس در نقطه ی پایین و راست تمام می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(tobottomright,red,yellow);/* کد گرادینت */
}
</style>
</head>
<body>
<h1>Linear Gradient-Diagonal</h1>
<p>Thislinear gradient starts at top left.It starts red,transitioning toyellow:</p>
<div id="grad1"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازگرادینتهاپشتیبانینمیکنند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
استفاده از زاویه ها
اگر می خواهید کنترل بیشتری روی gradient خود داشته باشید، می توانید به جای استفاده از جهات اصلی مانند بالا و پایین و … از زاویه ها استفاده کنید. در این صورت ساختار کلی این دستور به شکل زیر خواهد بود:
|
|
background-image:linear-gradient(angle,color-stop1,color-stop2);
|
این زاویه، زاویه ی بین خطی افقی و خط gradient است. به مثال زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:100px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(0deg,red,yellow);/* کد اصلی گرادینت */
}
#grad2 {
height:100px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(90deg,red,yellow);/* کد اصلی گرادینت */
}
#grad3 {
height:100px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(180deg,red,yellow);/* کد اصلی گرادینت */
}
#grad4 {
height:100px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(-90deg,red,yellow);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Linear Gradients-Using Different Angles</h1>
<div id="grad1"style="text-align:center;">صفردرجه</div><br>
<div id="grad2"style="text-align:center;">نوددرجه</div><br>
<div id="grad3"style="text-align:center;">صدوهشتاردرجه</div><br>
<div id="grad4"style="text-align:center;">منفینوددرجه</div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازگرادینتهاپشتیبانینمیکنند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شما به دو رنگ محدود نیستید
شما می توانید بین چندین نقطه ی مختلف انتقال رنگی انجام دهید و نیازی به تعیین دو نقطه نیست، بلکه می توانید نقاط بسیار بیشتری تعریف کنید. در مثال زیر یک gradient از بالا به پایین تعیین کرده ایم که بین چندین رنگ مختلف انتقال رنگی انجام می دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(red,yellow,green);/* کد اصلی گرادینت */
}
#grad2 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(red,orange,yellow,green,blue,indigo,violet);/* کد اصلی گرادینت */
}
#grad3 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(red10%,green85%,blue90%);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Linear Gradients-Multiple Color Stops</h1>
<h3 dir='rtl'>سهرنگمختلف(بافاصلهییکسانبینرنگها)</h3>
<div id="grad1"></div>
<h3 dir='rtl'>هفترنگمختلف(بافاصلهییکسانبینرنگها)</h3>
<div id="grad2"></div>
<h3 dir='rtl'>سهرنگمختلف(بافاصلهیغیریکسانبینرنگها)</h3>
<div id="grad3"></div>
<pdir='rtl'><strong>هشدار:</strong>زمانیکهدرصدیبرایفاصلهیبینرنگهاتعییننکنید،آنهابهطورپیشفرضبافاصلههاییکسانکنارهمقرارمیگیرند</p>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بعدی رنگ های رنگین کمان را به صورت یک gradient پیاده سازی کرده ایم و روی آن متنی نیز نوشته ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:55px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:linear-gradient(toright,red,orange,yellow,green,blue,indigo,violet);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<div dir='rtl'id="grad1"style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
پسزمینهبهصورتgradient
</div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شفافیت (transparency)
نیازی ندارید که حتما 2 رنگ را به صورت دیداری و واضح تعیین کنید! می توانیم از قابلیت transparency و رنگ های ()rgba استفاده کنیم تا gradient خود را به آرامی به سمت شفافیت کامل (transparency) ببریم. در مثال زیر یک gradient داریم که از چپ و به صورت کاملا شفاف شروع شده است، سپس به آرامی تبدیل به رنگ قرمز می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:200px;
background-image:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1));/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Linear Gradient-Transparency</h1>
<p>Toadd transparency,we usethe rgba()functiontodefine the color stops.The last parameter inthe rgba()functioncan beavalue from0to1,andit defines the transparency of the color:0indicates full transparency,1indicates full color(no transparency).</p>
<div id="grad1"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تابع repeating-linear-gradient
می توانید با استفاده از تابع ()repeating-linear-gradient یک gradient را چندین بار و پشت سر هم تکرار کنید. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:repeating-linear-gradient(red,yellow10%,green20%);/* کد اصلی گرادینت */
}
#grad2 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:repeating-linear-gradient(45deg,red,yellow7%,green10%);/* کد اصلی گرادینت */
}
#grad3 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:repeating-linear-gradient(190deg,red,yellow7%,green10%);/* کد اصلی گرادینت */
}
#grad4 {
height:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:repeating-linear-gradient(90deg,red,yellow7%,green10%);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Repeating Linear Gradient</h1>
<div id="grad1"></div>
<pdir='rtl'>یکgradientدرزاویهی45درجهکهازقرمزشروعشدهوباسبزبهپایانمیرسد.</p>
<div id="grad2"></div>
<pdir='rtl'>یکgradientدرزاویهی190درجهکهازقرمزشروعشدهوباسبزبهپایانمیرسد.</p>
<div id="grad3"></div>
<pdir='rtl'>یکgradientدرزاویهی90درجهکهازقرمزشروعشدهوباسبزبهپایانمیرسد.</p>
<div id="grad4"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Gradient های شعاعی
همانطور که گفتیم این نوع gradient ها مانند شعاع های یک دایره اند و به صورت دایره ای پخش می شوند. برای این نوع از gradient ها نیز باید حداقل دو نقطه ی رنگی تعیین کنید. ساختار کلی این دستور به شکل زیر است:
|
|
background-image:radial-gradient(shape size at position,start-color,...,last-color);
|
شکل پیش فرض این نوع از gradient ها بیضی شکل است (نه دایره ی کامل). بیایید چند مثال از آن حل کنیم تا بیشتر با آن آشنا شویم. ابتدا می خواهیم یک gradient شعاعی بسازیم که فاصله ی رنگ ها در آن یکسان باشد (حالت پیش فرض):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:150px;
width:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:radial-gradient(red,yellow,green);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Radial Gradient-Evenly Spaced Color Stops</h1>
<div id="grad1"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالا با تغییر دادن همین مثال می توانیم بگوییم که فاصله ی بین رنگ ها یکسان نباشد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:150px;
width:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:radial-gradient(red5%,yellow15%,green60%);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Radial Gradient-Differently Spaced Color Stops</h1>
<div id="grad1"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تعیین دایره به جای بیضی
همانطور که گفتیم شکل پیش فرض Gradient های شعاعی بیضی است اما ما میتوانیم این مسئله را تغییر دهیم و با قرار دادن circle در آرگومان اول کد این gradient را از حالت بیضی خارج کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:150px;
width:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:radial-gradient(red,yellow,green);/* کد اصلی گرادینت */
}
#grad2 {
height:150px;
width:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:radial-gradient(circle,red,yellow,green);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Radial Gradient-Shapes</h1>
<h2>شکلبیضیکهحالتپیشفرضاست</h2>
<div id="grad1"></div>
<h2><strong>شکلدایره:</strong></h2>
<div id="grad2"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همچنین می توانیم به راحتی اندازه ی این gradient ها را با مقادیر زیر عوض کنیم:
- closest-side (نزدیک ترین – پهلو)
- farthest-side (دور ترین – پهلو)
- closest-corner (نزدیک ترین – گوشه)
- farthest-corner (دور ترین – گوشه)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:150px;
width:150px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:radial-gradient(closest-sideat60%55%,red,yellow,black);/* کد اصلی گرادینت */
}
#grad2 {
height:150px;
width:150px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:radial-gradient(farthest-sideat60%55%,red,yellow,black);/* کد اصلی گرادینت */
}
#grad3 {
height:150px;
width:150px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:radial-gradient(closest-cornerat60%55%,red,yellow,black);/* کد اصلی گرادینت */
}
#grad4 {
height:150px;
width:150px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:radial-gradient(farthest-cornerat60%55%,red,yellow,black);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Radial Gradients-Different size keywords</h1>
<h2 dir='rtl'>نزدیکترین-پهلو</h2>
<div id="grad1"></div>
<h2 dir='rtl'>دورترین-پهلو:</h2>
<div id="grad2"></div>
<h2 dir='rtl'>نزدیکترینگوشه:</h2>
<div id="grad3"></div>
<h2 dir='rtl'>دورترین-گوشه(حالتپیشفرض):</h2>
<div id="grad4"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تابع repeating-radial-gradien
تابع ()repeating-radial-gradien به ما اجازه می دهد که gradient را تکرار کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#grad1 {
height:150px;
width:200px;
background-color:red;/* این قسمت از کد برای مرورگر هایی است که از گرادینت پشتیبانی نمی کنند. */
background-image:repeating-radial-gradient(red,yellow10%,green15%);/* کد اصلی گرادینت */
}
</style>
</head>
<body>
<h1>Repeating Radial Gradient</h1>
<div id="grad1"></div>
<pdir='rtl'><strong>هشدار:</strong>Internet Explorer9ونسخههایقبلترآنازقابلیتگرادینتپشتیبانینمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدوارم درس آموزش گرادینت در css برایتان مفید بوده باشد.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟