Awesome! টিউনস
সকল Awesome! টিউনস

সিএসএস-৩ এর মাধ্যমে বক্স-শেডো তৈরি

1,319 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 0

162 টিউনস 69 টিউমেন্টস 1 ফলোয়ার

ড্রপ শেডো এবং ইনার শেডো এই এফেক্টগুলো আমরা ফটোশপের মাধ্যমে ইমেজ বানিয়ে ওয়েবপেজে ব্যবহার করে থাকি।  এতে করে দেখা যায় পেজ অনেক ভারি হয়ে যাচ্ছে বেশি ইমেজ ব্যবহার করলে। এসকল শেডো ইফেক্ট  CSS3 এর মাধমে দেওয়া যায়।

ডেমোতে দেখে নিতে পারেন আজকে কাজ শেষে তৈরিকৃত বক্স শেডোটি-


প্রক্রিয়াটি ধাপে ধাপে নিচে লেখা হল-
বক্স শেডোর প্রপার্টিতে value  ঠিক করে দিতে হবে

যেমন- box-shadow: 3px 3px 10px 5px #000;

নিচের মত করে বক্স জেনারেট হবে


<style> ট্যাগের মধ্যে নিচে সিএসএস উপাদানগুলো লিখব।
body প্রপার্টির মধ্যে ব্যাকগ্রাউন্ড সিলেক্ট করে দিলাম

body{background-color:#999;}
h3{color:#999;font:Adobe Ming Std L;font-weight:bold;}

বক্স শেডোর জন্য নিচের কোডগুলো লিখলাম
body:before
{
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
#box
{
position: relative;
width: 60%;
background: #ddd;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
margin: 60px auto;
}

#box:before, #box:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

#box:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}

<body> ট্যাগের মধ্যে নিচের এইচটিএমএল উপাদান লিখলাম।

<div id="box"><h3>Hello. This is CSS3 box-shadow</h3>
This is CSS3 box-shadow</div>

সব কোড একসাথে লিখে নোটপ্যাডে practice.html সেভ করলে শেডো এফেক্ট পেজ ব্রাউজারে ওপেন হবে।

পোস্টটির মূল লেখক: টিউটোহোস্ট টিম সদস্য "নিলুফার ইয়াসমিন"
পোস্টটি ইতোপূর্বে:এখানে প্রকাশিত

Level 0

আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস