ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস টিউটরিয়াল-৩

কোন কিছুতেই আমি স্থির থাকতে পারি না। একটি বিষয়ে অনেকদূর পর্যন্ত যাওয়ার প্রস্তুতি নিয়ে অর্ধেক পথে গিয়েই পথ অন্য পথে পা বাড়াই। চাকরী পরিবর্তন আর জায়গা পরিবর্তনের আবর্তে আমার টিউটরিয়ালের বিষয়েরও ঠিক ঠিকানা থাকে না। তবুও চেস্টা করবো সিএসএস নিয়ে ধারাবাহিকতা বজায় রাখতে। তবে সিএসএসএর প্রাথমিক আলোচনা আর কোড লেখার নিয়ম কানুনের উপর যে কয়টা কথা বলেছি তা কিন্তু জানতে হবে। সিএসএস দিয়ে খুবই সুন্দর ও মনমুগ্ধকর ব্যাগ্রাউন্ড ডিজাইন করা যায়। এরই কিছু নমুনা দেখবো। সেই সাথে দেখবো টাইপোগ্রাফির আরও কিছু রকমারি বাহারি ব্যবহার প্রনালী।

আমরা নিচের মতো করে কোন লেখার রঙের পরিবর্তন করতে চাইলে সিএসএস কোড লিখতে হবে তা দেয়া হলো:
ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস টিউটরিয়াল-৩

h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}

সম্পূর্ণ কোড হবে নিচের মতো করে:

<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>

</body>
</html>

ব্যাগ্রাউন্ডে কোন ছবি ব্যবহার করতে চাইলে

body {background-image:url(‘paper.gif’);}
আপনি চাইলে ছবিটি (নিচের মতো ) ডানে, বামে বা মাঝে রাখতে পারেন।
 ব্যাগ্রাউন্ডে কোন ছবি ব্যবহার করতে চাইলে

ডানে

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:top right;
}

নিচে

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}

নিচের টেবিলে ব্যাগ্রাউন্ডের প্রপারটিগুলো এক নজরে দেখে নিন।

Property Description Values CSS
background Sets all the background properties in one declaration background-color
background-image
background-repeat background-attachment background-position
inherit
1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll
fixed
inherit
1
background-color Sets the background color of an element color-rgb
color-hex
color-name
transparent
inherit
1
background-image Sets the background image for an element url(URL)
none
inherit
1
background-position Sets the starting position of a background image top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit
1
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
inherit

এবার আমরা দেখবো লেখার সৌন্দর্য বৃদ্ধির পদ্ধতি

টেক্সট এলাইনমেন্ট:

h1 {text-align:center;} /* মাঝ বরাবর */
p.date {text-align:right;} /* ডানে*/
p.main {text-align:justify;} /*জাস্টিফাইড*/
টেক্সট ডেকোরেশন

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

ইন্ডেন্টেশন

p {text-indent:50px;}

বড়/ছোট হাতের লেখা করতে চাইলে

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
এতক্ষন আমাদের সাথে থাকার জন্য ধন্যবাদ আশা করি আমার সব কয়টি টিউটরিয়াল দেখবেন আর মতামত দিবেন। এই টিউটরিয়ালটি এখান থেকে বাংলায় অনুবাদকৃত।

5 thoughts on “ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস টিউটরিয়াল-৩”

  1. Pingback: ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস টিউটরিয়াল-৩ « টিউটোরিয়াল

  2. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » সুন্দর সুন্দর বক্স

  3. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » বেশি কিছু না, সিএসএস

  4. ইন্ডেন্টেশন
    p {text-indent:50px;}

    এটা সম্প্রর্কে যদি বিস্তারিত বলতেন , অনেক যায়গায় দেখেছি এর value -9999px বসানো হয়

  5. Wow, superb blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is magnificent, let alone the content!. Thanks For Your article about ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা: সিএসএস টিউটরিয়াল-৩ | টিউটোরিয়ালবিডি .

Leave a Comment