Tag Archives: image

সি এস এস টিউটোরিয়াল (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;
}

 

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ ইমেজেস (Bootstrap Images)

Huge Sell on Popular Electronics

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

বুটস্ট্র্যাপ ইমেজ আকৃতি

Bootstrap এর সাহায্যে সহজেই Image কে তিন প্রকার Shape এ দেখানো যায়, যথা:

  1. গোলাকৃতির কোণ
  2. বৃত্ত
  3. থাম্বনেল

 

গোলাকৃতির কোণ

Image এর চারপাশে Rounded Corner তৈরি করার জন্য .img-rounded class টিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Corner সাপোর্ট করে না।

উদাহরণ:

 <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" 
height="236">

 

বৃত্ত

Image কে বৃত্তাকার বা Circle Shape এ দেখানোর জন্য .img-circle classটিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Cornerসাপোর্ট করে না।

উদাহরণ:

 <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" 
 height="236">

 

থাম্বনেল

Thumbnail Shape এ দেখানোর জন্য .img-thumbnail classটিকে যোগ করা হয়।
উদাহরণ:

 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" 
 height="236">

 

প্রতিক্রিয়াশীল ইমেজ

সাধারণত Image এবং screen এর size ভিন্ন ভিন্ন হতে পারে। আবার, রেসপন্সিভ ইমেজ (Responsive Images) screen এর size অনুযায়ী image কে resize করে parent element এর সাথে সামঞ্জস্য রেখে screen এ ডিসপ্লে করে। রেসপন্সিভ ইমেজ তৈরি করার জন্য .img-responsive class টিতে <img> ট্যাগে যোগ করা হয়। উল্লেখ্য যে, .img-responsive class এর ক্ষেত্রে max-width: 100%; এবং height: auto; প্রযোজ্য হয়।

উদাহরণ:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

ফলাফল : প্রতিক্রিয়াশীল ইমেজ

 

Image Gallery বা গ্যালারী তৈরি

Bootstrap's grid system এ .thumbnail class যোগ করেও ইমেজ গ্যালারী তৈরি করা যায়।
উদাহরণ:

 <div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of 
      France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" 
      style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.
      </p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>

ফলাফল : ইমেজ গ্যালারী

 

প্রতিক্রিয়াশীল Embed

যে কোনো রকম videos বা slideshows রেসপন্সিভ হিসাবে যোগ করা যেতে পারে। এক্ষেত্রে সরাসরি <iframe>, <embed>, <video>, এবং <object> এলিমেন্ট এ class যোগ করা যায়।

নিম্নোক্ত উদাহরণে <iframe> ট্যাগে .embed-responsive-item class টি যোগ করে video টিকে রেসপন্সিভ আকারে উপস্থাপন করা হয়েছে। এক্ষেত্রে ভিডিওটির containing <div> টি হলো ভিডিওটির parent element, কাজেরই <div> এর মাধ্যমে video টির ratio নির্ধারিত হবে।

উদাহরণ :

 <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ফলাফল : প্রতিক্রিয়াশীল Embed

 

aspect ratio বলতে কি বোঝায়?

কোনো image এর width ও height এর মধ্যকার আনুপাতিক হার বা সম্পর্কই হচ্ছে aspect ratio. সাধারণত দুই প্রকারের video aspect ratios ব্যবহৃত হয় যথা: ৪:৩ (বিংশ শতাব্দীর universal ভিডিও ফরমেট) এবং ১৬:৯ (HD televisio n ও European digital television এর universal ভিডিও ফরমেট)। সম্পূর্ণ Bootstrap Image রেফারেন্স: image এর সকল class এর পরিপূর্ণ রেফারেন্স পেতে Bootstrap Image Reference অধ্যায়টি দেখুন।

 

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

সিএসএস ব্যাকগ্রাউন্ড (CSS Background)

Huge Sell on Popular Electronics

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

CSS background properties ব্যাবহার করা হয় element এর background effects নির্দেশ করার জন্য।

যে CSS properties গুলি background effects এর জন্য ব্যাবহার করা হয় তা নিম্নরুপঃ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

Background Color

একটি element এর background color নির্দিষ্ট করার জন্য background-color property ব্যাবহার করা হয়।
একটি page এর background color নির্ধারণ করার উপায় নিম্নরুপঃ

body {
    background-color: #b0c4de;
}

 

CSS দ্বারা একটি color প্রায়শ এভাবে নির্ধারিত করা হয়ে থাকেঃ

  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"
  • a color name - like "red"

 

নিম্নোক্ত উদাহরণে <h1>, <p>, এবং <div> এলিমেন্ট এর ভিন্ন ভিন্ন ব্যাকগ্রাউন্ড কালার রয়েছে

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

 

Background Image

একটি element এর background হিসেবে image ব্যাবহার করতে চাইলে background-image property ব্যাবহার করতে হয়।
স্বাভাবিক ভাবে image টির পুনরাবৃত্তি ঘটে এবং এটি element অংশ কে আবৃত করে।
একটি page এর background image নিম্নরূপে নির্ধারণ করা হয়ঃ

body {
    background-image: url("paper.gif");
}
নিম্নের উদাহরণ টি text and background image এর অসম জোড় যেখানে text টি প্রায় পড়ার অযোগ্যঃ
body {
    background-image: url("bgdesert.jpg");
}

 

Background Image - Horizontally বা Vertically পুনরাবৃত্তি

স্বাভাবিক ভাবে background-image property একটি image কে horizontally (আনুভূমিক) এবং vertically (উল্লম্ব) ভাবে পুনরাবৃত্তি করে ।
কিছু কিছু image এর ক্ষেত্রে শুধু horizontal অথবা vertical পুনরাবৃত্তির প্রয়োজন হয়, তা নাহলে তাদেরকে অদ্ভুত দেখায়।

body {
    background-image: url("gradient_bg.png");
}

 

যদি image টি শুধুমাত্র horizontally পুনরাবৃত্তি হত তবে background অনেক চমৎকার দেখাত।

body {
     background-image: url("gradient_bg.png");
     background-repeat: repeat-x;
 }

 

Background Image - অবস্থান নির্ধারণ এবং কোন পুনরাবৃত্তি নয়

বিঃ দ্রঃ যখন background image ব্যাবহার করা হয় তখন এমন image ব্যাবহার করা ভাল যা text এর উপর কোন প্রভাব ফেলে না ।

Image কে পুনরাবৃত্তি না করে একবার নির্দিষ্ট করা হয় background-repeat property দ্বারা।

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

 

উপরে বর্ণীত উদাহরণ গুলিতে background image এবং text কে একই জাইগা তে দেখানো হয়েছে । এখন আমরা image এর  জাইগা পরিবর্তন করব যেন image এর জন্য text এর উপর তেমন কোন প্রভাব না পরে।

এখানে background-position property দ্বারা image এর জাইগা ঠিক করা হয়।

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

 

Background - শর্টহ্যান্ড প্রোপার্টি

উপরের উদাহরন গুলি থেকে আপনারা দেখতে পাচ্ছেন যে background কে মনোরম করার জন্য অনেকগুলি properties ব্যাবহার করা হয়েছে।

code কে ছোট করতে সকল properties কে একটি একক properties এ রূপ দেয়া হয়। একে property সংক্ষিপ্ত হয়।

Background এর জন্য shorthand property হচ্ছে "background"।

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

 

যখন shorthand property ব্যাবহার করা হয় তখন value গুলির ক্রম হচ্ছেঃ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

যদি কোন property value না থাকে তবে কোন সমস্যা নেই কিন্তু যদি উপস্থিত থাকে তবে উপরোক্ত ক্রম মেনে চলবে।

এই উদাহরণ টি ব্যাবহার করা হয় advanced CSS এর জন্য।

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin-left: 200px;
    background: #5d9ab2 url("img_tree.png") no-repeat top left;
}

.container {
    text-align: center;
}

.center_div {
    border: 1px solid gray;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color: #d0f0f6;
    text-align: left;
    padding: 8px;
}
</style>
</head>
<body>

<div class="container">
  <div class="center_div">
    <h1>Hello World!</h1>
    <p>This example contains some advanced CSS methods you may not have learned yet. 
    But, we will explain these methods in a later chapter in the tutorial.</p>
  </div>
</div>

</body>
</html>

 

নিজে নিজে চেষ্টা করো

অনুশীলন ০১ঃ

পেজ এর ব্যাকগ্রাউন্ড রঙ হিসেবে "linen" এবং <h1> এর ব্যাকগ্রাউন্ড রঙ হিসেবে "lightblue" নির্ধারণ করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০২ঃ

"paper.gif" নামক ছবিটি পেজ এর ব্যাকগ্রাউন্ড ছবি হিসেবে নির্ধারণ করো

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০৩ঃ

"gradient_bg_vertical.png" নামক ছবিটি ব্যাকগ্রাউন্ড হিসেবে নির্ধারণ করো এবং এটিকে শুধুমাত্র উল্লম্বভাবে পুনরাবৃত্তি ঘটাওঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০৪ঃ
ব্যাকড্রাউন্ড ছবি কেবলমাত্র একবার উপরের দিকে ডান পাশে প্রদর্শন করো

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("img_tree.png");
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুলীন ০৫ঃ

ব্যাকগ্রাইন্ড প্রোপার্টি ব্যবহার করে উপরের দিকে ডান পাশে কেবলমাত্র একবার "img_tree.png" নামক ছবিটি প্রদর্শন করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

সকল সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি

প্রোপার্টি বর্ণনা
background এক ঘোষণায় সকল ব্যাকগ্রাউন্ড বৈশিষ্ট্য নির্ধারণ করে
background-attachment একটি ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট থাকবে বা পেজ এর সাথে স্ক্রল হবে তা নির্ধারণ করে
background-color একটি এলিমেন্ট এর ব্যাকগ্রাউন্ড রং নির্ধারণ করে
background-image একটি এলিমেন্ট জন্য ব্যাকগ্রাউন্ড ইমেজ নির্ধারণ করে
background-position একটি ব্যাকগ্রাউন্ড ইমেজ এর শুরুর অবস্থানে নির্ধারণ করে
background-repeat একটি ব্যাকগ্রাউন্ড ইমেজ কিভাবে পুনরাবৃত্তি হবে তা নির্ধারণ করে