কীভাবে কেবল একদিকে একটি ইনসেট বক্স-ছায়া তৈরি করবেন?

Question

কেবল কোনও ডিভের একদিকে কেবল ইনসেট বক্স-ছায়া থাকা কি সম্ভব? নোট করুন যে আমি এখানে কোনও ইনসেট বক্স-ছায়ার কথা বলছি , সাধারণ বাইরের বাক্স-ছায়া নয়।

উদাহরণস্বরূপ, নিম্নলিখিত জেএসফিডেলে আপনি দেখতে পাবেন যে ইনসেট শেডো সমস্ত চারদিকে প্রদর্শিত হয়, বিভিন্ন ডিগ্রীতে।

আমি কীভাবে এটি কেবল শীর্ষে প্রদর্শন করতে পারি? অথবা কেবলমাত্র শীর্ষে এবং নীচে?

জেএসফিডাল: http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Comments

একটি বিকল্প (এবং সম্পূর্ণরূপে কাস্টমাইজযোগ্য) উপায় ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট হতে পারে ...

— ভ্যালস

কেবল বাম এবং ডানদিকে বক্স-ছায়া কীভাবে পাওয়া যায় তার

— ব্রিচিন্স

Answer 1

এটিই আপনি খুঁজছেন। এটি আপনার ছায়া সহ প্রতিটি পক্ষের উদাহরণ রয়েছে।

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

আরও উদাহরণের জন্য স্নিপেট দেখুন:

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

Answer 2

কৌতুকটি এক সেকেন্ডের .box-innerভিতরে, যা মূলের চেয়ে প্রস্থে আরও বড় .boxএবং thebox-shadow প্রয়োগ করা হয়।

তারপরে, আরও প্যাডিং যুক্ত করুন .text যুক্ত প্রস্থের জন্য যুক্ত করুন।

যুক্তিটি এইভাবে দেখায়:

এবং এটি সিএসএসে কীভাবে হয় তা এখানে:

আরও প্রশস্ত .inner-boxনা হওয়ার জন্য .boxএবং overflowবাকিটি ক্লিপড রয়েছে তা নিশ্চিত করার জন্য সর্বোচ্চ প্রস্থ ব্যবহার করুন :

.box {
    max-width: 100% !important;
    overflow: hidden;
}

১১০% পিতামাতার চেয়ে বৃহত্তর যা সন্তানের প্রসঙ্গে 100% ( .boxউদাহরণস্বরূপ পিতামাতার নির্দিষ্ট প্রস্থ থাকলে একই হওয়া উচিত )। নেতিবাচক মার্জিনগুলি প্রস্থের জন্য তৈরি করে এবং উপাদানটিকে কেন্দ্রিক করে তোলে (কেবলমাত্র ডান অংশটি লুকিয়ে রাখার পরিবর্তে):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

এবং প্রশস্ততা তৈরি করতে এক্স অক্ষের উপর কিছু প্যাডিং যুক্ত করুন .inner-box:

.text {
    padding: 20px 40px;
}

এখানে একটি কার্যকারী ফিডল।

আপনি যদি ফিডলটি পরিদর্শন করেন তবে আপনি দেখতে পাবেন:

Comments

কোড ছাড়াই আপনি কীভাবে স্নাতকের লিঙ্কটি পোস্ট করতে পারেন? : ও

— মোহাম্মদ আরিব সিদ্দিকী

মানুষ! এটি একটি হ্যাক! শীতল: পি

— মোহাম্মদ আরিব সিদ্দিকী

আমার ফায়ারফক্সে আমি ডান এবং বাম সীমান্তে পাঠ্যটি দেখতে পাচ্ছি না। পাঠ্যটি কেবল কাটা হয়েছে। (এখানে স্ক্রিন শট goo.gl/aO8ZX রয়েছে ) আমি নিজে চেষ্টা করেছি এবং divছায়া গোপন করতে কিছু অতিরিক্ত ব্যবহার করেছি ... jsfiddle.net/KFrun/19

— ফ্যাবিয়ান এন।

হ্যাঁ আমি jsfiddle.net/KFrun/6/ ব্যবহার করি এটি সম্ভবত কিছু ফায়ারফক্স সংস্করণ সমস্যা? আমি উবুন্টুর জন্য ফায়ারফক্স 21.0 ব্যবহার করি ...

— ফ্যাবিয়ান এন।

তবে নীচে এখনও একটি ছায়া রয়েছে

— কোডি গুলডনার

Answer 3

বেশ খানিকটা দেরীতে, তবে একটি সদৃশ উত্তর যা প্যাডিং পরিবর্তন করতে বা অতিরিক্ত ডিভ যোগ করার প্রয়োজন নেই তা এখানে পাওয়া যাবে: কেবল বাক্স-ছায়া ইনসেট নীচে একটি সমস্যা আছে । এটি বলে, "চতুর্থ দৈর্ঘ্যের জন্য একটি নেতিবাচক মান ব্যবহার করুন যা স্প্রেড দূরত্বকে সংজ্ঞায়িত করে This এটি প্রায়শই অবহেলিত হয় তবে সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত হয়"

উত্তরদাতা থেকে বেহালার :

box-shadow: inset 0 -10px 10px -10px #000000;

Answer 4

এই একটু কাছে আসে।

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

Comments

এটাই আমি চেষ্টা করেছি! কিন্তু তিনি চাইতেন না তাই এটি উত্তর হিসাবে পোস্ট করেন নি! :(

— মোহাম্মদ আরিব সিদ্দিকী

বেশি পছন্দ. আপনাকে ধন্যবাদ

— m

এর চেয়ে সহজ উত্তর থাকতে পারে (অন্তত মুহূর্তের জন্য)। ধন্যবাদ

— Gendrith

Answer 5

এটি চেষ্টা করুন, সম্ভবত দরকারী ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

উপরের CSSকারণে আপনার নীচে একটি বাক্সের ছায়া রয়েছে।
আপনি এখানে আরও লাল করতে পারেন

Answer 6

এটি আপনি যে সঠিক জিনিসটি সন্ধান করছেন তা নাও হতে পারে তবে এর সাথে rgbaসংমিশ্রণ করে আপনি একটি খুব অনুরূপ প্রভাব তৈরি করতে পারেন linear-gradient:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

এটি কালো থেকে 50% অস্বচ্ছতা ( rgba(0,0,0,.5)) থেকে স্বচ্ছ ( rgba(0,0,0,0)) দিয়ে রৈখিক-গ্রেডিয়েন্ট তৈরি করে যা উপরের দিক থেকে 30% দক্ষতার সাথে স্বচ্ছ হতে শুরু করে। আপনার পছন্দসই প্রভাব তৈরি করতে আপনি সেই মানগুলি নিয়ে খেলতে পারেন। একটি ডিগ-মান ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) যোগ করে বা চারপাশের রঙগুলিতে পরিবর্তন করে আপনি এটি অন্য দিকে রাখতে পারেন। আপনি যদি সত্যই জটিল ছায়াগুলি চান তবে বিভিন্ন দিকের বিভিন্ন কোণ যেমন আপনি লেয়ারিংও শুরু করতে পারেনlinear-gradient ।

এটি কার্যকর অবস্থায় দেখতে এখানে একটি স্নিপেট রয়েছে:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Answer 7

ইনসেট বক্সের ছায়া কেবল উপরের দিকে?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }