() translation by (you can also view the original English article)
মাসে দুইবার, আমরা Nettuts+ এর ইতিহাস জুড়ে আমাদের পাঠকদের কাছে জনপ্রিয় কিছু পোস্ট পুনরায় প্রকাশ করি। এই টিউটোরিয়ালটি প্রথম মে, ২০১০ সালে প্রকাশিত হয়েছিলো।
একসময়ের ব্যাকগ্রাউন্ড ইমেজ এবং আইকনগুলি এখন পুরনো প্লেইন CSS দিয়ে তৈরি করা যায়। যেহেতু মডার্ন ব্রাউজারগুলো বক্স শ্যাডো, গ্র্যাডিয়েন্ট, গোলাকার কোণ, টেক্সট শেডো এবং ফন্ট-ফেসের মত জিনিশগুলো বুঝতে পারে, তাই আমরা এখন ভিজ্যুয়াল এলিমেন্ট যেমন বাটন এবং অন্যান্য বিষয় তৈরি করতে এসব জিনিষের সুযোগ গ্রহণ করতে পারি! আমি আজকের ভিডিও টিউটোরিয়ালে আমি আপনাকে দেখাবো, কিভাবে এটা করবেন।
ভিডিও টিউটোরিয়াল
চূরান্ত কোড
1 |
|
2 |
<!DOCTYPE html> |
3 |
|
4 |
<html lang="en"> |
5 |
<head> |
6 |
<meta charset="utf-8"> |
7 |
<title>CSS3 Buttons</title> |
8 |
<style> |
9 |
|
10 |
/* CUSTOM FONT */
|
11 |
@font-face { |
12 |
font-family: 'EfonRegular'; |
13 |
src: url('font/EFON-webfont.eot'); |
14 |
src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg'); |
15 |
font-weight: normal; |
16 |
font-style: normal; |
17 |
}
|
18 |
|
19 |
body { |
20 |
width: 400px; |
21 |
margin: 200px auto; |
22 |
background: #666; |
23 |
}
|
24 |
|
25 |
.button { |
26 |
width: 400px; |
27 |
height: 100px; |
28 |
line-height: 100px; |
29 |
color: white; |
30 |
text-decoration: none; |
31 |
font-size: 50px; |
32 |
font-family: helvetica, arial; |
33 |
font-weight: bold; |
34 |
display: block; |
35 |
text-align: center; |
36 |
position: relative; |
37 |
|
38 |
/* BACKGROUND GRADIENTS */
|
39 |
background: #014464; |
40 |
background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C); |
41 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); |
42 |
|
43 |
|
44 |
/* BORDER RADIUS */
|
45 |
-moz-border-radius: 10px; |
46 |
-webkit-border-radius: 10px; |
47 |
border-radius: 10px; |
48 |
|
49 |
border: 1px solid #368DBE; |
50 |
border-top: 1px solid #c3d6df; |
51 |
|
52 |
|
53 |
/* TEXT SHADOW */
|
54 |
|
55 |
text-shadow: 1px 1px 1px black; |
56 |
|
57 |
/* BOX SHADOW */
|
58 |
-moz-box-shadow: 0 1px 3px black; |
59 |
-webkit-box-shadow: 0 1px 3px black; |
60 |
box-shadow: 0 1px 3px black; |
61 |
}
|
62 |
|
63 |
/* WHILE HOVERED */
|
64 |
.button:hover { |
65 |
background: #014464; |
66 |
background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853); |
67 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853)); |
68 |
}
|
69 |
|
70 |
/* WHILE BEING CLICKED */
|
71 |
.button:active { |
72 |
-moz-box-shadow: 0 2px 6px black; |
73 |
-webkit-box-shadow: 0 2px 6px black; |
74 |
}
|
75 |
/* FONT GLYPH (MOSTLY FOR FUN) */
|
76 |
.button:before { |
77 |
font-family: EfonRegular; |
78 |
content: 'v'; |
79 |
color: #09232F; |
80 |
font-size: 90px; |
81 |
float: left; |
82 |
margin-left: 35px; |
83 |
margin-right: -10px; |
84 |
text-shadow: 0 1px 0 #4190AF; |
85 |
}
|
86 |
|
87 |
</style> |
88 |
</head> |
89 |
<body> |
90 |
<a href="#" class="button"> Follow Me </a> |
91 |
</body> |
92 |
</html> |
পরিশিষ্ট
এটা সম্ভবত টুইটারের ফলো বাটনের জন্য একটি পাখির আইকন তৈরি করতে চেষ্টা করা। কিন্তু উদ্দেশ্য হচ্ছে, এই ইফেক্টটি সম্পূর্ণ CSS দিয়ে অর্জন করা! আপনি কি ভাবছেন?
