() translation by (you can also view the original English article)
কখনও কি ভেবে দেখেছেন যে ওয়েব ডিজাইনে কিভাবে একটি বিশেষ ইফেক্ট তৈরি করা হয়। এবং কয়েকটি ক্লিকের মাধ্যমে ডিজাইনটি বড় করলেই দেখতে পাবেন, অথোর এখানে বেশ কিছু ছায়া, বর্ডার, গ্র্যাডিয়েন্ট ইত্যাদি যোগ করেছেন। অতীতে এমন ইফেক্ট কোনও ইমেজকে ছোট ভাগে বিভক্ত বা স্লাইসিং করে এবং তা ব্যাকগ্রাউন্ড ইমেজ হিসেবে সেট করেই অর্জন করা যেতো। সৌভাগ্যের ব্যাপার যে, আমরা আজকে CSS3 দিয়ে একইরকম ইফেক্ট তৈরি করতে সমর্থ হই। এখন, এই সিম্পল ইফেক্টের জন্য কোডটি যদিও কিছুটা ক্লান্তিকর মনে হতে পারে, কিন্তু এটা ফলাফলের দিক থেকে ঠিকই আছে। আজকের লেখা ও তড়িৎ ভিডিওতে আমরা এই বিষয়টিকেই দেখবো!
ভিডিও ভার্শন
অথবা এই স্ক্রিনকাস্টটি কি Screenr.com এ দেখতে চান?
টেক্সট ভার্শন
এটা আশ্চর্যজনক যে এত সহজ কিছু বিষয়ে অনেক কোড প্রয়োজন, কিন্তু এটা অপ্রয়োজনীয় নয়, এবং এসব ইফেক্ট আপনি ভবিষ্যতে ব্যবহার করার জন্য স্নিপেট আকারে সাজিয়ে রাখতে পারেন।
ধাপ ১। মার্কআপ টি তৈরি করুন
আমাদের প্রকল্পটিকে যতটা সম্ভব কাট এবং পেস্ট করার জন্য, আমরা কেবল একটি ফাঁকা div দিয়ে কাজ করছি। একটি নতুন index.html ফাইল তৈরি করুন এবং নিম্নলিখিত কোডগুলো পেস্ট করুন:
1 |
|
2 |
<body>
|
3 |
<div id="box"> |
4 |
|
5 |
</div>
|
6 |
</body>
|
ধাপ ২। ক্যানভাস তৈরি করুন
পরবর্তীতে, আমরা body এলিমেন্টের জন্য কিছু মৌলিক স্টাইলিং যোগ করব। এটি শুধুমাত্র উপস্থাপনার জন্য, এবং সহজে সরানো যাবে। আপনার হেডারের স্টাইল ট্যাগের মধ্যে যোগ করুন:
1 |
|
2 |
/* Nothing special here. Just the canvas. */
|
3 |
body { |
4 |
width: 500px; |
5 |
margin: 60px auto 0; |
6 |
background: #666; |
7 |
}
|
ধাপ ৩। বক্স স্টাইলিং
এখন, আমরা একটি বাক্স তৈরি করব, এবং প্রস্থ ও উচ্চতা ঠিক করব।
1 |
|
2 |
#box { |
3 |
/* Just a box */
|
4 |
width: 500px; |
5 |
height: 500px; |
6 |
}
|
ধাপ ৪। গোলাকার কোণ
আমরা সবাই এখন CSS এর গোলাকার কোণ সম্পর্কে জানবো। চলুন, আরও এগিয়ে তা বাস্তবায়ন করা যাক।
1 |
|
2 |
/* Rounded corners */
|
3 |
-moz-border-radius: 3px; |
4 |
-webkit-border-radius: 3px; |
5 |
border-radius: 3px; |
লক্ষ্য করুন যে আমরা মজিলা এবং ওয়েবকিট সংস্করণের সাথে "border-radius," এর চূড়ান্ত কোড সরবরাহ করছি।
ধাপ ৫। বর্ডারের রং
মজিলার "-moz-border-*-colors" একটি কার্যকর উপায় আছে। এটি বর্ডারের জন্য একটি অসীম সংখ্যা রং সেট করতে আমাদের অনুমতি দেয়। একটি সূক্ষ্ম "ডবল বর্ডার" ইফেক্ট অর্জন করতে, চলুন এই উপায়টি বাস্তবায়ন করা যাক।
1 |
|
2 |
/* Set a base border and color */
|
3 |
border: 2px solid white; |
4 |
|
5 |
/* Multiple border colors in Gecko */
|
6 |
-moz-border-top-colors: #292929 white; |
7 |
-moz-border-right-colors: #292929 white; |
8 |
-moz-border-bottom-colors: #292929 white; |
9 |
-moz-border-left-colors: #292929 white; |
লক্ষ্য করুন, কিভাবে আমাদের সরবরাহ করা রঙয়ের সাথে বর্ডারের প্রস্থ এক হয়ে গেছে যা আমরা পূর্বেই সেট করেছি (2px)। এছাড়াও, প্রতিটি হেক্স মানের পরে কমা স্থাপন করবেন না; আমি প্রথমে এই ভুল করেছিলাম!
ধাপ ৬। ওয়েবকিটের জন্য ক্ষতিপূরণ
আমার জানামতে, ওয়েবকিট বর্তমানে border-colors সমর্থন করে না, যদিও সম্ভবতঃ এটা ভুল হতে পারে যদি ভুল হয়, তবে দয়া করে একটি মন্তব্য করে আমাকে জানাবেন! যাই হোক, আমরা Safari এবং Chrome এর জন্য এই ইফেক্টটি অনুকরণ করতে box-shadow ব্যবহার করবো।
1 |
|
2 |
/* Compensate for Webkit. Not as nice, but works. */
|
3 |
-webkit-box-shadow: 0 -1px 2px #292929; |
উল্লেখ্য, প্রদত্ত মানগুলির যথাক্রমে X অফসেট, Y অফসেট, ব্লার এবং ছায়া রঙ উল্লেখ করুন। Y অফসেট হিসাবে -1px দিয়ে, আমরা ছায়াটিকে উপরে ঠেলে দিতে পারি।
ধাপ ৭। CSS ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট
চূড়ান্ত পদক্ষেপ হল আমাদের বাক্সের জন্য একটি সূক্ষ্ম পটভূমির গ্রেডিয়েন্ট সরবরাহ করা। যাইহোক, CSS গ্রেডিয়েণ্ট সমর্থন করে না এমন ব্রাউজারের জন্য একটি সলিড রং প্রদর্শন নিশ্চিত করা আবশ্যক।
1 |
|
2 |
/* Background subtle gradient, with fallback to solid color */
|
3 |
background: #e3e3e3; |
4 |
background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3); |
5 |
background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3)); |
দুর্ভাগ্যবশত, মোজিলা এবং ওয়েবকিট গ্রেডিয়েন্টের সিনট্যাক্সের সাথে পুরোপুরি একমত নয়, যা প্রক্রিয়াটিকে অতিরিক্ত জ্বালাময় করে তোলে। যদি এটি খুব বেশি ভ্রান্তিকর হয়, তবে আপনি CSS3 Please নামে একটি সার্ভিস ব্যবহার করে প্রত্যেক ব্রাউজারের জন্য আলাদা সিনট্যাক্স জেনারেট করে নিতে পারেন; এটা বেশ স্বস্তিদায়ক।
আপনি সম্পন্ন করেছেন!
এটা আশ্চর্যজনক; আমাদের চূড়ান্ত চিত্রটি দেখুন, আমরা আসলে কি করেছি এটা বলা বেশ কঠিন! কিন্তু এটি একটি ভাল জিনিস; সূক্ষ্মতা হচ্ছে সর্ব দিক থেকে নকশার অন্যতম চাবিকাঠি। পড়া / দেখার জন্য ধন্যবাদ!
চূড়ান্ত কোড
1 |
|
2 |
/* Nothing special here. Just the canvas. */
|
3 |
body { |
4 |
width: 500px; |
5 |
margin: 60px auto 0; |
6 |
background: #666; |
7 |
}
|
8 |
|
9 |
#box { |
10 |
/* Just a box */
|
11 |
width: 500px; |
12 |
height: 500px; |
13 |
|
14 |
/* Rounded corners */
|
15 |
-moz-border-radius: 3px; |
16 |
-webkit-border-radius: 3px; |
17 |
border-radius: 3px; |
18 |
|
19 |
border: 2px solid white; |
20 |
|
21 |
/* Multiple border colors in Gecko */
|
22 |
-moz-border-top-colors: #292929 white; |
23 |
-moz-border-right-colors: #292929 white; |
24 |
-moz-border-bottom-colors: #292929 white; |
25 |
-moz-border-left-colors: #292929 white; |
26 |
|
27 |
/* Compensate for Webkit. Not as nice, but works. */
|
28 |
-webkit-box-shadow: 0 -1px 2px #292929; |
29 |
|
30 |
/* Background subtle gradient, with fallback to solid color */
|
31 |
background: #e3e3e3; |
32 |
background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3); |
33 |
background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3)); |
34 |
}
|
