به سری آموزشی CSS پیشرفته خوش آمدید! ما در دوره ی قبلی CSS با مفاهیم پایه و اصلی CSS آشنا شدیم و حالا می توانیم یک طرح زیبای CSS را بسازیم اما نباید به همین حد قانع بود! ما می توانیم پا را فراتر از این حدود بگذاریم و CSS را به صورت پیشرفته تر بیاموزیم. هدف ما در این دوره نیز همین است! بحث امروز ما زیباسازی ظاهر حاشیه ها است.
حاشیه با زاویه گر
خصوصیت border-radius از خصوصیات جالب و کاربردی CSS است که به ما اجازه می دهد زاویه های گوشه های یک حاشیه را تعیین کنیم! به مثال زیر نگاه کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#rcorners1 {
border-radius:25px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}
#rcorners2 {
border-radius:25px;
border:2pxsolid#73AD21;
padding:20px;
width:200px;
height:150px;
}
#rcorners3 {
border-radius:25px;
background:url(https://www.w3schools.com/css/paper.gif);
background-position:lefttop;
background-repeat:repeat;
padding:20px;
width:200px;
height:150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners foran element withaspecified background color:</p>
<pid="rcorners1">Rounded corners!</p>
<p>Rounded corners foran element withaborder:</p>
<pid="rcorners2">Rounded corners!</p>
<p>Rounded corners foran element withabackground image:</p>
<pid="rcorners3">Rounded corners!</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
قسمت اول کد چنین مربعی را می سازد:
گوشه های گرد در یک مربع
در این مثال مقدار border-radius را روی 25 پیکسل قرار داده ایم و در آخر یک رنگ background نیز تعیین کرده ایم (سبز با کد 73AD21). اگر رنگ پس زمینه را برای این عنصر تعیین نکنیم و به جایش برای border رنگ و ضخامت خاصی قرار دهیم با قسمت دوم کد مواجه می شویم:
گوشه های گرد در یک مربع توخالی
و اگر به همین مثال یک تصویر پس زمینه بدهیم (دستوری مثل (background: url(paper.gif) با قسمت سوم کد مواجه می شویم:
گوشه های گرد در یک مربع با تصویر پس زمینه
نکته: دستور border-radius یک دستور خلاصه شده و ترکیبی از دستورات border-top-left-radius و border-top-right-radius و border-bottom-right-radius و border-bottom-left-radius است. بنابراین می توانیم این خمیدگی و گرد شدگی گوشه ها را به صورت جداگانه نیز تنظیم کنیم!
تنظیم جداگانه گوشه ها
همانطور که گفتیم دستور border-radius خلاصه شده ی 4 دستور است بنابراین 4 حالت مختلف مقدار دهی نیز دارد:
- مقدار دهی چهارگانه مانند
;border-radius: 15px 50px 30px 5px: این مقادیر از چپ به راست به ترتیب برای گوشه ی بالا سمت چپ، گوشه ی بالا سمت راست، گوشه ی پایین سمت راست و گوشه ی پایین سمت چپ هستند.
- مقدار دهی سه‌گانه مانند
;border-radius: 15px 50px 30px: این مقادیر از چپ به راست به ترتیب برای گوشه ی بالا سمت چپ، گوشه های بالا سمت راست و پایین سمت چپ، گوشه ی پایین سمت راست هستند.
- مقدار دهی دوگانه مانند
;border-radius: 15px 50px: مقدار اول برای گوشه های بالا سمت چپ و پایین سمت راست، و مقدار دوم برای گوشه های بالا سمت راست و پایین سمت چپ هستند.
- مقدار دهی تکی مانند
;border-radius: 15px: این مقدار برای هر چهار گوشه است.
اگر بخواهیم کد آن را پیاده سازی کنیم می نویسیم:
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
54
55
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#rcorners1 {
border-radius:15px50px30px5px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}
#rcorners2 {
border-radius:15px50px30px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}
#rcorners3 {
border-radius:15px50px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}
#rcorners4 {
border-radius:15px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Four values-border-radius:15px50px30px5px:</p>
<pid="rcorners1"></p>
<p>Three values-border-radius:15px50px30px:</p>
<pid="rcorners2"></p>
<p>Two values-border-radius:15px50px:</p>
<pid="rcorners3"></p>
<p>One value-border-radius:15px:</p>
<pid="rcorners4"></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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#rcorners1 {
border-radius:50px/15px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}
#rcorners2 {
border-radius:15px/50px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}
#rcorners3 {
border-radius:50%;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Elliptical border-border-radius:50px/15px:</p>
<pid="rcorners1"></p>
<p>Elliptical border-border-radius:15px/50px:</p>
<pid="rcorners2"></p>
<p>Ellipse border-border-radius:50%:</p>
<pid="rcorners3"></p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حاشیه های تصویری
ما می توانیم با استفاده از خاصیت border-image در زبان CSS به جای خط های ساده در حاشیه هایمان از تصاویر استفاده کنیم! این خصوصیت سه قسمت اصلی دارد:
- تصویری که می خواهید به جای خط ساده ی حاشیه قرار دهید.
- تصویر را از کجا قطع کنید.
- تعیین کنید که آیا قسمت وسط تصویر کشیده شود یا تکرار شود.
ما برای نمونه از تصویر زیر استفاده می کنیم:
تصویر نمونه ی ما به نام border.png
خصوصیت border-image تصویر را گرفته و به 9 قسمت تقسیم می کند. سپس گوشه های تصویر را روی گوشه های حاشیه قرار می دهد و بین گوشه ها را (بنابر انتخاب شما) تکرار کرده و یا می کِشد.
نکته: اگر می خواهید border-image برایتان کار کند باید حتما خصوصیت border را برای عنصر مورد نظرتان تعیین کرده باشید.
مثال زیر را ببینید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#borderimg {
border:10pxsolidtransparent;
padding:15px;
border-image:url(https://www.w3schools.com/css/border.png)30round;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p>Here,the middle sections of the image are repeated tocreate the border:</p>
<pid="borderimg">border-image:url(border.png)30round;</p>
<p>Here isthe original image:</p><img src="https://www.w3schools.com/css/border.png">
<p><strong>Note:</strong>Internet Explorer10,andearlier versions,donotsupport the border-image property.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال تصویر را تکرار کرده ایم (عدد 30 و round در کد بالا) اما می توانیم قسمت میانی را به جای تکرار کردن، بکِشیم!
به مثال زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#borderimg {
border:10pxsolidtransparent;
padding:15px;
border-image:url(https://www.w3schools.com/css/border.png)30stretch;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p>Here,the middle sections of the image are stretched tocreate the border:</p>
<pid="borderimg">border-image:url(border.png)30stretch;</p>
<p>Here isthe original image:</p><img src="https://www.w3schools.com/css/border.png">
<p><strong>Note:</strong>Internet Explorer10,andearlier versions,donotsupport the border-image property.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: مرورگر Internet Explorer 10 و نسخه های قبل تر آن از خصوصیت border-image پشتیبانی نمی کنند.
همچنین باید بدانید که دستور border-image در واقع خلاصه شده ی دستورات border-image-source و border-image-slice و border-image-width و border-image-outset و border-image-repeat است.
برای آنکه تفاوت بسیار مهم در نحوه ی تقطیع تصویر را ببینید ما انواع روش های قطع کردن آن را در کد زیر نوشته ایم تا ببینید این تفاوت ریز می تواند چه تفاوت ظاهری بزرگی ایجاد کند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#borderimg1 {
border:10pxsolidtransparent;
padding:15px;
border-image:url(https://www.w3schools.com/css/border.png)50round;
}
#borderimg2 {
border:10pxsolidtransparent;
padding:15px;
border-image:url(https://www.w3schools.com/css/border.png)20%round;
}
#borderimg3 {
border:10pxsolidtransparent;
padding:15px;
border-image:url(https://www.w3schools.com/css/border.png)30%round;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<pid="borderimg1">border-image:url(border.png)50round;</p>
<pid="borderimg2">border-image:url(border.png)20%round;</p>
<pid="borderimg3">border-image:url(border.png)30%round;</p>
<p><strong>Note:</strong>Internet Explorer10,andearlier versions,donotsupport the border-image property.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تاثیر تقطیع متفاوت تصویر در حاشیه ها
همانطور که می بینید با عوض کردن جزئی دستور، شاهد تفاوت های بزرگی خواهیم بود.
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟