ওয়েব ডিজাইন (পর্ব ১৬) বর্ডার ইমেজ, ব্যাকগ্রাউন্ড, কালার, গ্রেডিয়েন্ট, শ্যাডো, টেক্সট ইফেক্ট
আস্সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো কিভাবে বর্ডার ইমেজ, ব্যাকগ্রাউন্ড, কালার, গ্রেডিয়েন্ট, শ্যাডো, টেক্সট ইফেক্ট তৈরি করা যায়।
বর্ডার ইমেজঃ (Border Image)
border image বানানোর জন্য আপনাকে প্রথমে ফটোশপ ইউজ করে নিচের ফটো এর মতো করে
(চাইলে আলাদা স্টাইল করে)ডিজাইন করে নিতে হবে।অবস্যই স্বচ্ছ ব্যকগ্রাউন্ডে তৈরি
করবেন।
এবার আপনার কাজ হলো প্রথম গোলাপটাকে মেপে নেওয়া যার কারনে আমরা সুন্দর ভাবে
বর্ডার ডিজাইন করতে পারবো। এখানে একটা ফুলের মাপ 39px
নিচের কোড ট্রাই করুন।
<style>
.border {
border: 5px solid transparent;
border-image: url(border-rose.png) 39 round;
}
</style>
<div class="border">Rose Border</div>
ব্যাকগ্রাউন্ড ইমেজ(Background Image)
আপনার কন্টেন্টে যদি আপনি ব্যকগ্রাউন্ড দিতে চান তাহলে background প্রোপার্টি
আপনাকে ইউজ করতে হবে।
নিচের ছবিটি ডাউনলোড করে আপনি ব্যবহার করুন
- background-image - ব্যকগ্রাউন্ডে ছবি দেওয়ার জন্য
- background-repeat - রিপিট কন্ট্রোল করার জন্য
- background-size - ব্যকগ্রাউন্ডের ফটোকে সাইজ করার জন্য
- background-position - ব্যকগ্রাউন্ডে দিক ঠিক করার জন্য
- background-attachment - ব্যকগ্রাউন্ড কোথায় কেমন আচরন করবে তার জন্য
নিচের কোড গুলো ট্রাই করুন।
<style>
body{
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
</style>
<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>
সিএসএস গ্রেডিয়েন্টঃ
সিএসএস গ্রেডিয়েন্ট দিয়ে কালারের সাথে কালারের মিক্স করতে পারবেন বিভিন্ন
ভাবে।এই গ্রেডিয়েন্ট দিয়ে আপনার সাইটের ডিজাইন কে অনেকটা বেশি আই ক্যাচিং করতে
পারবেন।
গ্রেডিয়েন্ট দুই প্রকারঃ
- Linear Gradients
- Radial Gradients
Linear Gradients:
সরল রেখা বরাবর কোনো গ্রেডিয়েন্ট ডিজাইন করার জন্য এই লিনিয়ার গ্রেডিয়েন্ট ইউজ
করা হয়।
linear gradient এর কোড লেখার নিয়ম
নিচের কোড গুলো ট্রাই করুন।
<style>
/*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% );
}
</style>
<div class="lg"></div>
<div class="deg"></div>
<div class="cor"></div>
<div class="mx"></div>Radial Gradients
রেডিয়াল গ্রেডিয়েন্ট হলো মাঝ থেকে চারিদিকে ছড়িয়ে পড়ে। এর কারনে কোনো নির্দিষ্ট
জায়গার মাঝ থেকে ডিজাইন করা যায়।
নিচের কোড গুলো ট্রাই করুন
<style>
.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%);
}
</style>
<div class="ss"></div>
<div class="per"></div>শ্যাডো
শ্যাডো এর কাজ কোনো কিছুর ছায়া তৈরি করা। আমরা এই শ্যাডো দ্বারা কোনো লেখাকে
শ্যাডো করতে পারি আবার চাইলে নির্দিষ্ট জায়গা বক্স শ্যাডো করতে পারি।
শ্যাডো দুই প্রকারঃ
- Text Shadow
- Box Shadow
নিচের কোড গুলো ট্রাই করুন।
<style>
/*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;
}
</style>
<div class="ts">WIKIJANA.COM</div>
<div class="bs">Practice in your life</div>টেক্সট ইফেক্ট
টেক্সট ইফেক্ট টা খুবই গুরুত্বপূর্ন কারন আপনার যেকোনো লেখাকে সুন্দরভাবে
প্রদর্শনের জন্য এই গুলো জানা প্রয়োজন।
যে গুলো জানতেই হবেঃ
- text-overflow - লেখা ellipsis (দুই বা ততধিক শব্দ আছে এমন বুঝায়) অথবা ক্লিক করা যায়।
- word-wrap - লেখাটা একই লাইনে থাকবে নাকি লাইন শেষে নিচের লাইনে আসবে।
- word-break - লেখাকে ভেঙ্গে অথবা না ভেঙ্গে প্রকাশ করা
- writing-mode - লেখার মোড চেন্জ করার জন্য ব্যবহার হয়।
এবার নিচের কোড গুলো ট্রাই করুন।
<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>
<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>এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।
