আমি কীভাবে কোনও উপাদানটির একপাশে একটি বাক্স-ছায়া যুক্ত করতে পারি?

Question

আমাকে কিছু blockউপাদানের উপর একটি বাক্স-ছায়া তৈরি করতে হবে , তবে তার ডানদিকে কেবল (উদাহরণস্বরূপ)। আমি যেভাবে এটি করি তা হ'ল অভ্যন্তরীণ উপাদানটি box-shadowএকটি বাইরের সাথে আবৃত করা padding-rightএবং overflow:hidden;যাতে ছায়ার তিনটি দিক দৃশ্যমান হয় না।

এটি অর্জনের আরও ভাল কোনও উপায় আছে কি? পছন্দ box-shadow-right?

সম্পাদনা : আমার উদ্দেশ্যগুলি কেবল ছায়ার উল্লম্ব অংশ তৈরি করা । হুবহু একই হিসাবে repeat-yনিয়ম background:url(shadow.png) 100% 0% repeat-yকি করতে হবে।

Comments

বক্স-ছায়ার ক্ষেত্রে সিএসএসের সীমাবদ্ধ সরঞ্জাম বিবেচনা করে আমি মনে করি আপনার পদ্ধতির ইতিমধ্যে বেশ ভাল। এটি খুব বিশৃঙ্খল নয় এবং শব্দার্থবিজ্ঞানের দিক থেকে মোটামুটি ছোট প্রভাব ফেলেছে: কেবলমাত্র একটি অর্থহীন ডিভ।

— বাজ

: এখানে একটা চমৎকার CSS পার্শ্ব-ছায়া stackoverflow.com/a/20596554/1491212

— Armel Larcier

Answer 1

হ্যাঁ, আপনি বাক্স-ছায়া নিয়মের ছায়া স্প্রেড সম্পত্তি ব্যবহার করতে পারেন:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

চতুর্থ সম্পত্তি -2pxছায়ার বিস্তার রয়েছে, আপনি ছায়ার বিস্তার পরিবর্তন করতে এটি ব্যবহার করতে পারেন, এটি উপস্থিত হয়ে ছায়া কেবল একদিকে রয়েছে।

এটি ছায়া অবস্থানের নিয়মগুলিও 10pxডানদিকে প্রেরণ করে (অনুভূমিক অফসেট) ব্যবহার করে এবং 0pxএটি উপাদান (উল্লম্ব অফসেট) এর অধীনে রাখে uses

5px অস্পষ্ট ব্যাসার্ধ :)

এখানে আপনার জন্য উদাহরণ ।

Comments

আমি জানতাম না এমন কিছু নির্দেশ করার জন্য আপনাকে ধন্যবাদ, তবে আমার উদ্দেশ্যগুলি কেবল ছায়ার উল্লম্ব অংশ তৈরি করা হয়েছিল । ঠিক কী একই পটভূমি: ইউআরএল (ছায়া.পিএনজি) 100% 0% পুনরাবৃত্তি-ওয়াই করবে।

— 11:30

@ টিলদা আপনার এটিকে উত্তর হিসাবে চিহ্নিত করা উচিত যাতে এটি সমাধানের জন্য অনুসন্ধান করা অন্যদের জন্য শীর্ষে উপস্থিত হয়। আমি মন্তব্যগুলি পড়ার স্টাইলিংয়ের এই পদ্ধতিটি প্রায় বাতিল করে দিয়েছি এবং উত্তর গ্রহণ করেছি।

— ডেভিন জি রোড

আপনি যদি ছায়ার কোণগুলিতে ক্ষয় করার উদ্দেশ্যে না করেন তবে এটি দুর্দান্ত কাজ করে। আমি নিজেও এই সমাধানটি নিয়ে এসেছি তবে বেশিরভাগ ক্ষেত্রে (একদিকে ছায়ার জন্য) ছায়া উপাদানটির চেয়ে ছোট হওয়া ভুল, সুতরাং মায়া ভাঙা (যদি এটি উদ্দেশ্য করে থাকত) যে উপাদানটি বলে যে " উত্থাপিত "বা" 3 ডি "।

— স্টিভেন লু

@ মিঃ আলেইন তার জন্য ধন্যবাদ, box-shadowনিয়ম মানক হওয়ার সাথে সাথে আমি কেবল উপসর্গটি সরিয়েছি ।

— কাইল

তবে এই ছায়ার কোনও অস্পষ্টতা নেই, এবং অস্পষ্টতা সহ এটি অন্যান্য অংশ থেকে বেরিয়ে আসে। এবং যদি আপনি স্প্রেড হ্রাস করে এটির জন্য অ্যাকাউন্ট করেন তবে এটি আপনি যেভাবে চান সেটি অকস্মাণে শেষ হবে। ইউজিএইচএইচএইচএইচ

— মুহাম্মদ উমর

Answer 2

আমার স্ব-তৈরি সমাধান যা সম্পাদনা করা সহজ:

এইচটিএমএল:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

CSS:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

ডেমো:
http://jsfiddle.net/jDyQt/103

Comments

একরকম

— সর্বাগ্রে

এটিই একমাত্র আসল সমাধান। গৃহীত উত্তরটি এখনও ছায়াছবির উপরে এবং নীচে অস্পষ্ট, ঠিক বিভিন্ন অবস্থানে।

— জেলি ব্লাউ

এটি আমার পক্ষে মাইক্রোসফ্ট এজ বা ইন্টারনেট এক্সপ্লোরার ১১ এ কার্যকর হয়নি the অন্য ব্রাউজারগুলি যদিও ভাল ছিল।

— স্যাম

স্ট্যাকওভারফ্লো . com/a/24220224/238753 এ উত্তরটি একইভাবে কাজ করেছে তবে ব্রাউজারের সামঞ্জস্যতার সমস্যাগুলি ছাড়া এই উত্তরটি রয়েছে

— স্যাম

Answer 3

দুটি দিক পর্যন্ত ক্লিপড প্রভাব পেতে আপনি ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট সহ সিউডো উপাদানগুলি ব্যবহার করতে পারেন।

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

সাধারণত একটি নথি তৈরি করে এমন উপাদানগুলির বাম এবং ডানে একটি ভাল ছায়ার মতো প্রভাব যুক্ত করবে।

Comments

নিখুঁত সমাধান, কারণ এটি কেবলমাত্র মার্কআপটিকে বিশৃঙ্খলা না করে কোনও উপাদানের একপাশে ছায়া প্রভাব যুক্ত করে।

— লিকুইনট

নেতিবাচক স্প্রেড পদ্ধতির তুলনায় এটি কোণে সঙ্কুচিত না হওয়ার সুবিধা রয়েছে।

— কেভিন ক্রিস্টোফার হেনরি

@ বনানাএসিড আমি যার প্রয়োজন তার জন্য আমি একটি ডেমো তৈরি করেছি: jsfiddle.net/jDyQt/1198

— জেকডুড

দুর্দান্ত, এটি আমার জন্য কোনও পার্শ্ব প্রতিক্রিয়া ছাড়াই ক্রোম, সাফারি, ফায়ারফক্স, আই 1111 এবং এজ জুড়ে পুরোপুরি কাজ করেছে

— স্যাম

Answer 4

ছায়া যুক্ত করতে সিউডো উপাদানটির আগে :: পরে বা :: ব্যবহার করুন। এটিকে 1 পিএক্স করুন এবং আপনি যেদিকে চান তা এটিতে অবস্থান করুন। নীচে শীর্ষের উদাহরণ দেওয়া আছে।

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

Comments

এইটি এখনও প্রান্তটি পেরিয়ে গেছে, তবে কিছু লোকেরা যা চান তা হতে পারে

— স্যাম

Answer 5

এখানে আমার উদাহরণ:

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

<div class="box">
</div>

Answer 6

এখানে আমি একটি ছোট হ্যাক।

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

১.<div class="one_side_shadow"></div> আমি যে এলিমেন্টটি একপাশের বক্সের ছায়া তৈরি করতে চাই তার নীচে একটি ডান তৈরি করুন (এই ক্ষেত্রে আমি id="element"নীচ থেকে আসার জন্য একতরফা ইনসেট ছায়া চাই )

2. তারপরে আমি box-shadowছায়াকে উপরের দিকে একপাশে ঠেকাতে একটি নেতিবাচক উল্লম্ব অফসেট ব্যবহার করে একটি নিয়মিত তৈরি করেছি ।

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

Answer 7

এটি একটি সহজ উপায় হতে পারে

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

যে কোনও ডিভিকে এটি বরাদ্দ করুন

Answer 8

এখানে প্রতিটি পক্ষের জন্য প্রদর্শনের জন্য একটি কোডেপেন , বা একটি কাজের স্নিপেট:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

Answer 9

এই সাইটটি আমাকে সহায়তা করেছিল: https://gist.github.com/ocean90/1268328 (নোট করুন যে সাইটটিতে এই পোস্টের তারিখ হিসাবে বাম এবং ডান উল্টানো হয়েছে ... তবে তারা প্রত্যাশার মতো কাজ করে)। তারা নীচের কোডে সংশোধন করা হয়েছে।

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

Answer 10

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

Answer 11

আমি যা করছি তা ছায়ার জন্য একটি উল্লম্ব ব্লক তৈরি করা এবং এটির যেখানে আমার ব্লক উপাদানটি হওয়া উচিত তার পাশে রাখুন। দুটি ব্লকই অন্য ব্লকের মধ্যে আবৃত থাকে:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

jsFood উদাহরণ এখানে ।

Answer 12

ঠিক আছে, এখানে আরও একবার চেষ্টা করুন। সিউডো উপাদান ব্যবহার করে এবং তাদের উপরে ছায়া-বাক্সের পার্পের্টি আবেদন করা।

এইচটিএমএল:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

Sass:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ