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

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

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

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

<h1> <a href=”#”>Designer Shibly</a></h1>

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

<link href=”styles.css” rel=”stylesheet” type=”text/css”/>

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<link href=”styles.css” rel=”stylesheet” type=”text/css”/>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Text Styles By Desinger Shibly</title>

</head>

<body>

<h1> <a href=”#”>Designer Shibly</a></h1>

</body>

</html>

৩. এইবার 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 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*/

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

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


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<link href=’http://fonts.googleapis.com/css?family=Luckiest+Guy’ rel=’stylesheet’ type=’text/css’>

<link href=”styles.css” rel=”stylesheet” type=”text/css”/>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Text Styles By Desinger Shibly</title>

</head>

<body>

<h1> <a href=”#”>Designer Shibly</a></h1>

</body>

</html>

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

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


ফেসবুকের মাধ্যমে মন্তব্য লিখুন

  3 comments for “CSS কোড ব্যাবহার করে টেক্সটা স্টাইল

  1. May 13, 2011 at 11:24 pm

    ওরে জোশ… সিএসএস এর কি কাহিনি… চরম লাগলো… 😀

  2. May 13, 2011 at 6:59 pm

    ভালো লাগলো। ধন্যবাদ শিবলী ভাই।

Leave a Reply