X

X

X

CSS3 Shadow Effects । শ্যাডো ইফেক্ট


Norway

Box Shadow

CSS3 ব্যবহার করে ইচ্ছেমত শ্যাডো ইফেক্ট তৈরি করা যায়!

আমার উপরে মাউস রাখুন!

CSS3 Shadow Effects

CSS3 ব্যবহার করে টেক্সট এমনকি যেকোনো ইলামেন্টে শ্যাডো ইফেক্ট যুক্ত করা যায়।

এই অধ্যায়ে নিম্নোক্ত প্রপার্টিগুলো সম্পর্কে আলোচনা করা হবে:

  • text-shadow
  • box-shadow

Browser Support

প্রপার্টি
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

CSS3 Text Shadow

CSS3 text-shadow property ব্যবহার করে যেকোনো ইলামেন্টের টেক্সটে শ্যাডো ইফেক্ট যুক্ত করা যায়।

Text shadow effect!

Code Example

h1 {
    text-shadow: 2px 2px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


এখন শ্যাডোর জন্য রং সেট করুন:

Text shadow effect!

Code Example

h1 {
    text-shadow: 2px 2px red;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এবার ব্লার ইফেক্ট যুক্ত করুন:

Text shadow effect!

Code Example

h1 {
    text-shadow: 2px 2px 5px red;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে সাদার রংয়ের টেক্সটে কালো রংয়ের শ্যাডো ইফেক্ট যুক্ত করে দেখানো হলো:

Text shadow effect!

Code Example

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে লাল – নিয়ন শ্যাডো যুক্ত করে দেখানো হলো:

Text shadow effect!

Code Example

h1 {
    text-shadow: 0 0 3px #FF0000;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


একাধিক শ্যাডো

একাধিক শ্যাডো ব্যবহার করার জন্য কমা দিয়ে তাদের মান লিখতে হবে।

Text shadow effect!

Code Example

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে সাদা টেক্সট এ কালো, নীল ও গাঢ়নীল রংয়ের সমন্বয়ে শ্যাডো ইফেক্ট তৈরি করে দেখানো হলো:

Text shadow effect!

Code Example

h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

text-shadow property ব্যবহার করে পরোক্ষভাবে টেক্সটের জন্য বর্ডারও তৈরি করা যায়।

Border around text!

Code Example

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS3 box-shadow Property

CSS3 box-shadow property ব্যবহার করে ইলামেন্টে শ্যাডো ইফেক্ট যুক্ত করা হয়।

সিম্পল ব্যবহারের জন্য শুধুমাত্র আনুভূমিক ও উল্লম্বিক শ্যাডো যুক্ত করবেন:

This is a yellow <div> element with a black box-shadow

Code Example

div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এবার এতে রং যুক্ত করুন:

This is a yellow <div> element with a grey box-shadow

Code Example

div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px grey;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এবার এটিতে ব্লার ইফেক্ট যুক্ত করুন:

This is a yellow <div> element with a blurred, grey box-shadow

Code Example

div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 5px grey;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

::before ও ::after pseudo-element ব্যবহার করে আরও মজাদার ইফেক্ট তৈরি করতে পারবেন:

Code Example

#boxshadow {
    position: relative;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

/* Make the image fit the box */
#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Card ডিজাইন

box-shadow property ব্যবহার করে paper-like card ডিজাইন করা যায়:

1

January 1, 2016

Norway

Hardanger, Norway

Example

div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

Try it (Text Card) » Try it (Image Card) »


নিজে নিজে চর্চা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »


CSS3 Shadow Property সমূহ

The following table lists the CSS3 shadow properties:

প্রপার্টি বর্ণনা
box-shadow কোনো ইলামেন্টে এক বা একাধিক শ্যাডো ইফেক্ট যুক্ত করার জন্য এটি ব্যবহৃত হয়।
text-shadow টেক্সটে এক বা একাধিক শ্যাডো ইফেক্ট যুক্ত করার জন্য এটি ব্যবহৃত হয়।