টিউটোরিয়ালবিডি » সিএসএস (CSS)

CSS কোড ব্যাবহার করে টেক্সটা স্টাইল

ডিজাইনার শিবলী — Fri, 13 May 2011 12:42:46 +0000

ফটোশপে টেক্সটা স্টাইল তো অনেকে করেন। এইবার একটু শুধু সিএসএস কোড ব্যাবহার করে টেক্সটা স্টাইল করি কি বলেন। এই স্টাইল গুলো মূলত পোষ্ট এর টাইটেল, ওয়েব হেডার, বিভিন্ন প্রকারের লিংক এর ক্ষেত্রে ব্যাবহার করা হয়।
যাই হোক আমি এইখানে Dreamweaver ব্যাবহার করেছি। আপনি ইচ্ছা করলে Dreamweaver ব্যাবহার না করেও কাজটা কারতে পারেন।

১. প্রথম কাজ হল একটা ফোল্ডার তৈরি করুন এবং এখানে index.html এবং styles.css নামে দুইটা ফাইল তৈরি করুন।

২. এইবারের কাজ body ট্যাগ টেক্সটা যোগ করুন।

Designer Shibly

CSS কোডটার লাইভ লিংক পাবার জন্য head ট্যাগ এ নিচের কোড যুক্ত করুন।

তাহলে বর্তমানের index.html এর পুরো কোডটা দাড়ায়

Text Styles By Desinger Shibly

Designer Shibly

৩. এইবার styles.css এর ফাইলটার দিকে নজর দিই।

/* CSS Text Style By Desinger Shibly */

body {
background:#292929;
padding: 10px;
}

h1 {
position:relative;
font-size: 135px;
}

h1 a {
text-decoration:none;
color:#666;
position:absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}

h1:after {
content:”Designer Shibly”;
color:#d6d6d6;
text-shadow: 0 1px 0 white;
}
/* End the Stylses*/

ব্রাউজারে দেখুন নিচের মত অবস্থা হয়েছ।

৪. কিন্তু সাধারণ ফন্টে এটা মোটেই ভালো লাগছে না। তাই,

styles.css এর h1 ট্যাগের font-family তে Luckiest Guy ফন্ট ব্যবহার করি। কোডটা নিচের মত:

font-family: ‘Luckiest Guy’, arial, serif;

তাহলে styles.css এর ফাইনাল অবস্থা নিচের মত

/* CSS Text Style By Desinger Shibly */

body {
background:#292929;
padding: 10px;
}

h1 {
position:relative;
font-size: 135px;
font-family: ‘Luckiest Guy’, arial, serif;

}

h1:after {
content:”Designer Shibly”;
color:#d6d6d6;
text-shadow: 0 1px 0 white;
}

/* End the Stylses*/

এইবার index.html ফাইলে ফন্ট এর লিংক যুক্ত করি। {ফন্টটা গুগল ওয়েব ফন্ট থেকে নেয়া।}

তাহলে index.html ফাইনাল অবস্থা

Text Styles By Desinger Shibly

Designer Shibly

আর আপনার প্রজেক্ট এর ফাইনাল অবস্থা:

অনলাইন ডেমো | সোর্চ ডাইনলোড

CSS 3 দিয়ে Gradient এর ব্যাবহার

ডিজাইনার শিবলী — Sun, 08 May 2011 11:00:43 +0000

ফটোশপে কাজ করেছেন অথচ Gradient এর নাম শোনেন নি। এমন কেউ থাকতে পারে বলে আমি বিশ্বাস করি না। এই সুবিধা এখন শুধু CSS ব্যাবহার করেই পাওয়া যাবে। তাই ভাবলাম এই নিয়ে একটা টিউটোরিয়ল লিখি। সামনের টিউটোরিয়ার গুলোতে এর ব্যাবহার বুঝতে পারবেন।

১. Linear Gradient

এইটাতে ওপরে একটা এবং নিচে একটা রং।

ব্যবহৃত CSS:
-webkit-gradient(linear, left top, left bottom, from(red), to(white));
-moz-linear-gradient(red, white)

২. Reflected Gradient

এখানে তিনটি রং এর ব্যাবহার ঘটেছে।
ব্যবহৃত CSS:
-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
-moz-linear-gradient(left top, red, white, red);

৩. Reflected Gradients

এটার মাঝে এবং পাসে দুইটা রং ব্যাবহার করা যাবে। মাঝেটার গোল আকারের হবে।
ব্যবহৃত CSS:
-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
-moz-radial-gradient(white, red)

আমি আপাতত এই তিনটা Gradients স্টাইল শিখেছি। তাই আপাতত এইখানেই টিউটোরিয়াল শেষ।

CSS দিয়ে আরও কয়েটা টেক্সটা স্টাইল

ডিজাইনার শিবলী — Wed, 20 Apr 2011 03:17:43 +0000

CSS দিয়ে টেক্সটা স্টাইল নিয়ে কদিন আগে লিখেছিলাম। আসলে CSS 3 এর সেডোর নতুন ফিচারটা একেবারে জটিল। যাই হক ফেজবুকে কয়েকজন বলল, তারা এই রকম আরও টিউটোরিয়াল চায়। তাই পরে পার্টি লিখলাম এইটাতেও আরও তিনটা স্টাইল যোগ করেছি। অটোমেটিক ফন্ট লোডিং এর জন্য আর কোডিং করার ইচ্ছা করছে না তাই Showcard Gthic ফন্টটা এইখান থেকে নামিয়ে ইনিস্টল করে নিন।

১. Style 1:

ব্যাবহৃত CSS কোড:

h1{
font-size:40px;
text-align:center;
font-family:Showcard Gothic;
color:#F90;
text-shadow: 0 04px #FF0,
0-5px 4px #F60,
0 05px 07px #F03;
}

২. Style 2:

ব্যাবহৃত CSS কোড:

h2 {
font-size:40px;
text-align: center;
font-family:Showcard Gothic;
color:#470781;
text-shadow:0-6px 2px #ae00ff,
0 5px #960EC9;
}

৩. Style 3:

ব্যাবহৃত CSS কোড:

h3 {
font-size:40px;
text-align:center;
font-family:Showcard Gothic;
color:#A40004;
text-shadow: 0 3px #F00,
0-2px #AA0004;
}

আনলাইন ডেমো | সোর্চ ডাউনলোড

পরিক্ষা চলছে দোয়া চাই।

CSS দিয়ে টেক্সটা স্টাইল

ডিজাইনার শিবলী — Mon, 11 Apr 2011 12:16:07 +0000

CSS দিয়ে অনেক দারুণ দারুণ ডিজাইন করা সম্ভব। একটা আইফোন দেখে তো আমার চোখ পুরো ট্যারা। দেখতে পারেন এইখান থেকে।

আমি ভাই ছোট-মোট প্রোগ্রামার এত বড় কাজ করা আমার পক্ষে আপাতত সম্ভব নয়। তাই আমার তৈরি ছোট ছোট কয়েটা কোড স্টাইল শেয়ার করছি। এইখানে ড্রিমওয়েভার ব্যাবহার করেছি।

১. Grass Text

ব্যবহৃত CSS কোড:

font: Verdana, Geneva, sans-serif;

font-size:36px;

text-align:center;

color:#3b6000;

text-shadow:0 0 4px #196000,

0 -5px 4px #207c00,

2px -10px 6px #36cf00,

-2px -15px 11px #3ff200,

2px -18px 18px #42ff00;

২. Normal Shadows

ব্যবহৃত CSS কোড:

font-size: 66px;

font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;

text-align:center;

text-shadow: 0 0 20px #333;

৩. With border Text

ব্যবহৃত CSS কোড:

font-size:66px;

text-align:center;

text -shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;

color: white;

অনলাইন ডেমো | ডাউনলোড

ফটোশপ এবং CSS দিয়ে হোভার(hover) এনিমেশন যুক্ত বাটন তৈরি

ডিজাইনার শিবলী — Mon, 24 Jan 2011 13:47:44 +0000

বেশ অনেক দিন থেকেই ভাবছি এবং বলছি PSD থেকে CSS কোডিং এর ওপর টিউটোরিয়াল লিখবো। কিন্তু আঁতি-পাতি করতে করতে আর করা হয়ে উঠে না। তো যাইহোক আমি আজ খুব সাধারণ এটা টিউটোরিয়াল লিখবো ফটোশপ থেকে CSS কোডিং এর বেপারে। এই বিষয় গুলো নিয়ে যারা ঘাঁটা ঘাটি করেন। তারা হয়তো এই ধরেনের প্রজেক্ট অন্য কোন ইংরেজি ব্লগ থেকে করে থাকবেন। আজকের প্রজেক্ট হোভার (hover) যুক্ত বাটন তৈরি করা। হোভার (hover) বলতে মূলত বোঝায় একটা লিংক কিংবা কোন বাটন এর ওপর মাউস পয়েন্টার নিয়ে গেলে ওটার অবস্থা কেমন হবে। আমরা প্রজেক্ট শুরু করার আগে আমার তৈরি ডেমোটা এখান থেকে দেখে আসুন; তাহলে প্রজেক্ট এর কাজ করতে সুবিধা হবে।

PSD অর্থাৎ ফটোশপে বাটন তৈরি:

আমাদের প্রথম স্টেপ হবে ফটোশপে বাটনটা তৈরি করা। তাই প্রথমেই মাপ যোগ এর কাজ শেষ করি।

১. নিচের মত সেটিং নিয়ে একটা নতুন ডকুমেন্ট্রি নিন!

২. এবার View>New Guide যান এবং নিচের মত করে মোট পাঁচ বার Guide যোগ করুণ।

ব্যাস আমাদের মাপ যোগ শেষ।

এবার আমদের বাটন তৈরিতে নেমে পড়ি।

৩. Rounded Rectangle Tool এর সাহায্য নিচের মত করে একটা চতুর ভুজ আঁকুন যেটার Radius হবে 5px।।

৪. নিচের স্কিনসট অনুযায়ী এটার লেয়ার স্টাইল তৈরি করুন।

সবকিছু যদি ঠিক ভাবে করতে পারেন তাহলে আপনার বাটন নিচের মত অবস্থায় যাবে।

৫. এবার এটার নিচের অংশ একটা একই মাপের চতুর্ভুজ আঁকুন এবং লেয়ার স্টাইল একই রকম করে করুণ। শুধু Layer>Layer Style>Gradient Overlay গিয়ে নিচের মত করে সেটিং দিন।

ব্যাস আপনার বাটন তৈরি শেষ এবার নিচের ইচ্ছা মত টেক্সট যোগ করুন।

CSS কোডে পরিণত:

এখন আমরা এটাকে CSS পরিণত করবো।
১. নিচে মূল বাটন এর CSS কোড দেয়া হল।
.button {
width:350px;
height:80px;
display:block;
background-image:url(images/button.png);
background-position: top;
}
এখনে width একই থাকবে। তবে height মূল height এর অর্ধেক দিতে হবে কোডে লক্ষ্য করুন height: 80px দেয়া হয়েছে কারণ এখনে height আছে 160। এটা ওপর থেকে শুরু করার জন্য background position: top দিন যদি নিচ থেকে শুরু করাতে চান হলে top এর জায়গায় bottom দিতে হবে। আর images/button.png এখনে আপনার বাটন এর লিংক।

২. লিংক হবার বাটন এর CSS কোড।
.button:hover{
width:350px;
height:80px;
background-image:url(images/button.png) no repeat;
background-position: bottom;

}

এটার কোড আর ব্যাখ্যা করলাম না। দুটোর কোড এক সাথে নিচের মত হবে।

/* tutorialbd.com button by Noor Elahi Shibly*/
.button {
width:350px;
height:80px;
display:block;
background-image:url(images/button.png);
background-position: top;
}
.button:hover{
width:350px;
background-position: bottom;
height:80px;
background-image:url(images/button.png) no repeat;
}
/* End button effects */

এই বাটন আপনার ব্লগে (ওয়ার্ডপ্রেস এর ক্ষেত্রে) লাগাতে চাইলে styles.css এ যোগ করে দিন। আর ফ্রি ব্লগার এর ক্ষেত্রে ]]> লেখার ওপর যোগ করে দিন।
পোষ্ট লেখার সময় এই কোডটুকু লিখলে হয়ে যাবে আর আপনার পছন্দ মত লিংক URL তে বসিয়ে দিন। ব্যাস।

আরও বলি:

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

একাধিক স্টাইলের বাটন ব্যাবহার করতে চাইলে button1, button2 দিতে হবে এবং class=”button” এর এখানে class=”button1” , class=”button2” দিলেই হবে।

পুরো প্রজেক্ট এর সোর্চ ফাইল এখান থেকে নামিয়ে নিতে পারেন।

তৈরিকরুন আপনার নিজের চ্যাট সিস্টেম!

রাসেল আহমেদ — Sat, 20 Nov 2010 04:38:39 +0000

বকবকানি:

ওয়েবসাইটে চ্যাট অনেকেই সংযুক্ত করতে চান। বিভিন্ন চ্যাট সাইট থেকে বিভিন্ন কোড জেনারেট করে ব্যবহার করেন অনেকে। এতে সাইটের স্পীড কমে যায়। আজ আমি আপনাদের এমন একটি চ্যাট সিস্টেম দেখাব যেখানে সাইট বিন্দুমাত্র স্লো হবে না।

ডাউনলোড:

এই চ্যাট সিস্টেমটির বাংলা সংস্করণ ডাউনলোড করুন এখান থেকে। এবং ইংরেজি সংস্করণটি ডাউনলোড করুন এখান থেকে। (মাত্র ২৩ কিলোবাইট) ডাউনলোড করার পর এটিকে এক্সট্রাক্ট করুন।

ইনস্টল পক্রিয়া।

এটি ইনস্টল করার জন্য আপনার একটি ডাটাবেজ প্রয়োজন হবে। তাই সি প্যানেল থেকে একটি ডাটাবেজ এবং সাথে একটি পাসওয়ার্ড দিয়ে একটি ইউজার তৈরি করুন। তারপর সেই ডাটাবেজের সাথে একটি ইউজার তৈরি করুন।

এরপর আপনার হোস্ট থেকে পিএইচপি মাই অ্যাডমিন এ যান। আপনার ডাটাবেজটি সিলেক্ট করুন। উপরে থেকে import এ ক্লিক করুন। তারপর এখানে Browse এ ক্লিক করে ডাউনলোডকৃত ফোল্ডারের tables.sql ফাইলটি চিনিয়ে দিন। ব্যাস কাজ শেষ।

তাহলে আপনার কাছে মোট চারটি তথ্য আছে নিশ্চিত হয়ে নিন:

১। আপনার হোস্ট নেম

২। একটি ডাটাবেজের নাম:

৩। ডাটাবেজ ইউজার নাম:

৪। ডাটাবেজ পাসওয়ার্ড:

এরপর php নামের ফোল্ডারের ajax.php ফাইলটি নোটপ্যাড++ দিয়ে ওপেন করুন। প্রথমেই দেখবেন নিচের লাইনগুলো আছে

1.class="contentpagetitle"> /* Database Configuration. Add your details below */


2. 
3. $dbOptions = array(
4. 'db_host' => '',
5. 'db_user' => '',
6. 'db_pass' => '',
7. 'db_name' => ''
8. );class="contentpagetitle">


 

এখানে [''] অংশে আপনার ডাটাবেজের তথ্যগুলো দিন। এরপর এই ফাইলগুলোকে সার্ভারে আপলোড করুন।
তারপর আপনার URL ব্রাউজারে দিন। হয়ে গেল আপনার চ্যাট সিস্টেম।
ডেমো দেখুন:

আড্ডার আসরের চ্যাট সিস্টেমটা দেখুন।



ফ্রি ব্লগারের হোমপেজে গ্যালারি স্টাইল পোস্ট দেখানো (শুধু মাত্র CSS দিয়ে)
ডিজাইনার শিবলী — Sat, 23 Oct 2010 01:49:36 +0000
আমি যখন নতুন ছিলাম তখন টেম্পলেট ডাউনলোড করার সময় লক্ষ্য করতাম গ্যালারি থিম গুলোকে। এগুলোর প্রথম পাতায় পোস্ট দেখানোর ধরণটা খুব ভালো লাগতো।  ভাবতাম এগুলো কেমন করে করে! তবে যখন একটু CSS নিয়ে ঘাটা ঘাটি করলাম তখন বুঝলাম এটা খুব একটা কঠিন কাজ নয়। আপনারদের যার মনে এমন ধারণা থাকে তার আমার এই টিউটোরিয়ালটা কাজে লাগবে। বলে রাখি আপনার এতে আপনার ব্লগের মূল পোস্টের আকারের কোন পরিবর্তন হবে না। পোষ্ট ওপেন করলে যেমন দেখায় তেমনি দেখাবে।
এটা আপনার ব্লগের কারার জন্য ]]> এর নিচে অথবা এর    ওপরে নিচের কোড গুলো পেস্ট করে দিন।





এখানে আমি আপনাদের কয়েকটি প্রয়োজনীয় জায়গা বদল করার পদ্ধতি বলছি। আর হ্যাঁ এটা কেবল কিন্তু হোমপেজে দেখানো পোষ্ট অর্থাৎ আমরা যে গ্যালারি স্টাইলের পোস্ট দেখাচ্ছি তার পরিবর্তন হবে।
h2.date-header {

color:#808080;

font-size:11px;

font-weight:normal;

}

এটা হল পোস্ট এর হেডার।  color:#808080; হেডার ফন্ট এর রং। font-size:11px; হেডার ফন্ট এর আকার। font-size:11px;  এখানে যত বড় সংখ্যা দেবেন তত বড় হবে হেডার ফন্ট। এই অংশটা হল পোস্ট ফন্ট এর ধরণ। font-weight:normal; এখনে আপনি যদি Bold  লিখেন তাহলে লেখা বোল্ড হয়ে যাবে আর Underline লিখলে লেখা আন্ডার লাইন হয়ে যাবে।
.post {

background:#CCCCCC;

border:1px solid #BFBFBF;

float:left;
height:225px;
margin:13px;

overflow:hidden;

padding:5px;

position:relative;
width:278px;
}
ইহা পোস্ট এর শরীর। background:#CCCCCC; এটা হল পোষ্ট এর ব্যাকগ্রাউন্ড রং। border:1px solid #BFBFBF; এটা হল পোস্ট এর বডার। 1px এর জায়গায় এর সাইজ বড় করে দিলে বডার বড় হবে। height:225px; এটা হল পোস্ট এর উচ্চতা বড় করলে উচ্চতা বাড়বে। width:278px; এটা হল পোস্ট এর প্রস্থ এটা বড় করলে প্রস্থ বাড়বে।
আর একটা টিপস দেই এই রং এর কোড গুলো ফটোশপে পাবেন তার জন্য ফটোশপ ওপেন করুন। তারপর Color Picker  এ যান।  নিচে লাল দাগ দেয়া অংশ হল কালার কোড এখন থেকে কলার বদল করুন কোডটুক পেস্ট করে দিন। কিন্তু মনে রাখবেন কোন করোণেই যেন # ও ; চিহ্ন মুছে না যায়।

বেশীর ভাগ অংশ বাদ দিয়ে গেলাম এগুলো এভাবে বোঝালে ঠিক ভাবে বুঝবেন না অর্থাৎ আমি বোঝাতে পারবো না। তবে খুব শিগ্রয়ই আমি ফটোশপ থেকে CSS কোড এর কনভার্ট করার টিউটোরিয়াল লিখবো তখন এই বিষয় গুলো ভালো করে বোঝানো যাবে।
আরও দেখুন
ব্লগার(Blogspot)  ব্যবহারকারিদের জন্য Related post Widget (template hack)
ফ্রি  ব্লগারের পোস্ট বিষয়ক গেজেট



ফ্রি ব্লগারের জন্য ৩টি টপ মেনু
ডিজাইনার শিবলী — Sun, 17 Oct 2010 15:46:09 +0000
ক’দিন আগে আমি একটা টিউটোরিয়াল লিখেছিলাম যে “নিজের ওয়েব সাইটের আকর্ষণীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে ২ “। এখানে আজগর ভাই মন্তব্য করেছিল যে এটা ফ্রি ব্লগারে লাগানো যাবে কিনা। আমি একটা রিপ্লাই দিয়েছিলাম অবশ্য তবে সেটা যথেষ্ট ছিল না। তাই একটা টিউটোরিয়াল নিয়ে বসলাম ফ্রি ব্লগারে টপ মেনু লাগানোর পদ্ধতি।
১. মেনু নাম্বার ওয়ান। এই মেনুটা ব্ল্যাক অর্থাৎ কালো স্টাইলের Thesis থিম এ আমি প্রায়ই দেখি।

.menu {

float:left;

list-style-image:none;

list-style-position:outside;

list-style-type:none;

margin:0;

padding-bottom:0;

padding-left:0;

padding-right:0;

}

.menu li {

float:left;

font-family:”Lucida Sans Unicode”,”Bitstream Vera Sans”,”Trebuchet Unicode MS”,”Lucida Grande”,Verdana,Helvetica,sans-serif;

font-size:12px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

line-height:normal;

margin:0;

padding:0;

}

.menu a {

background:#333333 url(http://2.bp.blogspot.com/_66wIGDjagHk/Sg3C64RbjJI/AAAAAAAAAY4/19Yw1ZFLiJg/s1600/seperator.gif) no-repeat scroll right bottom;

color:#CCCCCC;

display:block;

float:left;

margin:0;

padding:8px 12px;

text-decoration:none;

}

.menu a:hover {

background:#2580A2 url(http://2.bp.blogspot.com/_66wIGDjagHk/Sg3DJ9YDADI/AAAAAAAAAZA/b70HFM1VaBo/s1600/hover.gif) no-repeat scroll center bottom;

color:#FFFFFF;

padding-bottom:8px;

}

#busca {

float:right;

line-height:35px;

}
#menu-wrapper {

margin:0 auto;

width:990px;

}
এবার ]] এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।

তারপর একটা যায়গায়  
   লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে          এর নিচে পেষ্ট করে দিন।
 







Home


Products


Services


Support


 



২. এটার নির্মাতা Bangla Haks।

/* Navigation ———-*/

#NavbarMenu {

background: #A0CFEC;

width: 980px;

height: 34px;

font-size: 12px;

font-weight: bold;

font-family: ‘AdorshoLipi’, Arial, Tahoma, Verdana;

color: #000000;

margin: 0;

padding: 0;

float:left;

}

#NavbarMenuleft {

width: 690px;

float: left;

margin: 0;

padding: 0;

}

#NavbarMenuright {

width: 285px;

float: right;

margin: 0;

padding: 6px 0 0;

}

#nav {

margin: 0;

padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav li {

list-style: none;

margin: 0;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

color: #2008AF;

display: block;

font-size: 14px;

font-weight: bold;

font-family: Georgia, Times New Roman;

margin: 0;

padding: 5px 10px 5px;

}

#nav li a:hover, #nav li a:active {
color: #000000;

font-weight: bold;

margin: 0;

padding: 5px 10px 5px;

text-decoration: underline;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #A0CFEC;

width: 100px;

color: #2008AF;

font-size: 14px;

font-family: ‘AdorshoLipi’, Georgia, Times New Roman;

font-weight: normal;

float: none;

margin: 0;

padding: 3px 4px;

border-bottom: 1px solid #FFF;
}

#nav li li a:hover, #nav li li a:active {
color: #000000;

padding: 3px 4px;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 150px;

margin: 0;

padding: 0;

border-left:1px solid #BFC0C0;
}

#nav li ul a {

width: 100px;

}

#nav li ul ul {

margin: -28px 0 0 100px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}
এবার ]] এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।

তারপর একটা যায়গায়  
   লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে          এর নিচে পেষ্ট করে দিন।






Home




sab1





Sab2



Sab3


Sab3






sab2






sab1



sab2


sab2






sab1



sab2




sab1





৩. এই বার মেনুর সর্বশেষ স্টাইল। এটা আমি আমার নিজের ব্লগের জন্য ডিজাইন করেছিলাম।

#menu {

background-color:#ff5b5b;

border-bottom:1px solid #DDDDDD;

border-right:1px solid #DDDDDD;

border-top:1px solid #DDDDDD;

height:28px;

margin:2px auto 0;

width:980px;

}

#menu ul {

border-left:1px solid #DDDDDD;

float:left;

font-family:’Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif;

list-style-type:none;

margin:0;

padding:0;

width:980px;

}

#menu ul li {

border-right:1px solid #DDDDDD;

display:block;

float:left;

font-size:13px;

text-shadow: 2px 2px 2px

font-weight:lighter;

height:28px;

letter-spacing:1px;

line-height:14px;

margin-right:0;

padding:0;

text-transform:uppercase;

}

#menu ul li:hover {

background-position:left center;

background: #ffffff;

}

#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active {

color:#000000;

display:block;

float:left;

height:28px;

margin:0;

padding:5px 20px 0;

text-transform:uppercase;

}

#menu .home, #menu .current_page_item {

background-color:#ff5b5b;

}

#menu .home a:link, #menu .home a:visited, #menu .current_page_item a:link, #menu .current_page_item a:visited {

background-position:right center;

background-repeat:no-repeat;

color:#000000;

}

#menu ul li a:hover {

background-position:right center;

background-repeat:no-repeat;

color:#000000;

height:28px;

text-decoration:underline;

}

#menu ul li ul {

width:180px;

}
.menunav li:hover ul, ul.menunav li.sfHover ul {

left:-1px;

top:25px;

}

.menunav li:hover li ul, .menunav li.sfHover li ul {

top:-9999px;

}

.menunav li li:hover ul, ul.menunav li li.sfHover ul {

border-top:1px solid #DDDDDD;

left:180px;

top:-1px;

}

.menunav li:hover ul, .menunav li li:hover ul {

top:-9999px;

}

.menunav li ul {

border-right:1px solid #DDDDDD;

position:absolute;

top:-9999px;

}

.menunav li {

border-bottom:1px solid #DDDDDD;

float:left;

position:relative;

}

.menunav ul li {

width:100%;

}

.menunav li li {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:transparent url(images/libgt.png) repeat scroll 0 0;

height:auto !important;

padding:0;

}

.menunav li ul {

z-index:100;

}

.menunav li:hover a:link, .menunav li:hover a:visited {

color:#111111 !important;

text-decoration:underline;

}

.menunav li li:hover, .menunav li .current_page_item {

-moz-background-clip:border !important;

-moz-background-inline-policy:continuous !important;

-moz-background-origin:padding !important;

background:transparent url(images/libgth.png) repeat scroll 0 0 !important;

}

.menunav li li a:link, .menunav li li a:visited {

background-image:none !important;

float:left;

height:auto !important;

margin:0 !important;

padding:5px 20px !important;

}

এবার ]] এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।

তারপর একটা যায়গায়  
   লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে          এর নিচে পেষ্ট করে দিন।
মেনু গুলো কেমন লাগলো জানাবেন কিন্তু! আর যদি কোন সমস্যা হয় তাহলে আমি আছি। বলতে ভুলবেন না কিন্তু।




নিজের ওয়েব সাইটের আকর্ষনীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে ২
ডিজাইনার শিবলী — Fri, 15 Oct 2010 11:41:07 +0000
আজ টিউটোরিয়াল বিডিতে CSS বিভাগের পোষ্ট গুলো ঘুরে দেখতে ছিলাম। এখানে অসীম ভাই একটা পোষ্টে আমার চোখ আটকে যায়। পোষ্ট’টা হল, “নিজের ওয়েব সাইটের আকর্ষণীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে” পোষ্টা আমার খুব ভালো লাগে। তাই এই টিউটোরিয়ালটা লিখতে বসলাম। আরও একটা ইচ্ছা আছে আমি শুধু কদিন ধরে ফটোশপ নিয়েই লিখছি। তাই অনেকে ভাবতে পারেন আমি অক্ষর জ্ঞান শূন্য থুক্কু প্রোগ্রামিং জ্ঞান শূন্য এটা গাধা আসলে তা নয় (আসলে তাই প্রোগ্রামিং এর তেমন কিছুই শিখতে পরি নাই)।
এখানে আমরা দুই ধরনের কোড ব্যাবহার করবো। CSS ও HTML আর এই দুটোই ওয়েব প্রোগ্রামিং কোড। ঠিক আছে কাজে নেমে যাই।
১. প্রথমে একটা ফোল্ডার তৈরি করুন। তারপর, এই লিং থেকে ইমেজের ফাইল গুলো নামিয়ে নিন। এবং images ফোল্ডারটা Extract করে  আপনার তৈরিকৃত ফোল্ডারে কপি করে রাখুন।
২. এবার আমরা আমাদের HTML ফাইলটা তৈরি করে ফেলি। তার জন্য All Programs>Accessories>Notepad গিয়ে নোটপ্যাড ওপেন করুন এবং নিচের কোড গুলো কপি করে ফেলুন। তা অবশ্যই ঐ ফোল্ডারে আর  HTML ফরমেটে শেভ করতে হবে। HTML ফরমেটে শেভ করার জন্য Save As.. এ ক্লিক করে .txt জায়গায় .html  লিখে দিন আর এই ফাইলের নাম দিন index অন্য নাম ব্যাবহার করলেও সমস্যা নাই।




Menu







HOME


Products

SoftwarePlus

MagicDriver

GreatFX

SampleSoft

UnDoIt

100% CSS Menu

With Cross-Browser

Dropdowns

Absolutely NO Javascript

Being Used On

These Menus


Example Of a Divider

With No Title



Quality

SoftwarePlus

MagicDriver

GreatFX

SampleSoft

UnDoIt

100% CSS Menu

With Cross-Browser

Dropdowns

Absolutely NO Javascript

Being Used On

These Menus


Example Of a Divider

With No Title



Services

Title For Links

These Links Still Appear

Just Like The Others

Even When Under A Title


Title After Divider

Once Again…

These Links Still Appear

Just Like The Others

Even When Under A Title



Very Long Item

Title For Links

These Links Still Appear

Just Like The Others

Even When Under A Title


Title After Divider

Once Again…

These Links Still Appear

Just Like The Others

Even When Under A Title



Fully Flexible

Title For Links

These Links Still Appear

Just Like The Others

Even When Under A Title


Title After Divider

Once Again…

These Links Still Appear

Just Like The Others

Even When Under A Title


 




৩. এবার আমরা CSS ফাইল তৈরি করবো তার জন্য নোটপ্যাড ওপেন করুন এবং নিচের ফাইল গুলো এটাতে কপি করে ফেলুন। এটাকে CSS ফরমেটে শেভ করতে হবে। তার জন্য Save As.. এ ক্লিক করে .txt জায়গায় . CSS  লিখে দিন আর এই ফাইলের নাম দিন style অন্যনাম ব্যাবহার এলাও আছে কোন সমস্যা নাই।
এবার index ফাইলটা যে কোন ব্রাউজার দিয়ে ওপেন দেখুন নিচের মত লাগছে।
@charset “utf-8″;
/* CSS Document */
body{
padding: 25px;
}
/*^’^ Navigation Structure ^’^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(images/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^’^ Primary Items ^’^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}
/*^’^ Secondary Items Container ^’^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(images/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^’^ Secondary Items ^’^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^’^ Secondary Items Hover State ^’^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^’^ Secondary Item Titles ^’^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(images/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^’^ Horizontal Dividers ^’^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^’^ Vertical Dividers ^’^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
আর হ্যাঁ মেনুটা কেমন হয়েছে বলতে ভুলবেন না কিন্তু। একটা বিখ্যাত সাইটের মেনু দেখে বানিয়েছি।

এত কিছু আপলোড করলাম আবার পুরো ফাইটা বাদ দেই কেন? এটাও এখানে দিলাম।



সিএসএস৩ এর ছয়টি টুলস
মাহবুব টিউটো — Fri, 06 Aug 2010 10:27:43 +0000
CSS3 ব্যবপক জনপ্রিয়তা অর্জনকরেছে। সিএসএস৩ এর একটা সমস্যা হলো সব ব্রাউজার এখনো সাপোর্ট করে না। কাজের সুবিধার জন্য এখানে সিএসএস তিন এর ছয়টি ওয়েব টুলের বর্ণনা দেওয়া হলো। এ টুলসগুলো ব্যবহারে সহজেই কোডিং করতে সহায়ক হবে বলে আমি মনে করি।
CSS3 Button Maker

বৃত্তাকার কোনের ও গ্রাডিয়েন্টের সমন্বয়ে সুন্দর বাটন বানাতে পারবেন এ টুলটির মাধ্যমে। উল্লেখ্য পূর্বে এরকম বাটন বানাতে ছবির সহায়তা নেওয়া হতো যার এখন প্রয়োজন হবে না।
CSS3 Generator

সিএসএস এর বিভিন্ন প্রোপার্টি সিলেক্ট করে সহজেই প্রিভিউ সহ আপনার প্রয়োজনীয় কাজটি সেরে নিতে পারেন সিএসএস জেনারেটরে।
CSS3 Please!

এটাও একই ধরেনর আরেকটি সার্ভিস।
CSS3 Gradient Generator

বেশ কিছু দিন আহে সিএসএস দিয়ে গ্রাডিয়ন্ট বানানোর একটি টিউটরিয়াল লিখেছিলাম। এই টুলটি নিয়ে কাজ করলে আর সেইভাবে নিজের কোডিং করতে হবে না।
CSS3 Transforms

বিভিন্ন ধরনের ট্রান্সফর্ম নিয়ে কাজ করতে পারবেন যেমন এক অবস্থান থেকে অন্য অবস্থানে সরানো, ঘুরানো ইত্যাদি।
CSS3 Selectors Test

সিএসএস কোড টেস্টিং এর জন্য ব্যবাহরা করতে পারেন সিএসএস সিলেক্টর টেস্ট।
তথ্য সূত্র : webdesignledger.com