উত্তর:
দ্রষ্টব্য: আমি নীচে @ হামিশের উত্তরটি পরীক্ষা করার পরামর্শ দিচ্ছি ; এটি এখানে বর্ণিত সমাধানটিতে অসম্পূর্ণ "মাস্কিং" জড়িত না।
আপনি একাধিক বাক্স-ছায়া দিয়ে কাছে যেতে পারেন; প্রতিটি পক্ষের জন্য একটি
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);সম্পাদন করা
উপরের অংশ এবং নীচের অংশের জন্য আরও 2 টি বাক্স-ছায়া যুক্ত করুন যাতে রক্তক্ষরণ হয় mas
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);আমি ডিফোরের সমাধানটিতে উপস্থিত ছায়া গোছানো উপরে এবং নীচে সন্তুষ্ট ছিল না তাই আমার নিজের তৈরি হয়েছিল।
ইনসেট box-shadow;উপরের এবং নীচের অংশটি কাটা দিয়ে একটি দুর্দান্ত অভিন্ন ছায়া তৈরি করে:
box-shadow: -15px 0 15px -15px inset;আপনার উপাদানের পক্ষের এই মর্মে ব্যবহার করার জন্য, দুই ছদ্ম উপাদানের তৈরি :beforeএবং :afterমূল উপাদান পক্ষের একেবারে স্থান।
div {
position: relative;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
content: " ";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
}
etc...:afterপ্রয়োজনগুলিও নোট করুন top: 0।
display: inline-blockআপনার উদাহরণটি কাজ করার জন্য আমাকে সিউডো ক্লাসে যুক্ত করতে হয়েছিল। সব মিলিয়ে: দুর্দান্ত সমাধান। +1
notকোনও সহায়তাকারী <div>উপাদানকেই পুনরুদ্ধার করে। :-)
এটি চেষ্টা করুন, এটি আমার জন্য কাজ করছে:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;সিএসএস বক্স-শ্যাডো 4 টি প্যারামিটার ব্যবহার করে: এইচ-শ্যাডো, ভি-শ্যাডো, ব্লার, স্প্রেড:
box-shadow: 10px 0 8px -8px black;ভি-ছায়া (উলম্ব ছায়া) 0 সেট করা হয়।
দাগ প্যারামিটার গ্রেডিয়েন্ট প্রভাব যোগ করেন, কিন্তু এছাড়াও উল্লম্ব সীমানা (এক আমরা পরিত্রাণ পেতে চান) উপর একটু ছায়া যোগ করে।
নেতিবাচক স্প্রেড সমস্ত সীমানায় ছায়া হ্রাস করে: আপনি একপাশের ওএনএনকে খুব বেশি প্রভাবিত না করে সেই সামান্য উল্লম্ব ছায়া সরিয়ে দেওয়ার চেষ্টা করে খেলতে পারেন (এটি ছোট ছায়ার পক্ষে সহজ, 5 থেকে 10px।)
এখানে একটি মূর্খ উদাহরণ।
আপনার উপাদানটিতে একটি খালি ডিভ যুক্ত করুন এবং এটিকে নিখুঁত অবস্থানের সাথে স্টাইল করুন যাতে এটি উপাদান সামগ্রীতে প্রভাব ফেলবে না।
বাম-ছায়ার উদাহরণ সহ এখানে ঝাঁকুনি ।
<div id="container">
<div class="shadow"></div>
</div>
.shadow{
position:absolute;
height: 100%;
width: 4px;
left:0px;
top:0px;
box-shadow: -4px 0 3px black;
}যদি আপনার একটি স্থির পটভূমি থাকে তবে আপনি দুটি মুখোশ ছায়ার সাথে পটভূমির একই রঙ ধারণ করে এবং ঝাপসা = 0 দিয়ে পার্শ্ব-ছায়া প্রভাবটি আড়াল করতে পারেন, উদাহরণস্বরূপ:
box-shadow:
0 -6px white, // Top Masking Shadow
0 6px white, // Bottom Masking Shadow
7px 0 4px -3px black, // Left-shadow
-7px 0 4px -3px black; // Right-shadowআমি আবার কালো ছায়ায় একটি নেতিবাচক স্প্রেড (-3px) যুক্ত করেছি, সুতরাং এটি কোণার বাইরে প্রসারিত হয় না।
এখানে ঝাঁকুনি ।
এটি সমস্ত ব্রাউজারের জন্য দুর্দান্ত কাজ করে:
-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;আপনি একাধিক ব্যবহার করতে হবে box-shadow;। ইনসেট সম্পত্তি এটিকে সুন্দর এবং অভ্যন্তর দেখায়
div {
box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}আর একটি উপায় রয়েছে: overflow-y:hiddenপ্যাডিং সহ পিতামাতার উপরে।
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}clip-pathউপাদানগুলির নির্দিষ্ট দিকগুলিতে বক্স-ছায়া অর্জন করার জন্য আমি এখন (2020) সবচেয়ে ভাল উপায় খুঁজে পেয়েছি, বিশেষত যখন প্রয়োজনীয় প্রভাবটি নির্দিষ্ট প্রান্তগুলিতে "ক্লিন কাট" ছায়া থাকে তবে :
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px -15px);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}<div class="shadow-element"></div>... এর মতো ক্ষীণ / হ্রাস / পাতলা ছায়ার বিপরীতে:
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}<div class="shadow-element"></div>প্রশ্নযুক্ত উপাদানটিতে কেবল নিম্নলিখিত সিএসএস প্রয়োগ করুন:
box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);কোথায়:
Apx শীর্ষ প্রান্তের জন্য ছায়া দৃশ্যমানতা সেট করেBpx অধিকারCpx পাদDpx বামযে ছায়াটি লুকানো উচিত সেখানে কোনও প্রান্তের জন্য 0 এর মান লিখুন এবং ছায়াটি প্রদর্শিত হওয়া উচিত এমন কোনও প্রান্তে নেতিবাচক মান (ঝাপসা ব্যাসার্ধ + স্প্রেডের সম্মিলিত ফলাফলের সমান - Xpx + Ypx) Enter
clip-pathউদাহরণটি দেখছেন ? 2 টি কোড স্নিপেট রয়েছে। প্রথমটি ব্যবহার করে clip-pathএবং "শীর্ষে এবং নীচের কোণগুলিকে কার্ভিং ইন" না করে সম্পূর্ণ পরিষ্কার কাটা হয়েছে - এটি আপনার সমাধানের মতো (তবে অনেক কম সিএসএস প্রয়োজন)। দ্বিতীয় কোড-স্নিপেট কেবল তুলনার জন্য একটি উদাহরণ - অনেকগুলি সমাধান বিচ্ছুরিত বাক্স-ছায়ায় তৈরি করে যা প্রায়শই লোকেরা অর্জন করতে চায় না।
box-shadowসম্পত্তিটিকে এমন কোনও কিছুর সাথে সহজেই পরিবর্তন করতে পারেন 0 0 10px 5px rgba(0,0,0,0.75);। যোগ করা spreadমান এবং হ্রাস নোট করুন blur-radius।
box-shadow: 0 5px 5px 0 #000;এটা আমার পক্ষে কাজ করে। আশা করি, এটি আপনাকে সাহায্য করবে।
চিত্রগুলির ডান এবং বাম দিকে কোনও দুর্দান্ত ইনসেট ছায়া বা অন্য কোনও সামগ্রীর জন্য, এটিকে এভাবে ব্যবহার করুন
*** জেড-ইনডেক্স: -1 কীটগুলি সহ চিত্র বা অভ্যন্তরীণ বস্তুগুলি দেখানোর সময় একটি দুর্দান্ত কৌশল করে
<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>
<style>
.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}
.innercontent{
z-index:-1
}
</style>
</html>শুধুমাত্র অনুভূমিকের জন্য, আপনি বাক্স-ছায়াটিকে তার পিতামাতার ডিভের ওভারফ্লো ব্যবহার করে কৌতুক করতে পারেন:
<div class="parent">
<div class="box-shadow">content</div>
</div>
.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}ছায়াটি "মুছতে" আপনি তার ভিতরে 1 ডিভ ব্যবহার করতে পারেন:
.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;
}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}আপনি "উচ্চতা:%;" দিয়ে খেলতে পারেন এবং "প্রস্থ:%;" আপনি কি ছায়া চান মুছতে।
যে কারণেই এখানে সরবরাহিত উত্তরগুলি আমার ক্ষেত্রে কাজ করবে না। সুতরাং, আমি সৃজনশীল পেয়েছিলাম। এখানে আপনি যে সব ব্যবহারের জন্য একটি নতুন সমাধান linear-gradient()স্থানে box-shadow।
p {
padding: 1rem;
background-color: #b55;
color: white;
background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}<p>Testing</p>যদিও আমি এই বিষয়ে তর্ক করতে চাইছি না, এটি সত্যই আপনি (আমরা) গঠনের চেষ্টা করছেন এমন একটি "বাক্স" নয়, তাই আমি মনে করি এটি বলা যেতে পারে যে এটি box-shadowশুরু করার অর্থ হয়নি।
আমি ডান দিকের বুটস্ট্র্যাপের ছায়া-স্মিকে অনুলিপি করার চেষ্টা করেছি, আমার কোডটি এখানে:
.shadow-rs{
box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}