ওয়েবপেজ ডিজাইন

আমাদের ওয়েবসাইট লেআউট বানানো এবং সাজানো শেষ। এবার আমরা এতে কিছু ডিজাইন করব।

Typography

Typography বলতে লেখার রূপ বুঝায়। আমাদের সাইটের লেখা গুলোর জন্য এখন কিছু রুল লিখব।

আমাদের সাইটে মোট "লেখা" যুক্ত এলিমেন্ট ব্যবহার করা হয়েছেঃ <p>, <h1>, <h2> এবং <a>। এগুলোর জন্য নিচের রূল গুলো লিখুন।

/* Typography */
h1 {
	color: yellowgreen;
}
h2 {
	color: gray;
}
p
{
	color: #555;
}
a {
	color: skyblue;
	transition: all .2s ease-in-out 0s;
}
a:hover {
	color: deepskyblue;
}
h1, h2, p, a {
	font-family: solaimanlipi, kalpurush;
}

font-family প্রোপার্টি দিয়ে ফন্ট সিলেক্ট করে দেয়া যায়। এখানে ফন্ট হিসেবে solaimanlipi এবং kalpurush দেয়া হয়েছে। কারণ এ দুটো ফন্টের একটি না একটি সাধারনত সবার কম্পিউটারেই থাকে।

এখানে h1, h2, p, a এর স্থানে body দিলেও সাইটের সব ফন্ট পরিবর্তন হবে।

transition: all .2s ease-in-out 0s; এটি একটি CSS3 প্রোপার্টি। এটি দিয়ে কোনো কিছুর প্রোপার্টি স্মুথ ভাবে পরিবর্তন করতে ব্যবহার করা হয়। আমরা এখানে <a> এলিমেন্টের color প্রোপার্টির জন্য এ কোডটি ব্যবহার করব। এতে লিঙ্ক সমূহের উপর মাউস নিয়ে গেলে রং স্মুথ ভাবে পরিবর্তন হবে।

এখানে all বলতে যে সব প্রোপার্টি স্মুথ করা সম্ভব সব গুলোতে এ রুল প্রয়োগ বুঝাচ্ছে।

.2s বুঝায় যে, সব পরিবর্তন সমূহ করা হবে ০.২ সেকেন্ড সময়ের মধ্যে।

ease-in-out বুঝায় পরিবর্তনের ধরনটা কিরকম হবে। ease-in-out দিলে পরিবর্তন শুরু হবে ধীরে ধীরে, তারপর গতি বাড়বে, আবার পরিবর্তন শেষ হবে ধীরে ধীরে।

0s বলতে, এ পরিবর্তনের জন্য কোনো সময় অপেক্ষা (delay) করা হবেনা তা বুঝায়।

একবার প্রিভিউ দেখে মান গুলো পরিবর্তন করে দেখুন। তাহলে সব পরিষ্কার হবে।

Body তে পরিবর্তন

CSS এর বডি অংশে নিচের কোড গুলো যুক্ত বা পরিবর্তন লাগলে পরিবর্তন করুন।

	margin: 25px auto;
	width: 786px;
	box-shadow: 0 0 5px gray;

margin: 25px auto; এর অর্থ হল body এর top ও bottom এর margin হবে 25px এবং left ও right এর margin হবে auto। কোনো block এলিমেন্টে left এবং right এর margin এর মান auto দেয়া হলে এলিমেন্টটি অনুভূমিক ভাবে মাঝখানে অবস্থান করে।

box-shadow একটি CSS3 প্রোপার্টি। এটি দিয়ে যে কোনো বক্স এলিমেন্টের চারদিকে shadow (ছায়া) দেয়া যায়। আমরাও সম্পূর্ণ ওয়েবপেজের চারিদিকে একটি shadow দিয়েছি।

Logo ছবিতে পরিবর্তন

div.logo img সিলেক্টরের রুলে নিচের কোডটি যুক্ত করুন।

	margin: 10px 0;

সৌন্দর্য বর্ধনের জন্য কোডটি দেয়া। এটি ছবিটির top এবং bottom এ ১০ পিক্সেল মার্জিন তৈরি করে।

Nav এ পরিবর্তন

nav li সিলেক্টরে নিচের কোডটি যুক্ত করুন। এতে রং পরিবর্তনটা স্মুথ হবে।

	transition: all .2s ease-in-out 0s;

তো এবার কেমন লাগছে ওয়েবপেজটি। নিচের লিঙ্কে ক্লিক করে দেখুন একই রকম লাগছে কিনা?

উদাহরণ প্রিভিউ

শুরুর শেষ

এটি হল সূচনা। আপনি যদি এ উদাহরণ সাইটটি পুরোপুরি বানাতে এবং প্রতিটি অংশ বুঝতে পারেন তাহলে বলা যায় আপনি ওয়েব সাইট তৈরির জন্য প্রস্তুত। এখন একটি সম্পূর্ণ ওয়েবসাইট তৈরি করার চেষ্টা করুন। যাতে থাকবে ৩-৫টি পাতা। বিভিন্ন সাইট থেকে কোড দেখুন, যুক্ত করুন, শিখুন।

যে কোনো প্রশ্ন বা কিছু জানার থাকলে আমাদের কমিউনিটি ফোরামে জিজ্ঞাসা করতে পারেন।