TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে CSS দিয়ে বক্স শ্যাডো তৈরি করবেন?

5

CSS “বক্স-শ্যাডো" প্রপার্টি আপনাকে আপনার পৃষ্ঠার উপাদানগুলিতে সহজ ছায়া প্রভাব তৈরি করতে দেয়। আপনি এই সম্পত্তি ব্যবহার করে উপরে, নীচে, ডান এবং বাম দিকের ছায়া প্রভাব সহ সুন্দর বক্স তৈরি করতে পারেন। এই টিউটোরিয়ালে আমরা ব্যবহার করব: ছদ্ম উপাদান আগে একটি টেক্সট বক্সে ছায়া প্রভাব বিভিন্ন শৈলী তৈরি করতে ।

সম্পর্কিত: কিভাবে ফন্ট অসাধারণ আইকন ইমেজ রূপান্তর করতে?

সিএসএস বক্স-ছায়া সম্পত্তি সিনট্যাক্স

বাক্স-ছায়া সম্পত্তির বাক্য গঠন নিম্নরূপ:

box-shadow: horizontal offset | vertical offset | blur | spread | color | direction

বক্স-ছায়া: 10px 10px 10px 10px সবুজ ইনসেট হলে নিচে একটি উদাহরণ দেওয়া হল; একটি ডিভ উপাদান দিয়ে ব্যবহৃত হয়:

ইনসেট সহ বক্স শ্যাডো

ইনসেট মান নির্দেশ করে যে ছায়ার দিকটি উপাদানটির ভিতরে থাকা উচিত। উপাদানটির বাইরে ছায়া প্রভাব তৈরি করতে আপনি শুরুতে ব্যবহার করতে পারেন।

কিভাবে CSS এর সাহায্যে Shadow Effects তৈরি করবেন?

আসুন CSS ছদ্ম উপাদান ব্যবহার করে একটি ছায়া প্রভাব তৈরি করি। প্রথমে নিচের সিএসএস কোড ব্যবহার করে একটি বক্স তৈরি করুন। যদি আপনি নির্দিষ্ট উচ্চতা এবং প্রস্থ মান ব্যবহার করতে চান তবে আমরা মাত্রা নির্ধারণ না করে বাক্সটি ছেড়ে যাই।

.box { background-color:#CDDC39; color: #333333; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: 1px solid #cccccc; margin: 20px; padding: 15px; font-size: 18px; }

পরবর্তী, নীচের CSS দিয়ে একটি ছায়া তৈরি করুন:

.shadow { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .shadow:before { position: absolute; z-index: -1; display: block; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); content: ""; }

আমরা বাম দিকে ছায়া প্রদর্শন করব এবং নীচের এবং বাম মান ব্যবহার করে অবস্থান সামঞ্জস্য করব।

.left-shadow:before { bottom: 25px; left: 20px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); }

বাম ছায়ার অনুরূপ, নীচের মতো ডান, নীচে এবং সাধারণ ছায়ার জন্য পৃথক শৈলী নির্ধারণ করুন।

.right-shadow:before { right: 20px; bottom: 25px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } .bottom-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .simple-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; }

ছায়া প্রভাবের জন্য এইচটিএমএল

S ছায়া বাক্স তৈরির জন্য আমাদের HTML এর সাথে উপরের তিনটি CSS ক্লাসের একটি ব্যবহার করতে হবে।

  • বক্স ক্লাস
  • ছায়া শ্রেণী
  • ছায়া শৈলীগুলির মধ্যে একটি বেছে নিন-বাম-ছায়া, ডান-ছায়া, নীচে-ছায়া বা সরল-ছায়া

উদাহরণস্বরূপ একটি ডিভ উপাদানটিতে বাম ছায়া যুক্ত করার জন্য নীচের HTML কোড রয়েছে:

<div class="box shadow left-shadow"> This is a text box with left shadow. The text inside the box is aligned with "height: 100px; width: 70%; margin: 20px; padding: 15px; font-size: 18px;". The shadow in the left is aligned with "bottom: 25px; left: 20px; width: 60%; height: 20px;". </div>

CSS Shadow Effects এর ডেমো

আপনি সিএসএস সামঞ্জস্য করতে পারেন এবং ডান ছায়া, নীচের ছায়া এবং সরল ছায়া প্রভাব তৈরি করতে পারেন। নিচে CSS ছায়া প্রভাব সহ কিছু ডেমো দেওয়া হল।

বাম পাশের ছায়া প্রভাব

এটি বাম ছায়া সহ একটি পাঠ্য বাক্স। বাক্সের ভিতরে লেখা "উচ্চতা: 100px; প্রস্থ: 70%; মার্জিন: 20px; প্যাডিং: 15px; ফন্ট-সাইজ: 18px;" বাম দিকে ছায়া "নীচে: 25px; বাম: 20px; প্রস্থ: 60%; উচ্চতা: 20px;"

ডান পাশের ছায়া প্রভাব

এটি ডান ছায়া সহ একটি পাঠ্য বাক্স। বাক্সের ভিতরে লেখা "উচ্চতা: 100px; প্রস্থ: 70%; মার্জিন: 20px; প্যাডিং: 15px; ফন্ট-সাইজ: 18px;" ডানদিকে ছায়া "ডান: 20px; নীচে: 25px; প্রস্থ: 60%; উচ্চতা: 20px;"

নিচের সিএসএস শ্যাডো এফেক্ট

এটি নীচের ছায়া সহ একটি পাঠ্য বাক্স। বাক্সের ভিতরে লেখা "উচ্চতা: 100px; প্রস্থ: 70%; মার্জিন: 20px; প্যাডিং: 15px; ফন্ট-সাইজ: 18px;" নীচের ছায়াটি "ডান: 20px; নীচে: 0; বাম: 20px; উচ্চতা: 30px;" এর সাথে সংযুক্ত।

সহজ সিএসএস শ্যাডো বক্স

এটি সহজ ছায়া সহ একটি পাঠ্য বাক্স। বাক্সের ভিতরে লেখা "উচ্চতা: 100px; প্রস্থ: 70%; মার্জিন: 20px; প্যাডিং: 15px; ফন্ট-সাইজ: 18px;" ছায়াটি "ডান: 20px; নীচে: 0; বাম: 20px; উচ্চতা: 30px;" এর সাথে সংযুক্ত।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত