ওয়েব ডিজাইন (পর্ব ১৯)ইমেজ গ্যালারি, রাউন্ডেড কর্নার, বর্ডার ইমেজ, ব্যাকগ্রাউন্ড, কালার, গ্রেডিয়েন্ট, শ্যাডো, টেক্সট ইফেক্ট

ওয়েব ডিজাইন (পর্ব ১৯)ইমেজ গ্যালারি, রাউন্ডেড কর্নার, বর্ডার ইমেজ, ব্যাকগ্রাউন্ড, কালার, গ্রেডিয়েন্ট, শ্যাডো, টেক্সট ইফেক্ট
বৃহস্পতিবার, ৩১ ডিসেম্বর, ২০২০

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো কিভাবে ইমেজ গ্যালারি, রাউন্ডেড কর্নার, বর্ডার ইমেজ, ব্যাকগ্রাউন্ড, কালার, গ্রেডিয়েন্ট, শ্যাডো, টেক্সট ইফেক্ট তৈরি করা যায়।

ইমেজ গ্যালারিঃ

ইমেজ গ্যালারি প্রয়োজন হয় যখন আমাদের অনেক গুলো ফটো একই জায়গায় সুন্দর ভাবে সাজিয়ে প্রকাশ করার দরকার হয়।এইকাজটা কিভাবে করা যায় এটাই আমরা এখন দেখবো।


প্রথমে আমরা একটা index.html নামে একটা HTML ফাইল নিই। তারপর আরেকটা style.css নামে আরেকটা ফাইল নিই।
এবং একটা image নামে একটা ফোল্ডার তৈরি করি, এই ফোল্ডারে কিছু একই মাপের ফটো রাখুন।
html css  file save
এবার index.html ফাইলটা নোটপ্যাড এ ওপেন করি। এবং ওখানে আমরা আমাদের HTML কোড গুলো লিখি।


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<div class="photo">
	<a href="image/1.jpg">
	<img src="image/1.jpg" alt="" width="300" height="300"/>
	</a>
	<div class="text">Lorem ipsum dolor sit amet consectetur adipiscing elit ridiculus, facilisis molestie facilisi non lectus vitae eget.</div>
	</div>	
	<div class="photo">
	<a href="image/2.jpg">
	<img src="image/2.jpg" alt="" width="300" height="300"/>
	</a>
	<div class="text">Lorem ipsum dolor sit amet consectetur adipiscing elit ridiculus, facilisis molestie facilisi non lectus vitae eget.</div>
	</div>	
	<div class="photo">
	<a href="image/3.jpg">
	<img src="image/3.jpg" alt="" width="300" height="300"/>
	</a>
	<div class="text">Lorem ipsum dolor sit amet consectetur adipiscing elit ridiculus, facilisis molestie facilisi non lectus vitae eget.</div>
	</div>	
	<div class="photo">
	<a href="image/4.jpg">
	<img src="image/4.jpg" alt="" width="300" height="300"/>
	</a>
	<div class="text">Lorem ipsum dolor sit amet consectetur adipiscing elit ridiculus, facilisis molestie facilisi non lectus vitae eget.</div>
	</div>
	<div class="photo">
	<a href="image/5.jpg">
	<img src="image/5.jpg" alt="" width="300" height="300"/>
	</a>
	<div class="text">Lorem ipsum dolor sit amet consectetur adipiscing elit ridiculus, facilisis molestie facilisi non lectus vitae eget.</div>
	</div>
</body>
</html>

নীল কালার করা জায়গা টুকু হলো এক্সটার্নাল সিএসএস লিংক করা হয়েছে।এবং লাল কালার করা হলো আমাদের গ্যালারি তৈরি করার এইচটিএমএল কোড।

এখান photo নামের ক্লাসের সিএসএস লিখবো।এখানে margin, border, width ও float নেওয়া হয়েছে। float এর মাধ্যমে আমরা সব ফটোকে বাম পাশ থেকে পরপর সাজাতে পারবো।

.photo{
	margin:8px;
	border:8px solid #80CBC4;
	float:left;
	width:300px;
}
এবার ইমেজকে ডিজাইন করার জন্য ইমেজকে সিলেক্ট করতে হবে এখানে img ট্যাগটা photo ক্লাসের অধিনে তাই ক্লাস আর ট্যাগ দিয়ে সিলেক্টর তৈরি করা হয়েছে।এই সিএসএস এ ছবির পুরো মাপ নেওয়া হয়েছে।
.photo img{
	width:100%;
	height:auto;
}
এবার ছবির নিচের লেখা গুলোকে ঠিক ঠাক করবো।ছবির নিচের লেখা গুলো মাঝ বরাবর রাখবো এবং প্যাডিং দিবো যাতে করে লেখা গুলো মাঝ বরাবর চেপে যায়।

  .text{
	text-align:center;
	padding:10px;
}
এবার আমরা বর্ডার হবার এড করবো যাতে করে ছবির উপর মাউস নিলে বর্ডার কালার চেন্জ হবে।
.photo:hover{
	border:8px solid #00695C;
}

রাউন্ডেড কর্নারঃ

আমাদের ডিজাইনে যখন আমরা বর্ডার এর কর্নার রাউন্ড করি তবে ভালোই লাগে।সুন্দর ভাবে রাউন্ড করতে পারলে আরো আকর্ষনীয় হয়ে যায়।

এই rounded corner করতে পারবেন সরাসরি আলাদা আলাদা CSS দিয়ে আবার চাইলে সর্টহ্যান্ড পদ্ধতিতেও করতে পারবেন।
আলাদা আলাদা ভাবে করতে নিচের মতো করুন

border-top-left-radius - উপর বামে বাকাবে 
border-top-right-radius -উপর ডানে বাকাবে
border-bottom-right-radius -নিচে ডানে বাকাবে
border-bottom-left-radius -নিচে বামে বাকাবে

border-top-left-radius:20px;
আমি সাজেস্ট করবো সর্টহ্যান্ড পদ্ধতিতে করা কারন খুব সংক্ষিপ্ত আকারে সুন্দর করে কোড লেখা যায়।
নিচের কোড গুলো ট্রাই করুন
	<style type="text/css">
	.round{
	height:300px;
	width:500px;
	background:green;
	border-radius:20px;
}
.round1{
	height:300px;
	width:500px;
	background:black;
	border-radius:10px 80px;
}
	</style>
	<div class="round"></div>
	<div class="round1"></div>

বর্ডার ইমেজঃ

border image বানানোর জন্য আপনাকে প্রথমে ফটোশপ ইউজ করে নিচের ফটো এর মতো করে (চাইলে আলাদা স্টাইল করে)ডিজাইন করে নিতে হবে।অবস্যই স্বচ্ছ ব্যকগ্রাউন্ডে তৈরি করবেন।
css border image style
এবার আপনার কাজ হলো প্রথম গোলাপটাকে মেপে নেওয়া যার কারনে আমরা সুন্দর ভাবে বর্ডার ডিজাইন করতে পারবো। এখানে একটা ফুলের মাপ 39px

নিচের কোড ট্রাই করুন।
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>Border Image</title>
	<style type="text/css">
	.border {
    border: 5px solid transparent;
    border-image: url(border-rose.png) 39 round;
	}
</style>
</head>
<body>
	<div class="border">Rose Border</div>
</body>
</html>

ব্যাকগ্রাউন্ডঃ

আপনার কন্টেন্টে যদি আপনি ব্যকগ্রাউন্ড দিতে চান তাহলে background প্রোপার্টি আপনাকে ইউজ করতে হবে।
নিচের ছবিটি ডাউনলোড করে আপনি ব্যবহার করুন

background-image - ব্যকগ্রাউন্ডে ছবি দেওয়ার জন্য
background-repeat - রিপিট কন্ট্রোল করার জন্য
background-size - ব্যকগ্রাউন্ডের ফটোকে সাইজ করার জন্য
background-position - ব্যকগ্রাউন্ডে দিক ঠিক করার জন্য
background-attachment - ব্যকগ্রাউন্ড কোথায় কেমন আচরন করবে তার জন্য

নিচের কোড গুলো ট্রাই করুন
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>Border Image</title>
<style type="text/css">
body{
	background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
</style>
</head>
<body>
<div class="nowork">Lorem ipsum dolor sit amet consectetur adipiscing elit morbi, mus primis sodales ligula magnis sem lacinia sagittis, duis quis nascetur est ultrices erat ad. Elementum taciti interdum dis tempor netus mollis conubia habitant purus tellus integer, mi venenatis dictum semper in turpis per himenaeos dui. Hac eleifend iaculis dis dignissim platea, id at vivamus orci nibh, semper parturient phasellus libero. Leo mi dapibus augue hendrerit purus potenti montes magna, turpis proin ridiculus lacus dictumst et suspendisse elementum nullam, ornare nulla sodales est conubia tortor laoreet. In dapibus vitae pellentesque cursus curabitur tristique purus, netus placerat arcu accumsan faucibus a duis justo, nostra ut erat porttitor rutrum parturient. Nullam tristique vestibulum habitant sollicitudin mus gravida rhoncus tincidunt proin massa, montes morbi fames nunc dictumst a sodales etiam condimentum taciti nisl, ante ligula maecenas tortor sagittis ultrices iaculis nisi penatibus.</div>
</body>
</html>

সিএসএস গ্রেডিয়েন্টঃ

সিএসএস গ্রেডিয়েন্ট দিয়ে কালারের সাথে কালারের মিক্স করতে পারবেন বিভিন্ন ভাবে।এই গ্রেডিয়েন্ট দিয়ে আপনার সাইটের ডিজাইন কে অনেকটা বেশি আই ক্যাচিং করতে পারবেন।
গ্রেডিয়েন্ট দুই প্রকারঃ
  1. Linear Gradients
  2. Radial Gradients

Linear Gradients:

সরল রেখা বরাবর কোনো গ্রেডিয়েন্ট ডিজাইন করার জন্য এই লিনিয়ার গ্রেডিয়েন্ট ইউজ করা হয়।
linear gradient এর কোড লেখার নিয়ম
নিচের কোড গুলো ট্রাই করুন।

HTML কোড
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>Gradient Linear</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lg"></div>
<div class="deg"></div>
<div class="cor"></div>
<div class="mx"></div>
</body>
</html>
CSS Code
/*Muli step color*/
.lg{
	width:300px;
	height:400px;
	background-image:linear-gradient(red, green)
}
/*degree style*/
.deg{
	width:500px;
	height:200px;
	background-image:linear-gradient(90deg, red, white)
}
/*corner style*/
.cor{
    width: 500px;
    height: 300px;
    background-image: linear-gradient(to bottom right,red,black);
}
/*mix gradient*/
.mx{
	width:400px;
	height:300px;
	background-image: linear-gradient(180deg, red, green 30%, black 50% );
}

Radial Gradients

রেডিয়াল গ্রেডিয়েন্ট হলো মাঝ থেকে চারিদিকে ছড়িয়ে পড়ে। এর কারনে কোনো নির্দিষ্ট জায়গার মাঝ থেকে ডিজাইন করা যায়।

নিচের কোড গুলো ট্রাই করুন
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>Radial Gradients</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ss"></div>
<div class="per"></div>
</body>
</html>
CSS
.ss {
  height: 150px;
  width: 200px;
  background-color: red;
  background-image: radial-gradient(circle, red, black, green);
}
.per {
  height: 150px;
  width: 200px;
  background-color: green;
  background-image: radial-gradient(red 10%, yellow 15%, green 30%);
}

শ্যাডো

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

শ্যাডো দুই প্রকারঃ
  1. Text Shadow
  2. Box Shadow
নিচেতে দুইটার ই কোড দেওয়া হলোঃ

HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>Text and Box Shadow</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ts">WIKIJANA.COM</div>
<div class="bs">Practice in your life</div>
</body>
</html>
CSS
  /*text shadow*/
  .ts{
	color: white;
    text-shadow: 0px 0px 2px #000000;
  }
    /*box shadow*/
  .bs{
	width: 200px;
    height: 100px;
    padding: 15px;
    background-color: green;
    box-shadow: 10px 10px 5px grey;
    color: white;
  }

টেক্সট ইফেক্ট

টেক্সট ইফেক্ট টা খুবই গুরুত্বপূর্ন কারন আপনার যেকোনো লেখাকে সুন্দরভাবে প্রদর্শনের জন্য এই গুলো জানা প্রয়োজন।
যে গুলো জানতেই হবেঃ
  1. text-overflow - লেখা ellipsis (দুই বা ততধিক শব্দ আছে এমন বুঝায়) অথবা ক্লিক করা যায়।
  2. word-wrap - লেখাটা একই লাইনে থাকবে নাকি লাইন শেষে নিচের লাইনে আসবে।
  3. word-break - লেখাকে ভেঙ্গে অথবা না ভেঙ্গে প্রকাশ করা
  4. writing-mode - লেখার মোড চেন্জ করার জন্য ব্যবহার হয়।
নিচের কোডগুলো ট্রাই করুন
<!DOCTYPE html>
<html>
<head>
<style> 

/* ellipsis system*/

.to {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Word Wrap*/

.ww {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}

/* inline vertical text*/

.inline-wm {
  writing-mode: vertical-rl; 
}

/* vertical text*/

.wm {
  writing-mode: vertical-rl; 
}
</style>
</head>
<body>

<p class="to">Lorem ipsum dolor sit amet consectetur adipiscing elit facilisi, nostra viverra morbi</p>
<p class="ww"> Lorem ipsum dolor sit amet consectetur adipiscing elit, platea dapibus mauris massa ut tempor auctor, per felis neque ante cum vivamus.</p>

<p>Lorem ipsum dolor sit amet<span class="inline-wm">Lorem ipsum</span> commodo torquent convallis fames vestibulum malesuada.</p>

<p class="wm">Lorem ipsum dolor sit amet consectetur adipiscing</p>
</body>
</html>

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে। 







Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.