অনেক আগে থেকেই গ্রাডিয়েন্টের কাজটি ব্যাগ্রাউন্ডের ছবির মাধ্যমে করার প্রচলন চলে আসছি। ছবির মাধ্যমে গ্রাডিয়েন্ট বানানোটা রীতিমতো দিন দিন bad practise এ পরিনত হচ্ছে। টুটপ্লাসের নিচের ভিডিওতে ছোট প্রজেক্টটি দেখুন।
আরও পড়ুন:
>> CSS দিয়ে তৈরি করি নিজের ওয়েব সাইটের আকর্ষনীয় নেভিগেশন বার
>> সিএসএস (CSS) ১০টি টিপস
>>CSS টিউটরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)
নিচের প্রজেক্টটি দেখুন:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>gradient</title>
<style type="text/css" media="screen">
#container
{
height: 500px;
width: 600px;
margine: auto;
background: #e3e3e3;
background: -moz-linear-gradient(top,#cccccc 10% ,green,yellow);
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
আউটপুট:
-webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); এর ব্যাখ্যা:
১. (linear) : কি ধরনের গ্রাডিয়েন্ট হবে
২. (0 0 – or left-top corner) : অক্ষ কোথা থেকে শুরু হবে
৩. (0 100% – or left-bottom corner) : কোথায় শেষ হবে
৪. (from(red)) : প্রাথমিক রং
৫. (to(blue)) : শেষের রং
আরও পড়ুন:
>>সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) CSS পাঠ-২
>>ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস টিউটরিয়াল-৩
>>সুন্দর সুন্দর বক্স মডেল
বি:দ্র:
১. IE6/7/8, Opera, Safari 3, and Firefox 3 এ সিএসএস৩ এর এই কোড কাজ করবে না, আশা করা যায়-পরবর্তি ভাসর্নে এ সব ব্রাউজার আপগ্রেড হবে।
২. তাই ব্যাগ্রাউন্ডে সবসময় একটি সলিড রং ব্যবহার করা উচিত।
৩. উদাহরনে যেমন রং ব্যবহার করা হয়েছে তা অবশ্য বুঝানোর জন্য । মানানসই রং ব্যবহার করুন।
জটিল জিনিস।
তবে একটা প্রব্লেম হচ্ছে সিএসএস দিয়ে এরকম হাইফাই জিনিস অল্প ফাইল সাইজ করে বানানো গেলেও দেখায় সময় ব্রাউসার ব়্যাম খায় ম্যালা এবং পেজটা স্লো হয়ে যায়। 🙁
@সারিম, আসলে এটার পরিবর্তে যদি ছবি ব্যবহার করেন তাহলে আরও বেশি মেমরী খরচ হয়। সাইটের ব্যন্ডউইথ ও বেশি লাগে। দিন দিন মানুষের পিসির মান ভাল হচ্ছে তাই ওয়েবের চেহারাটাও বদলে যাচ্ছে। ধণ্যবাদ সারিম।
CSS3 দিয়ে কয়েকটি টেমপ্লেট আলোর ঝলকে দারুন হয়েছে ভাল ইনকাম হবে বলে মনে হয়।