Awesome! টিউনস
সকল Awesome! টিউনস

ওয়েব ডিজাইন – একটি CSS3 এনিমেশন সহ সোসিয়াল বুকমার্ক ডিজাইন করুন সহজেই!

3,034 দেখা 17 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

101 টিউনস 1258 টিউমেন্টস 20 ফলোয়ার

সবাই কেমন আছেন? ভালো থাকুন এই দোয়াই করি 🙂 আমার আগের একটি পোস্ট লিখেছিলাম ওয়েব ডিজাইন শেখা এবং আয় করা নিয়ে । আপনাদের ইতিবাচক প্রতিক্রিয়া আমাকে খুবই অনুপ্রাণিত করেছে । আমি সবাইকে যথা সম্ভব সাহায্যের চেষ্টা করছি । অনেকে ওয়েব ডিজাইন শেখা নিয়ে আমার কাছে অনেক প্রশ্ন করেছেন, কিভাবে শুরু করবেন, কোনটা আগে শিখবেন ইত্যাদি । সবাইকে হয়তো এতোটা বিস্তারিত বোঝাতে পারি নি । আমি একটি টিউন লিখছি কিভাবে ওয়েব ডিজাইন শেখা যায়, কেন শিখবেন ইত্যাদি । আশা করছি আপনারা সবাই টিউনটি পড়বেন এবং উপকৃত হবে । টিউনটি একটু বড় তাই লিখতে সময় লাগছে, আমি চেষ্টা করছি খুব দ্রুত শেষ করতে ।

আজকের টিউনের প্রসঙ্গে আসি । আজকে আমি একটি সোসিয়াল বুকমার্ক ডিজাইন শেয়ার করবো । এটি CSS3 ব্যবহার করে বানানো । যারা মোটামোটি HTML এবং CSS জানেন তারা চাইলে দেখতে পারেন এবং আমার সাথে চেষ্টা করতে পারেন । আশা করছি ভালো লাগবে এবং ভবিষ্যতে আপনাদের কাজে দিবে । এটি থেকে আপনারা নিজেও বিভিন্য সৃষ্টিশীল ডিজাইন তৈরি করতে পারবেন । আমি চেষ্টা করবো প্রতিটি লাইন বুঝিয়ে দিতে । অবশ্যই কিছু না বুঝলে মন্তব্যে প্রশ্ন করবেন ।

আমরা যা বানাবোঃ

যেমন দেখাবেঃ

কোন আইকন এর উপর মাউস রাখলে যেমন হবেঃ

এনিমেশন দেখে নিনঃ

ভালো লাগলো? তবে চলুন শুরু করে দেই বানানো 🙂 ভয় পাবেন না, দেখতে যতটা সুন্দর বানাতে ততটা কঠিন নয় । আমার সাথে পথ চলতে থাকুন, অবশ্যই পারবেন!

যা যা দরকার ডাউনলোড করে নিনঃ

এখানে আমাদের কিছু ইমেজ ফাইল দরকার হবে, আমরা সেগুলো ডাউনলোড করে নেই । প্রতিটা আইকন এ রাইট ক্লিক করে Save image as দিন এবং যেখানে সেভ করতে চান সেখানে সেভ করুন ।

প্রজেক্ট ফোল্ডার তৈরি করুনঃ

প্রথমে ডেস্কটপ এ একটি ফোল্ডার তৈরি করুন । নামটা CSS3 Icon দিতে পারেন । এবার এটির ভিতর img নামে আরেকটি ফোল্ডার করুন । এবার img ফোল্ডার এর ভিতর যে ইমেজ গুলো ডাউনলোড করেছেন সব গুলো নিয়ে আসুন । ইমেজ গুলোর নাম পরিবর্তন করবেন না ।

এইচটিএমএল ফাইল তৈরিঃ

এবার আমরা ডিজাইন টির জন্য এইচটিএমএল ফাইল তৈরি করবো । তাহলে এবার নোটপ্যাড ওপেন করুন । নোটপ্যাড এ নিচের কোড টি কপি পেস্ট করুন । এবং CSS3 Icon ফোল্ডার এর ভেতর index.html নামে সেভ করুন । এক্সটেনশন .html দিতে হবে । .txt নয় ।

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>CSS3 Icons</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="icon">
	<ul>
		<li><a href="#"><img src="img/facebook.png" alt="" /></a></li>
		<li><a href="#"><img src="img/twitter.png" alt="" /></a></li>
		<li><a href="#"><img src="img/linkedin.png" alt="" /></a></li>
		<li><a href="#"><img src="img/digg.png" alt="" /></a></li>
		<li><a href="#"><img src="img/google-plus.png" alt="" /></a></li>
		<li><a href="#"><img src="img/pinintrest.png" alt="" /></a></li>
		<li><a href="#"><img src="img/rss.png" alt="" /></a></li>
		<li><a href="#"><img src="img/blogger.png" alt="" /></a></li>
	</ul>
	</div>
	</body>
</html>

এবার আমি বুঝিয়ে দিচ্ছি কোন লাইন দিয়ে কি বোঝানো হয়েছে,

  • ১ নাম্বার এ <html> এবং </html> দিয়ে পুরো এইচটিএমএল পেজ টি বোঝানো হয়েছে ।
  • ২ নাম্বার এ <head>এবং </head> দিয়ে মাথার অংশ বোঝানো হয়েছে ।
  • ৩ নাম্বার <body> এবং </body>এর মাঝে যা থাকবে তাই আমরা দেখতে পারবো ।
  • ৪ নাম্বার এ <title> ও </title> এর মাঝে পেজ এর নাম দেয়া হয়েছে ।
  • ৫ নাম্বার এ style.css ফাইলটি (সামনে বানাবো) এইচটিএমএল ফাইল এর সাথে লিঙ্ক করা হয়েছে ।
  • ৬ নাম্বার এ icon ক্লাস এর একটি div করা হয়েছে । এটি আমাদের আইকন বক্স ।
  • ৭ নাম্বার একটি আনঅর্ডারড লিস্ট করা হয়েছে । এর মধ্যে আইকন গুলো থাকবে ।
  • ৮ নাম্বার এর প্রতিটা লাইন এক একটি আইকন । খেয়াল করুন প্রথম লাইন এ img/facebook.png আছে যা ফেসবুক এর আইকন, এভাবে প্রতিটা এক একটা আইকন । এখানে আপনি img ফোল্ডার এ যেই আইকন গুলো রেখেছেন সেগুলো ব্যবহার করা হয়েছে ।

এবার index.html ফাইল টি ওপেন করে দেখুন কেমন দেখাচ্ছে । আশা করি সব ঠিকঠাক হলে নিচের মত পাবেনঃ

তাহলে এবার আসুন মুল ডিজাইন করা শুরু করি ।

CSS দিয়ে ডিজাইনঃ

আবার নোটপ্যাড এ একটি নতুন ফাইল খুলুন । নিচের কোড টি কপি পেস্ট করে ওই একই ফোল্ডারে (CSS3 Icon) এই style.css নামে সেভ করুন । এবার এক্সটেনশন .css হবে । .txt দিবেন না ।

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: white;
}

.icon {
	width: 70%;
	margin: 20px auto;
}

ul {
	background-color: black;
	border-radius: 10px 10px 10px 10px;
	display: block;
	height: 50px;
	margin: 0 auto;
	padding: 20px;
	width: 560px;
}

ul li {
	float: left;
	margin: 0 10px 0;
	list-style: none;
}

ul li img {
	width: 50px;

	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	-o-transition: -o-transform .5s;
	transition: transform .5s;
}

ul li img:hover {
	-webkit-transform: rotate(360deg) scale(1.3);
	-moz-transform: rotate(360deg) scale(1.3);
	-o-transform: rotate(360deg) scale(1.3);
	transform: rotate(360deg) scale(1.3);
}

কিছুই বুঝলেন না? ব্যাপার না 😀 বুঝিয়ে দিচ্ছিঃ

* {
	margin: 0;
	padding: 0;
}

প্রথম লাইন এ মারজিন শুন্য করা হয়েছে । যেন অতিরিক্ত জায়গা ব্যবহার না করে । দ্বিতীয় লাইন এ পেডিং শুন্য করা হয়েছে । এটি ও অতিরিক্ত জায়গা ব্যবহার করা থেকে রক্ষা করে । এ সমন্ধে বিস্তারিতঃ
মার্জিন - http://www.w3schools.com/css/css_margin.asp
প্যাডিং - http://www.w3schools.com/css/css_padding.asp

body {
	background-color: white;
}

এখানে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে । বিস্তারিতঃ
ব্যাকগ্রাউন্ড কালার - http://www.w3schools.com/css/css_background.asp

.icon {
	width: 70%;
	margin: 20px auto;
}

এখানে icon ক্লাস এর যে div বানিয়েছিলাম তার প্রস্থ ও মারজিন ঠিক করা হয়েছে । বিস্তারিতঃ
মার্জিন - http://www.w3schools.com/css/css_margin.asp
প্রস্থ - http://www.w3schools.com/css/css_boxmodel.asp

ul {
	background-color: black;
	border-radius: 10px 10px 10px 10px;
	display: block;
	height: 50px;
	margin: 0 auto;
	padding: 20px;
	width: 560px;
}

আনঅর্ডারড লিস্ট এর ব্যাকগ্রাউন্ড কালার কালো, কোনা গুলো গোল, দৈর্ঘ্য, প্রস্থ, মার্জিন, প্যাডিং ঠিক করা হয়েছে । বিস্তারিতঃ
ব্যাকগ্রাউন্ড কালার - http://www.w3schools.com/css/css_background.asp
বর্ডার রেডিয়াস - http://www.w3schools.com/cssref/css3_pr_border-radius.asp
মার্জিন - http://www.w3schools.com/css/css_margin.asp
প্যাডিং - http://www.w3schools.com/css/css_padding.asp
প্রস্থ ও উচ্চতা - http://www.w3schools.com/css/css_boxmodel.asp
ডিসপ্লে - http://www.w3schools.com/css/css_display_visibility.asp

ul li {
	float: left;
	margin: 0 10px 0;
	list-style: none;
}

প্রতিটা আইকন কিভাবে থাকবে তা নির্ধারণ করা হয়েছে । বিস্তারিতঃ
মার্জিন - http://www.w3schools.com/css/css_margin.asp
ফ্লোট - http://www.w3schools.com/css/css_float.asp
লিস্ট স্টাইল - http://www.w3schools.com/cssref/pr_list-style.asp

ul li img {
	width: 50px;

	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	-o-transition: -o-transform .5s;
	transition: transform .5s;
}

এনিমেশন কেমন সময় নিবে তা ঠিক করা হয়েছে । বিস্তারিতঃ

এনিমেশন - http://www.w3schools.com/cssref/css3_pr_animation.asp

ul li img:hover {
	-webkit-transform: rotate(360deg) scale(1.3);
	-moz-transform: rotate(360deg) scale(1.3);
	-o-transform: rotate(360deg) scale(1.3);
	transform: rotate(360deg) scale(1.3);
}

এনিমেশন কিভাবে হবে তা ঠিক করা হয়েছেঃ
ট্রান্সফরম - http://www.w3schools.com/cssref/css3_pr_transform.asp

এবার আবার index.html পেজ টি ওপেন করুন এবং দেখুন :megreen:

আশা করি সবাই বুঝতে পেরেছেন । আমি খুব সহজ করে বোঝানর চেষ্টা করেছি । কোন সমস্যা হলে কমেন্ট এ প্রশ্ন করুন । ধন্যবাদ ।

এই টিউনটি পড়ে দেখুন -

একই সাথে ওয়েব ডিজাইন শিখুন এবং পাশাপাশি ভাল আয় করুন – “গোপন রহস্য”

এই ডিজাইন টি আর আর ফাউন্ডেশন এর গ্রুপ থেকে নেয়া হয়েছে । ডিজাইন করেছেন Ariful Islam 
কোন প্রশ্ন বা সমস্যা থাকলে আমার সাথে যোগাযোগ করতে পারেন ফেসবুক এ -Rakibul Hasan

Level 0

আমি কম্পিউটার লাভার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 9 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 101 টি টিউন ও 1258 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 20 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

Also known as "Raiku Saiko". React.js & Javascript Developer. Former Wordpress Developer, Front-end Designer. Technology Addicted.

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

Bahh Bahh____ valo laglo tune ta dekhe___ amio ak2 chance peye DW6 e practice kore nilam___ notun kisu sikhlam___ cycling effect ta valo silo. Thanks Brother!!! 🙂

    Level 0

    @Elegant: ধন্যবাদ প্রথম মন্তব্য করার জন্য 🙂 এনিমেশন টা খুবই সুন্দর । এটা থেকে চেষ্টা করে নিজে একটা নতুন কিছু তৈরি করে দেখাবেন আশা করছি 🙂

Level 0

ওয়াও! দারুণ টিউটোরিয়াল। 🙂

Level 0

অসাধারণ!! ব্যাপার গুলা এতো সুন্দর করে বুঝিয়ে লিখেছেন যে একজন যার HTML, CSS নুনতম ধারনা নাই সেও পারবে এই কাজটা। ধন্যবাদ।

    Level 0

    @Sabbir: ধন্যবাদ মন্তব্যের জন্য । আমি আমার মত চেষ্টা করেছি । জানি না কেমন ভালো হয়েছে 🙂

Level 0

আগের টার মতই চমতকার হয়েছে।

Level 2

খুব সুন্দর টিউন , ধন্যবাদ ভাই আপনাকে।

Level 0

আপনারা যদি পিএইচপি তে কাজ করতে চান, তা হলে পিএইচপি এর পরীক্ষা দিতে হবে। অনেক ব্লগএ পরীক্ষা এর উত্তর দেওয়া আছে। পিএইচপি পরীক্ষার জন্য একটা লিংক দিলাম। ভাল লাগলে কমেন্ট করতে কৃপণতা করবেন না।
phpexamsolution.blogspot.com

Level 0

সিএসএস 3 ও সিএসএস এর মধ্যে আসলে পার্থক্যটা কি? এদের কোড কি এক নয়? এইচটিএমএল এর বেলাও কি পার্থক্য আছে? যদি কেউ সিএসএস শিখে তবে কি সে ওয়েব পেজ ডিজাইন করতে কোন সমস্যা হবে? জানাবেন
যদি এডবি ড্রিমওয়েবার সি এস 6 এর ডাউনলোড লিংক থাকে দেবেন।

    Level 0

    @িমরাজ: সিএসএস ৩ সিএসএস এর নতুন ভার্সন । কোন পার্থক্য নেই । সিএসএস ৩ এ কিছু নতুন কোড যোগ করা হয়েছে । আপনাকে আগে সিএসএস এবং পড়ে সিএসএস ৩ দুটোই শিখতে হবে । এইচটিএমএল হচ্ছে পেজ এর সাধারন লেয়াউট আর সিএসএস হচ্ছে সে লেয়াউট ডিজাইন করার উপায় । সিএসএস ছাড়া ওয়েব পেজ ডিজাইন করা যায় না । সিএসএস ৩ শিখলে ভালো সুন্দর ডিজাইন করতে পারবেন ।

    এডোবি ড্রিমওয়েভার সিএস ৬ – http://thepiratebay.se/torrent/7227389/ADOBE_DREAMWEAVER_CS6_%5Bthethingy%5D

Level 0

Well briefing about how to make social icon

Level 0

adobe dreamwaver কি আপনি ব্যবহার করেছেন? এটা কি ফুল ভার্সন? এখানে শুধু একটা .exe ফাইল আছে। ডাউনলোড করছি কাজ হবে কিনা জানিনা। দয়া করে জানাবেন।

    Level 0

    @িমরাজ: হুম আমি এটাই ব্যবহার করছি । কাজ করবে । exe ফাইল টা ওপেন করলে আরেকটা ফোল্ডার এক্সট্রাক্ট হবে । সেখানে ক্র্যাক আছে । নিশ্চিন্তে ডাউনলোড করুন ।