খাঁটি HTML/CSS3 দিয়ে যেভাবে তৈরি করবেন একটি আধুনিক রিবন ব্যানার ন্যাভিগেশন বার

() translation by (you can also view the original English article)

CSS3 দিন দিন যতটা জোরালো হয়ে উঠছে এবং ব্যাপকভাবে সমর্থন পাচ্ছে, তততাই গ্রাফিক্স ছাড়া মজার মজার আধুনিক ডিজাইন তৈরি করার জন্য এক নব দিগন্ত উন্মুক্ত করে দিচ্ছে! সাম্প্রতিক একটি প্রজেক্টের জন্য, আমি সিদ্ধান্ত নিলাম যে, দেখি শুধুমাত্র CSS3 ব্যবহার করে ডিজাইনের কেন্দ্রে একটি রিবন ব্যানার তৈরি করতে পারি কিনা। এই টিউটোরিয়ালে দেখাবো কিভাবে আমি এটাকে সম্ভব করে তুলেছি,

ফলাফল হিসাবে, এটি আসলে বেশ সহজ, শুধুমাত্র সহজ, শব্দার্থিক HTML এবং CSS3 এর কিছু জাদুকরী ট্রিক্স ব্যবহার করে আপনি এটি করতে পারেন, border-width প্রোপার্টির জাদুকে ধন্যবাদ। একমাত্র সতর্কীকরণঃ আরও অন্যান্য নতুন CSS3 টেকনিকের সাথে, এটাও IE ব্রাউজারগুলোতে কিছুটা নড়বড়েভাবে দেখায়...যেটা আমরা টিঊটোরিয়ালের শেষে শনাক্ত করতে পারি।

যেভাবে করবেনঃ

১ম ধাপঃ ন্যাভিগেশন লিঙ্কসমূহ

আমরা যেহেতু ন্যাভিগেশন লিঙ্ক বার তৈরি করতে চাচ্ছি, তাই প্রথমে আমরা সাধারন অনানুক্রমিক লিস্টের [ul] সাথে লিঙ্ক [a] দিয়ে শুরু করতে পারি। এই পদ্ধতিটি হচ্ছে মার্কআপ ল্যাঙ্গুয়েজের একটি অন্যতম বিল্ডিং ব্লক; বিভিন্ন উপাদানের তালিকা তৈরি ও একই রকম স্টাইল দেয়ার জন্য আদর্শ। যেমনটি আমরা এখানে করে দেখাচ্ছিঃ

কোড:

1
2	<!-- the navigation links -->
3
4	<ul id="navigation">
5	<li><a href="#">link 1</a></li>
6	<li><a href="#">link 2</a></li>
7	<li><a href="#">link 3</a></li>
8	<li><a href="#">link 4</a></li>
9	</ul>

আমরা আমাদের লিঙ্কগুলোকে আনুভূমিকভাবে পেইজের মধ্যখানে ভাসমান অবস্থায় রাখতে চাই, তাই আমরা নিন্মলিখিত স্টাইলগুলো সিএসএসের মাধ্যমে স্টাইলশিটে যোগ করবোঃ

আমরা, প্রথমে লিস্ট আইটেম থেকে বুলেট স্টাইল মুছে দিতে চাই, এবং এদের প্রত্যেককে তাঁদের বামদিকে ভাসমান রাখতে চাই, এবং একইসাথে প্রত্যেকের মাঝখানে কিছু খালি জায়গাও রাখতে চাই।


#navigation li {
        list-style: none;
        display: block;
        float: left;
        margin: 1em;
}

এরপর, আমরা লেখার নিচে কিছুটা ছায়া যোগ করবো, এবং লিঙ্কের নিচ থেকে আন্ডারলাইন মুছে দিবো, এবং লেখার নির্দিষ্ট কালার ও সাইজ যোগ করবো।


#navigation li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0 .5em;
}

আমি অবশ্য এর সাথে হালকা একটু অ্যানিমেশন ইফেক্টও যোগ করতে চাই যখন মাউস কার্সরটিকে এর উপর নিয়ে যাওয়া হবেঃ

1
2	#navigation li a:hover {
3	margin-top: 2px;
4	}

এটার পাশে তারা যোগ করার জন্য আমি প্রত্যেক লিঙ্কের ভিতর ডানপাশে একটি HTML সত্তা যোগ করতে চাই ✭ (যা দেখতে ✭ এর মত)। এটা সম্পূর্ণই সাজানোর জন্য এবং এতে অন্য কোনও কার্যকারিতা নেই।

এই পর্যায়ে, আমরা ইতিমধ্যেই একটি সুন্দর ব্যবহারোপযোগী ন্যাভিগেশন লিঙ্ক সেকশন পেয়ে গেছি যেটা আমরা একটি পাতায় যোগ করতে পারি। কিন্তু আমরা এই বিকাশ পর্যায়টিকে অব্যাহত রাখতে চাই যতক্ষন না আমরা একটি সুন্দর রিবন তৈরি করে তার মধ্যে এই লিঙ্কগুলো রাখতে পারছি।

২য় ধাপঃ রিবন ব্যানার

যেই border-width টেকনিকটা আমরা ব্যবহার করতে যাচ্ছি, সেটার জন্য অতিরিক্ত ৪ টি এলিমেন্ট HTML মার্কআপে যোগ করতে হবে। যদিও অতিরিক্ত এলিমেন্ট যোগ করা আদর্শ নয়, কিন্তু এটি পরিশেষে সম্ভবত অতিরিক্ত গ্রাফিক্স যোগ করা থেকে দ্রুত লোড হবে। এবং আমরা এটাকে যতটা সম্ভব সহজ রাখতে চাই।

প্রথমে, আমরা লিঙ্কের চারপাশে একটি কন্টেইনার এলিমেন্ট যোগ করবো। এটা আমাদেরকে সব ব্যানার এলিমেন্টগুলো একসাথে রাখার জন্য একটি নির্দিষ্ট প্রস্থ বসানোর সুবিধা করে দিবেঃ

1
2	<div id="navigation_container">
3
4	<!-- the navigation links -->
5
6	<ul id="navigation">
7	<li><a href="#">✭ link 1</a></li>
8	<li><a href="#">✭ link 2</a></li>
9	<li><a href="#">✭ link 3</a></li>
10	<li><a href="#">✭ link 4</a></li>
11	</ul>
12
13	<!-- end container -->
14	</div>

আমরা নির্দিষ্ট প্রস্থ ও কন্টেইনার এলিমেন্ট গুলোকে মাঝখানে রাখার জন্য নিন্মলিখিত স্টাইলগুলো যোগ করবোঃ


#navigation_container {
   margin: 0 auto;
   width: 960px;
}

এরপর, আমরা একটি আয়তক্ষেত্র যোগ করবো যেটা কিনা রিবনের মূল বডি সেকশন হবেঃ

1
2	<div id="navigation_container">
3
4	<!-- the ribbon body -->
5
6	<div class="rectangle">
7
8	<!-- the navigation links -->
9
10	<ul id="navigation">
11	<li><a href="#">link 1</a></li>
12	<li><a href="#">link 2</a></li>
13	<li><a href="#">link 3</a></li>
14	<li><a href="#">link 4</a></li>
15	</ul>
16
17	<!-- end container -->
18	</div>

আমরা এবার রিবনের ব্যাকগ্রাউন্ড তৈরির জন্য নিন্মলিখিত স্টাইল যোগ করবো। একটি z-index বসাবো যার ভ্যালু হবে 500, কারণ আমাদের আয়তক্ষেত্রটিকে ত্রিভুজের উপর বসাতে হবে যেটা পরবর্তীতে আমরা তৈরি করব। আমি Firefox এবং -webkit/IE9 এর জন্য -moz-box-shadow এবং box-shadow উভয়টিকেই যোগ করেছি। কারণ এ দুটো ভ্যালু যোগ না করলে উক্ত ব্রাউজার দুটিতে ডিজাইনটি কাজ করবে নাঃ


.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   z-index: 500; /* the stack order: foreground */
   margin: 3em 0;
}

এবার, আমরা রিবনের দুই পাশে ত্রিভুজাকৃতি যোগ করবোঃ


<div id="navigation_container">

<!-- the left side of the fork effect -->
   <div class="l-triangle-top"></div>
   <div class="l-triangle-bottom"></div>

<!-- the ribbon body -->

      <div class="rectangle">

<!-- the navigation links -->

   <ul id="navigation">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
   </ul>

<!-- end the ribbon body -->
   </div>

<!-- the right side of the fork effect -->
         <div class="r-triangle-top"></div>
         <div class="r-triangle-bottom"></div>

<!-- end container -->
</div>

সব শেষে, আমরা কিছু border-width এর যাদু যোগ করবো। এটার মূল চাবিকাঠি হচ্ছে এলিমেণ্টের উভয় দিকে border-color টির জন্য transparent ভ্যালু বসানো, শুধুমাত্র নিচের দিকটি ছাড়া (উপরের ত্রিভুজের জন্য) এবং উপরের দিকটি ছাড়া (নিচের ত্রিভুজের জন্য)। তারপর, আমরা border-width বসাবো 50px। এটা একটি সমদ্বিবাহু ত্রিভুজ তৈরি করবে, যেটা আমরা পরবর্তীতে রিবনের মূল কাঠামোর পিছনে বসাবোঃ


.l-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: 1px;
   left: -50px;
}

.l-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -40px;
   left: -150px;
}

আমরা ডান পাশের জন্যও একই পদ্ধতি অনুসরণ করবোঃ


.r-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: right;
   right: -45px;
   top: -107px;
}

.r-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: right;
   top: -149px;
   right: -145px;
}

এবং আমরা সম্পন্ন করেছি! এটা Firefox এবং Webkit ব্রাউজার সমূহে সঠিকভাবে প্রদর্শন করবে। এইসব নতুন CSS3 properties এর ব্যবহারের ক্ষেত্রে IE আসলে কুখ্যাতিপূর্ণভাবে খারাপ, তাই এটি সেখানে সঠিকভাবে প্রদর্শন করে না। কিন্তু আমরা বেশ কিছু কাস্টম স্টাইলশিট ব্যবহার করে IE তে এর নিকটতম উপায়ে প্রদর্শন করতে পারি।

IE8 এবং IE9 এর জন্য, আমরা কিছু কাস্টম পজিশনিং রুলস যোগ করবো "ie.css" নামক নতুন স্টাইলশিটেঃ


.l-triangle-top {
  left: 150px;
	top: 50px;
}
.l-triangle-bottom {
	left: 50px;
	top: -12px;
}
.r-triangle-top {}
.r-triangle-bottom {
	top: -169px;
}

শুধুমাত্র নিরাপদ ডেভেলপিংয়ের জন্য (এবং যেহেতু আমরা প্রগতিশীল বর্ধিতকরণে বিশ্বাসী), আমাদের IE7 এর জন্যও একটি ফিক্স যুক্ত করতে হবে, যেটা আমাদের পেইজের হেড সেকশনে যুক্ত হবে অথবা আলাদা IE7 স্টাইলশিটে। এটাকে ফিক্সিংয়ের জন্য আমার পছন্দ হচ্ছে IE8 ব্রাউজারের নিচের ব্রাউজারগুলোর জন্য ত্রিভুজগুলো লুকিয়ে ফেলা। IE7 এ browser-width property সাপোর্ট করে, কিন্তু খালি জায়গা রাখার ক্ষেত্রে কিছু সমস্যা আছে। এটা আপনার উপর নির্ভর করে যে আপনি IE7 এ এলিমেন্টসগুলো পজিশনিংয়ের জন্য অতিরিক্ত সময় ব্যয় করবেন কি করবেন নাঃ


<!--[if lt ie8]>

.r-triangle-bottom,
.r-triangle-top,
.l-triangle-bottom,
.l-triangle-top {
   display: none;
}
<![endif]-->

এবার মুড়িয়ে নিন

ব্যাকগ্রাউন্ড ইমেজটি শুধুমাত্র মজা করার জন্য - আপনি আপনার নিজস্ব ব্যাকগ্রাউন্ড ইমেজ যোগ করতে পারেন ও নিজের মত করে তৈরি করে নিতে পারেন...অথবা উপরের সব কোড একসঙ্গে নিয়ে আপনার নিজস্ব ডিজাইনে যোগ করে নিতে পারেন। কিন্তু সর্বোপরি আপনার যদি অতি আগ্রহ থাকে, তাহলে এটা হচ্ছে মূল CSS যা এই ইমেজগুলোকে যুক্ত করেছেঃ


html{
background: #77d5fb url('bottom_bg.jpg') bottom center no-repeat;
}

body{
background: transparent url('top_bg.png') top center no-repeat;
width: 100%; 
height: 100%;
margin: 0 0;
}

ক্রেডিটঃ ইমেজগুলো iStockPhoto থেকে নেয়া - আমরা নিচের ডেমোটির সঙ্গে দ্বীপের ছবিটি রাখি নি, কিন্তু আপনি চাইলে এখান থেকে নিয়ে নিতে পারেন।

এটুকুই!

আশা করি, আপনারা এটা উপভোগ করেছেন! মনে রাখবেন এটা হচ্ছে একেবারে নতুন এক সেট টেকনিক...তাই আপনার লক্ষ্য যদি মানুষের জানামতে সমস্ত ব্রাউজারের উপর ১০০% স্থায়িত্ব হয়ে থাকে, তাহলে এখানে ব্যাকগ্রাউণ্ড চিত্র ব্যবহারের আরও বেশ কিছু স্থিতিশীল উপায় আছে। নীচে আপনার কমেণ্ট ও প্রশ্ন রাখতে পারেন। ;)

রিবন অথবা ফোল্ডিং ইফেক্ট তৈরির জন্য আরও পড়ুনঃ

একটি থ্রিডি রিবন র‍্যাপ-এরাউণ্ড ইফেক্ট তৈরি করুন ( সাথে একটি ফ্রি পিএসডি)

আমি ভেবেছিলাম, জনপ্রিয় 3d Wrap-Around Ribbon effect নিয়ে তৈরি করা আর্টিকেলটি বেশ মজাদার হবে কারণ এটা এ বছর অনেক বেশী দেখা গেছে। আপনার ডিজাইনে গভীরতা নিয়ে আসতে এটি একটি চমৎকার পদ্ধতি হতে পারে, এবং সম্পূর্ণ করাও বেশ সহজ।

এই পোস্টটি ঘুরে আসুন
তড়িৎ সমাধানঃ ব্যবহারিক সিএসএস আকৃতিসমূহ

ইদানীং একটি সাধারন ডিজাইন টেকনিক হচ্ছে ভাঁজ প্রবনতা তৈরি করা, যেখানে এটা দেখা যায় সেখানে মনে হয় heading টি যেন container এর পিছনে মুড়িয়ে আছে। এটা সাধারনত ছোট কিছু ইমেজের ব্যবহারের মাধ্যমে অর্জন করা হয়; তবে, CSS দিয়ে আমরা এই ইফেক্টটা খুব সহজেই অনুকরণ করতে পারি। কিভাবে করতে হয় তা আমি আপনাকে চার মিনিটের মধ্যে দেখাচ্ছি।

এই পোস্টটিতে ঘুরে আসুন

খাঁটি HTML/CSS3 দিয়ে যেভাবে তৈরি করবেন একটি আধুনিক রিবন ব্যানার ন্যাভিগেশন বার

১ম ধাপঃ ন্যাভিগেশন লিঙ্কসমূহ

২য় ধাপঃ রিবন ব্যানার

এবার মুড়িয়ে নিন

এটুকুই!

একটি থ্রিডি রিবন র‍্যাপ-এরাউণ্ড ইফেক্ট তৈরি করুন ( সাথে একটি ফ্রি পিএসডি)

তড়িৎ সমাধানঃ ব্যবহারিক সিএসএস আকৃতিসমূহ