Tag Archives: border

সি এস এস টিউটোরিয়াল (css tutorial), সিএসএস CSS

সিএসএস৩ বর্ডার ইমেজ (CSS3 Border Images in Bangla)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সিএসএস৩ border-image প্রোপার্টি

সিএসএস৩ border-image প্রোপার্টি দিয়ে একটি এলিমেন্ট এর চারদিকে বর্ডার সেট করতে পারেন।

 

ব্রাউজার সাপর্ট

টেবিলে উল্লেখিত সংখ্যা ব্রাউজার এর প্রথম ভার্সন যা এই প্রোপার্টি সম্পূর্ণভাবে সাপর্ট করে তা বোঝায়।

-webkit- বা -moz- দ্বারা প্রথম প্রিফিক্স ভার্সন বুঝায় যা এই প্রোপার্টি সাপর্ট করে।

Property  Internet Explorer  Google Chrome  Mozila Firefox  Safari  Opera
border-image 11.0 16.0
4.0 -webkit-		 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-

 

সিএসএস৩ border-image প্রোপার্টি

সিএসএস৩ border-image প্রোপার্টি যেকোন এলিমেন্ট এর চারিদিকে বর্ডার দিয়ার জন্য ব্যবহার করা হয়।

প্রোপার্টিটি নিম্নোক্ত তিনভাবে অংশগ্রহণ করে:

  1. ইমেজ বর্ডার হিসেবে
  2. ইমেজ এর যেখানে স্লাইস/ভাগ থাকে
  3. মাঝ অংশ যেখানে পুনরাবৃত্তি বা প্রসারিত হবে তা নির্দিষ্ট করে

আমরা নিম্নোক্ত ইমেজটি ব্যবহার করবো (border.png)

বর্ডার

border-image প্রোপার্টি ছবিটিকে নিয়ে একে নয়টি অংশে স্লাইস/ভাগ করে । ইটি চারটি কর্ণারে বসে এবং এবং মধ্যবর্তী অংশ আপনি যেভাবে চান সেই অনুযায়ী - পুনরাবৃত্তি বা প্রসারিত হয়।

নোট: border-image প্রোপার্টি কাজ করার জন্য এলিমেন্টটির বর্ডার প্রোপার্টি সেট প্রয়োজন হবে।

এখানে ইমেজ এর মধ্যবর্তী অংশের পুণরাবৃত্তি ঘটেছে:

Here, the middle sections of the image are repeated to create the border.

এর কোড হচ্ছে

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

 

এখানে মধ্যবর্তী অংশ প্রসারিত হয়েছে:

Here, the middle sections of the image are stretched to create the border.

এর কোড হচ্ছে:

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(border.png) 30 stretch;
}

 

সিএসএস৩ border-image - বিভিন্ন স্লাইস মান

স্লাইস এর বিভিন্ন মান বর্ডার এর চেহারা পাল্টে দেয়

উদাহরণ 01:

border-image: url(border.png) 50 round;

 

উদাহরণ 02:

border-image: url('http://www.w3schools.com/css/border.png') 20% round;

 

উদাহরণ 03:

border-image: url(border.png) 30% round;

 

এর কোড হচ্ছে:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

 

এইচটিএমএল HTML

এইচটিএমএল এর সিএসএস (HTML Style – CSS)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শরিফুল ইসলাম
Php Coder

 

HTML Styles - CSS

 উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

সিএসএস দ্বারা এইচটিএমএল কে স্টাইল করা

সিএসএস(css) এর পূর্ণ নাম হল Cascading Style Sheets ।

তিনভাবে স্টাইল কে এইচটিএমএল এর সাথে যুক্ত করা যায়

• Inline-স্টাইল attribute ব্যবহার করে এইচটিএমএল এর সাথে যুক্ত করা যায়

• Internal- <style> এলিমেন্ট এইচটিএমএল এর head সেকশন এর মধ্যে যুক্ত করা যায়

• External- এক বা একাধিক বাইরের সিএসএস ফাইল যুক্ত করে কাজ করা যায়।

তবে সব থেকে কমন হল বাইরে থেকে একটি সিএসএস ফাইল যুক্ত করা। কিন্তু আমরা এইখানে internal স্টাইল ব্যবহার করব। কারন এতে আমাদের জন্য স্টাইল এর জন্য ভিন্ন ভিন্ন ফাংশন গুলো বুজতে ঝুব সুবিধা হবে।

 

সিএসএস syntax

সিএসএস স্টাইলিং এর জন্য নিন্মোক্ত সিনটেক্স ব্যবহার করা হয়

element { property:value ; property:value }

 

এই element হল এইচটিএমএল এর একটি উপাদানের নাম। property হল সিএসএস একটি প্রপার্টি। value হল সিএসএস প্রপার্টি এর একটি মান।

অনেকগুলো স্টাইল থাকলে তাহলে সেগুলো সেমিকোলন দিয়ে আলাদা করতে হয়।

 

Inline স্টাইল (inline css)

এইচটিএমএল উপাদানের ক্ষেত্রে একটি ইউনিক স্টাইল এর জন্য inline styling খুবই উপযোগী। এই উদাহরনে ইনলাইন স্টাইল এর মাধ্যমে একটি ইউনিক heading এর টেক্সট এর কালার পরিবর্তন করা হচ্ছে

উদাহরণ

<h1 style="color:blue">This is a Blue Heading

 

 

Internal স্টাইল (internal css)

একটি পেজ এর সকল এইচটিএমএল উপাদানের জন্য একটি কমন স্টাইল ব্যবহার করা হয়েছে আর তা হল internal style sheet।

সাধারনত এটি <style> এলিমেন্ট এর সাহায্যে হেড সেকশন এর মধ্যে ইনক্লুড করতে হয়।

উদাহারন

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

External স্টাইল (External সিএসএস)

অনেকগুলো পেজ এর স্টাইল নিয়ন্ত্রণ করার জন্য এই পধতি চালানো হয়। এই ক্ষেত্রে মাত্র সিএসএস ফাইল এর একটি উপাদান পরিবর্তন করার মাধ্যমে বাকি সবগুলো পেজ এর পরিবর্তন করা সম্ভব। হেড সেকশন এর মধ্যে external সিএসএস ফাইল এর লিঙ্ক করে দিতে হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="styles.css">
 </head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


 


সিএসএস ফন্টস


সিএসএস এর color প্রপার্টি দ্বারা এইচটিএমএল পেজ এর টেক্সট এর কালার কি হবে তা ডিফাইন করা হয়। সিএসএস এর font-family দ্বারা টেক্সট এর ফন্ট কোন ফন্ট হবে তা ডিফাইন করে। সিএসএস এর font-size প্রপার্টি দ্বারা টেক্সট এর আকার কতটুকু হবে তা ডিফাইন করে।


উদাহরণ




<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>




তবে <font> ট্যাগ টি এইচটিএমএল এর পুরাতন ভার্সন এ কাজ করে এইচটিএমএল৫ এ কাজ করে না।


 


সিএসএস বক্স মডেল


প্রত্যেকটি এইচটিএমএল এর উপাদানের জন্য একটি বক্স নির্দিষ্ট করা থাকে কিন্তু আমরা তখনি এটা দেখতে পারব যখন আমরা সিএসএস এর মধ্যে border প্রপার্টি ঘোষণা করব


উদাহরণ




p {
    border:1px solid black;
}




border এর মধ্যে ফাকা তৈরি করার জন্য আমরা padding প্রপার্টি ব্যবহার করব


উদাহারন




p {
    border:1px solid black;
    padding:10px;
}




বর্ডার এর বাইরে মার্জিন এর জন্য আমরা margin প্রপার্টি ব্যবহার করব


উদাহরণ




p {
    border:1px solid black;
    padding:10px;
    margin:30px;
 }




সিএসএস উদাহরণ এ px ব্যবহার করা হয়েছে এতে পিক্সেল বুঝায়


 


ID Attribute


উপরের সবগুলো উদাহরণ এ সিএসএস এর সাধারন নিয়ম ব্যবহার করা হয়েছে।


যদি কোন একটি নির্দিষ্ট স্টাইল নির্দিষ্ট কোন এইচটিএমএল এর উপাদানের ক্ষেত্রে প্রয়োগ করতে হয় তাহলে id attribute প্রথমে এইচটিএমএল এর মধ্যে যোগ করতে হবে


উদাহরণ




<p id="p01">I am different</p>




 


এরপর id কে সিএসএস এর মধ্যে কল করে স্টাইল যোগ করতে হবে


উদাহরণ




p#p01 {
    color:blue;
}






 


Class attribute


কোন নির্দিষ্ট উপাদানের ধরন পরিবর্তন করার জন্য ক্লাস (class) attribute এইচটিএমএল এর উপাদানের মধ্যে যোগ করতে হয়


উদাহরণ




<p class="error">I am different</p>




একন আপনি নির্দিষ্ট ক্লাস এর সাথে সকল এলিমেন্ট এ ভিন্ন ভিন্ন স্টাইল দিতে পারবেন।


উদাহরণ




p.error {
    color:red;
}




নোটঃ id ব্যবহার করা হয় একটি ইউনিক উপাদানের জন্য এবং class ব্যবহার করা হয় একটি এলিমেন্ট এর গ্রুপ এর জন্য।


 


সীমাবদ্ধতা


পুরাতন এইচটিএমএল ভার্সন এর অনেক ট্যাগস এবং attributes ব্যবহার করা হয় স্টাইল documents এ। কিন্রু এইগুলো এইচটিএমএল ৫ এ সাপোর্ট করে না।


যে উপাদান বা elements গুলো বাদ দিতে হবে ব্যবহার করা বাদ দিতে হবে: <font>, <center> এবং <strike>.


যে attribute গুলো বাদ দিতে হবে: color এবং bgcolor


 


একনজরে প্রপার্টি গুলো


Inline styling এ এইচটিএমএল এর স্টাইল attribute এর ব্যবহার


Internal css এ এইচটিএমএল এর <style> এলিমেন্ট এর ব্যবহার


External css এ এইচটিএমএল এর <link> উপাদানের ব্যবহার


সেকশন এ <style> এবং <link> elements যুক্ত করার জন্য এইচটিএমএল এর <head> এলিমেন্ট এর ব্যবহার


Text কালার করার জন্য এ সিএসএস এর কালার প্রপার্টি এর ব্যবহার


Text এর ফন্ট নির্দারণের জন্য সিএসএস এর font-family প্রপার্টি এর ব্যবহার


Text এর ফন্ট সািইজ নির্দারণের জন্য সিএসএস এর font-size প্রপার্টি এর ব্যবহার


উপাদানের বর্ডার দেখানোর জন্য সিএসএস এর border প্রপার্টি এর ব্যবহার


বর্ডার এর ভিতরে স্পেস নির্দারনের জন্য সিএসএস এর padding প্রপার্টি এর ব্যবহার


বর্ডার এর বাহিরের দিকের স্পেস নির্দারনের জন্য সিএসএস এর margin প্রপার্টি এর ব্যবহার


এইচটিএমএল স্টাইল ট্যাগ


<style> - একটি document মধ্যে সমস্ত স্টাইল এর তথ্যকে সঙ্গায়িত করে


<link> -  document এবং external রিসোর্স ফাইল এর মধ্যে সম্পর্ক নির্দারণ করে




	

	
	




	
	

				

			সি এস এস টিউটোরিয়াল (css tutorial)
		

			
সি এস এস বর্ডার (CSS Border)

		

			 		

	


		

		




Huge Sell on Popular Electronics














  

   Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--
  

  
  






















CSS border properties এলিমেন্ট এর border এর style, size, and color নির্ধারণ করতে সাহায্য করে ।




 


বর্ডার স্টাইল


Border-style property নির্ধারণ করা হয় কি ধরনের border প্রদর্শিত হবে।

বি: দ্র: Border properties এর কোন প্রভাব কাজ করবে না যদি না border-style property নির্ধারণ করা হয়।


 


বর্ডার স্টাইল মান






none
কোন border না থাকা নির্দেশ করে




dotted
dotted border নির্দেশ করা হয় এটি দ্বারা




dashed
dashed border নির্দেশ করা হয় এটি দ্বারা




solid
solid border নির্দেশ করা হয় এটি দ্বারা




double
দুইটি border একত্রে নির্দেশ করা হয় এটি দ্বারা। দুটি border এর ব্যাপকতা একই থাকে যেমনটি border-width value তে দেয়া হয়।




groove
3D grooved border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।




ridge
3D ridged borderনির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।




inset
3D inset border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।




outset
3D outset border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।






 


বর্ডার এর প্রসস্থতা


”Border-Width” property ব্যাবহার করা হয় border এর width নির্ধারণ করার জন্য ।


Width ব্যাবহার করা হয় pixels এককে অথবা তিনটি পূর্ব নিরধারিত values: thin, medium, or thick দ্বারা।


বি: দ্র: "border-width" property একাকী ব্যাবহার করলে ইহা কাজ করবে না । তাই প্রথমে "border-style" ব্যাবহার করে border নির্ধারণ করে নিতে হয়।


উদাহরনঃ




p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}




 


বর্ডার এর রঙ


Border-color property ব্যাবহার করা হয় border এর color নির্ধারণ করার জন্য। Color নির্ধারণ করার উপায়ঃ






name
color value নির্ধারণ , like "red"




RGB
RGB value নির্ধারণ , like "rgb(255,0,0)"




Hex
shex valueনির্ধারণ, like "#ff0000"






আপনি চাইলে border color কে "transparent" হিসেবে নির্ধারণ করতে পারেন।


যদি না border color নির্ধারণ করা হয় inherited from "the color property of the element"।


বি: দ্র: "border-color" property একাকী ব্যাবহার করলে ইহা কাজ করবে না । তাই প্রথমে "border-style" ব্যাবহার করে border নির্ধারণ করে নিতে হয়।


উদাহরনঃ




p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}




 


বর্ডার - স্বতন্ত্র সাইড


CSS এর ক্ষেত্রে ভিন্ন ভিন্ন border ভিন্ন ভিন্ন পাশে ব্যাবহার করা সম্ভবঃ

উদাহরনঃ




p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}




উপরে দেয়া উদাহরণ টি একটি একক property দিয়েও নির্ধারণ করা যায়ঃ


উদাহরনঃ




p {
    border-style: dotted solid;
}




 


border-style property এর একটি থেকে চারটি values হতে পারেঃ


    

  • border-style: dotted solid double dashed;

      

    • top border is dotted
      • 

    • right border is solid
      • 

    • bottom border is double
      • 

    • left border is dashed
      • 

    

    • 

  • border-style: dotted solid double;

      

    • top border is dotted
      • 

    • right and left borders are solid
      • 

    • bottom border is double
      • 

    

    • 

  • border-style: dotted solid;

      

    • top and bottom borders are dotted
      • 

    • right and left borders are solid
      • 

    

    • 

  • border-style: dotted;

      

    • all four borders are dotted
      • 

    

    • 



Border-style property উপরোক্ত উদাহরণে ব্যবহার করা হয়। যাইহোক, এটি border-width and border-color এর সাথে কাজ করতে সক্ষম।


 


Border - সংক্ষিপ্ত property


এতক্ষন আপনি উপরের উদাহরন দেখেছেন যেখানে যখন borders নির্ধারণ করতে হয় তখন অনেকগুলি properties consider করতে হয় ।


Individual border properties কে একটি property তে রুপান্তর করে code কে ছোট করা সম্ভব। একেই shorthand property বলে।


Borde property টি একটি individual border properties এর জন্য shorthand এ লিখা হয়ে থাকেঃ


    

  • border-width
    • 

  • border-style (required)
    • 

  • border-color
    • 



উদাহরনঃ




p {
     border: 5px solid red;
 }




 


CSS এর সকল Border Properties








প্রোপার্টি




বর্ণনা






border
সকল border properties একটি declaration দ্বারা নির্ধারণ




border-bottom
সকল bottom border properties একটি declaration দ্বারা নির্ধারণ




border-bottom-color
bottom border এর color নির্ধারণ




border-bottom-style
bottom border এর style নির্ধারণ




border-bottom-width
bottom border এর width নির্ধারণ




border-color
চারটি borders এর color নির্ধারণ




border-left
একটি declaration দ্বারা সকল left border এর properties নির্ধারণ




border-left-color
Left border এর color নির্ধারণ




border-left-style
Left border এর style নির্ধারণ




border-left-width
Left border এর width নির্ধারণ




border-right
একটি declaration দ্বারা সকল right border এর properties নির্ধারণ




border-right-color
right border এর color নির্ধারণ




border-right-style
right border এর style নির্ধারণ




border-right-width
right border এর width নির্ধারণ




border-style
চারটি borders এর style নির্ধারণ




border-top
একটি declaration দ্বারা সকল top এর properties নির্ধারণ




border-top-color
top border এর color নির্ধারণ




border-top-style
top border এর style নির্ধারণ




border-top-width
top border এর width নির্ধারণ




border-width
চারটি borders এর style নির্ধারণ