ইমেজ গ্যালারিঃ
ইমেজ গ্যালারি প্রয়োজন হয় যখন আমাদের অনেক গুলো ফটো একই জায়গায় সুন্দর ভাবে
সাজিয়ে প্রকাশ করার দরকার হয়।এইকাজটা কিভাবে করা যায় এটাই আমরা এখন দেখবো।
প্রথমে আমরা একটা index.html নামে একটা HTML ফাইল নিই। তারপর আরেকটা style.css নামে আরেকটা ফাইল নিই।
এবং একটা image নামে একটা ফোল্ডার তৈরি করি, এই ফোল্ডারে কিছু একই মাপের ফটো
রাখুন।
<!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;
}.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 বানানোর জন্য আপনাকে প্রথমে ফটোশপ ইউজ করে নিচের ফটো এর মতো করে
(চাইলে আলাদা স্টাইল করে)ডিজাইন করে নিতে হবে।অবস্যই স্বচ্ছ ব্যকগ্রাউন্ডে
তৈরি করবেন।
নিচের কোড ট্রাই করুন।
<!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>সিএসএস গ্রেডিয়েন্টঃ
সিএসএস গ্রেডিয়েন্ট দিয়ে কালারের সাথে কালারের মিক্স করতে পারবেন বিভিন্ন
ভাবে।এই গ্রেডিয়েন্ট দিয়ে আপনার সাইটের ডিজাইন কে অনেকটা বেশি আই ক্যাচিং
করতে পারবেন।
গ্রেডিয়েন্ট দুই প্রকারঃ
- Linear Gradients
- 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>.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%);
}শ্যাডো
শ্যাডো এর কাজ কোনো কিছুর ছায়া তৈরি করা। আমরা এই শ্যাডো দ্বারা কোনো লেখাকে
শ্যাডো করতে পারি আবার চাইলে নির্দিষ্ট জায়গা বক্স শ্যাডো করতে পারি।
শ্যাডো দুই প্রকারঃ
- Text Shadow
- 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> /*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;
}টেক্সট ইফেক্ট
টেক্সট ইফেক্ট টা খুবই গুরুত্বপূর্ন কারন আপনার যেকোনো লেখাকে সুন্দরভাবে
প্রদর্শনের জন্য এই গুলো জানা প্রয়োজন।
যে গুলো জানতেই হবেঃ
- text-overflow - লেখা ellipsis (দুই বা ততধিক শব্দ আছে এমন বুঝায়) অথবা ক্লিক করা যায়।
- word-wrap - লেখাটা একই লাইনে থাকবে নাকি লাইন শেষে নিচের লাইনে আসবে।
- word-break - লেখাকে ভেঙ্গে অথবা না ভেঙ্গে প্রকাশ করা
- 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>