কম্পিউটার টিউটোরিয়াল

CSS শ্যাডো ইফেক্ট


text-shadow এবং box-shadow প্রপার্টি ব্যবহার করে যথাক্রমে টেক্সট এবং এলিমেন্টে শ্যাডো যোগ করুন।

উদাহরণ

নিচের কোডটি CSS-এ শ্যাডো ইফেক্টের পদ্ধতি দেখায়:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
    color: rgb(28, 0, 128);
    text-shadow: red 2px 4px 2px;
}
div {
    color: white;
    text-align: center;
    width: 100px;
    height: 100px;
    background-color: red;
    box-shadow: rgb(89, 0, 255) 8px 2px 8px;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<h2>Text shadows</h2>
<div>BOX SHADOW</div>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

CSS শ্যাডো ইফেক্ট


  1. CSS-এ রোটেট ইন অ্যানিমেশন ইফেক্ট

  2. CSS-এ রোল ইন অ্যানিমেশন ইফেক্ট

  3. CSS দিয়ে শেক অ্যানিমেশন ইফেক্ট তৈরি

  4. CSS দিয়ে শ্যাডোতে ব্লার ইফেক্ট যোগ করা