চারদিকে তবে একটি সিএসএস 3 বক্স-ছায়া তৈরি করা

Question

আমি একটি ট্যাবড নেভিগেশন বার পেয়েছি যেখানে আমি অন্য ট্যাবগুলি থেকে পৃথক করে রাখার জন্য খোলা ট্যাবটি চাই। আমি পুরো ট্যাব বিভাগটিও চাই যে একটি একক ছায়া থাকবে (নীচের দিকের অনুভূমিক রেখাটি দেখুন) ওপেনটি বাদে সমস্ত ট্যাবগুলির নীচে শেড করুন।

আমি এটি করতে সিএসএস 3 এর box-shadowসম্পত্তি ব্যবহার করতে যাচ্ছি , তবে আমি কেবল নিজের অংশগুলি ছায়া নেওয়ার কোনও উপায় বের করতে পারি না।

সাধারণত আমি কন্টেন্ট এরিয়া (উচ্চতর z-index) দিয়ে খোলা ট্যাবের নীচের ছায়াটি coverেকে রাখতাম তবে এই ক্ষেত্রে সামগ্রীর অংশে নিজেই একটি ছায়া থাকে যাতে এটি কেবল ট্যাবটি coveringেকে রাখে।

ট্যাব বিন্যাস

     _______ _______ _______
    | | | | | |
____ | _______ | __ | | __ | _______ | ______

ছায়া রেখা।

ছায়াটি অনুভূমিক রেখাগুলি থেকে এবং উল্লম্ব রেখার বাইরের দিকে যেতে হবে।

                _______
               | |
_______________ | | _________________

এখানে একটি সরাসরি উদাহরণ:

কোন সাহায্য আছে, প্রতিভা?

Comments

@ থি_ড্রো রি: সিএসএস 3, আমি ড্রপ শেডো, গোলাকার কোণগুলি ইত্যাদির মতো নকশা বৈশিষ্ট্যগুলি বিবেচনা করতে পছন্দ করি যারা আধুনিক ব্রাউজারগুলি ব্যবহার করেন তাদের জন্য পুরষ্কার।

— bloudermilk

বাহ এটি আমার ঠিক ঠিক কী প্রয়োজন, খুশি একটি প্রশ্ন ইতিমধ্যে বিদ্যমান। আপনিও যেমন দেখিয়েছিলেন ঠিক তেমনই আমি একটি ট্যাবে এটি প্রয়োগ করতে চাই, বাহ বাহ বাহ: ডি

— জর্জি ইস্রায়েল পেরিয়া

এই সমস্যাটি সমাধানের আর একটি দুর্দান্ত উপায় হ'ল সিউডো উপাদান ব্যবহার করা হচ্ছে, আরও তথ্যের জন্য আমার উত্তর দেখুন।

— সিলভার রিঙ্গভি

: সিউডো-উপাদান-সমাধান জন্য বিবরণ এখানে দেখুন stackoverflow.com/a/38372215/4769218

— সিলভার Ringvee

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে ট্যাবগুলির আকারটি কী জানা আছে? নাকি এগুলি নমনীয়? আমি কল্পনা করতে পারি উচ্চতাটি সেট হতে পারে তবে প্রস্থটি নয়?

— লুক

Answer 1

আপনার নমুনায় এই শৈলীর সাথে # কনটেন্টের ভিতরে একটি ডিভ তৈরি করুন

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

এবং # কনটেন্ট স্টাইল পরিবর্তন করুন (প্যাডিংস সরান) এবং ছায়া যুক্ত করুন

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

ট্যাবগুলিতে ছায়া যুক্ত করুন:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

Comments

এই সমাধান থেকে কিছু অনুপস্থিত আছে। তার কোডটি সম্পাদনা করা এবং প্রস্তাবিত শৈলীর প্রয়োগ করা, আপনি এখনও 'নির্বাচিত' ট্যাবটির উপরে একটি ছায়া দিয়ে শেষ করবেন। মনে হচ্ছে যেন ওভারফ্লো আছে: লুকানো নেই?

— বব স্প্রিন

হাঁ। আপনার কাজ করতে ওভারফ্লো প্রয়োজন: ন্যাভ এ লুকানো।

— বব স্প্রিন

প্রদর্শিত 'রেখার ছায়া' #content_over_shadowআসলে #contentস্টাইলের হওয়া উচিত ।

— অ্যাপলগ্রু

ভাল এই সমাধান মাবে 2009 সালে সঠিক ছিল, কিন্তু এখন তা হয় না। সঠিক উত্তরটি হ'ল স্ট্যাকওভারফ্লো.com

— গিলহর্ম ফেরেরা

: ছদ্ম উপাদান সঙ্গে একটি সমাধান stackoverflow.com/a/38372215/4769218

— সিলভার Ringvee

Answer 2

ওভারফ্লো দিয়ে এটি কেটে দিন।

div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}

<div><div>tab</div></div>

Comments

ওভারফ্লো স্টারিকভস ডটকম / ২০১১ / ১১ / ২০১৯ / সিএসএস ৩- এক- পাশের শ্যাডো দিয়ে এটি কেটে ফেলার একটি উদাহরণ এখানে রয়েছে ।

— স্টারিকভগুলি

এই পদ্ধতিটি কেবল তখনই কাজ করবে যখন নীচের দিকে আপনি ছায়াটি চান না

— Andrhamm

দুর্দান্ত কাজ! অভিভাবক z-index

— ডিভটি

আমি বর্তমানে এই সমাধানটি ব্যবহার করছি আমি শিশু উপাদানগুলির সাথে কিছু ঝামেলা পাচ্ছি যা উপচে পড়া দরকার (ফেসবুক হিসাবে বোতামের মতো)।

— লোনিক্স

আপনাকে বেশিরভাগ প্রতিক্রিয়াশীল ডিজাইনের জন্য খুব কার্যকর নয় কারণ আপনাকে উপাদানগুলির উচ্চতা নির্ধারণ করতে হবে

— জোনাথন টঙ্গে

Answer 3

কোণার চারপাশে কোনও ছায়া ছাড়াই কাঙ্ক্ষিত প্রভাব পেতে আপনি কাঙ্ক্ষিত প্রভাব পেতে অন্য কোনও ডিভ ছাড়াই একাধিক সিএসএস ছায়া ব্যবহার করতে পারেন।

div.shadow {
    -webkit-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    -moz-box-shadow:    0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    box-shadow:         0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    height: 25px
}

 <div style="height: 25px"><div class="shadow">tab</div></div>

সামগ্রিকভাবে যদিও এটি খুব উদ্বেগহীন।

Comments

এটি দুর্দান্ত সমাধান হতে পারে তবে আপনি যেমন বলছেন, কোণগুলি দুর্বল। jsfiddle.net/mahemoff/ZStTr

— mahemoff

বৃত্তাকার কোণগুলির সাথে আমার ইনসেট শ্যাডোতে মনোযোগের মতো কাজ করেছে। ধন্যবাদ!

— ব্রুনো এলি

Answer 4

আরও একটি, বরং সৃজনশীল, এই সমস্যাটি সমাধানের উপায়টি যুক্ত করা হচ্ছে: এর পরে বা: সিউডো উপাদানগুলির একটির মধ্যে একটির আগে: আমার ক্ষেত্রে এটি দেখতে এমন দেখাচ্ছে:

#magik_megamenu>li:hover>a:after {
    height: 5px;
    width: 100%;
    background: white;
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
}

স্ক্রিনশটটি দেখুন, সিউডো উপাদানটিকে আরও দৃশ্যমান করার জন্য এটি লাল করে তুলেছে।

Answer 5

ব্যক্তিগতভাবে আমি এখানে সমাধানটি সবচেয়ে ভালভাবে খুঁজে পেতে পছন্দ করি: http://css3pie.com/demos/tabs/

এটি আপনাকে একটি শূন্য অবস্থা বা পটভূমির রঙের সাথে একটি হোভার স্টেট রাখতে দেয় যা এখনও এর ওভারলেলে নীচের সামগ্রী থেকে ছায়া রয়েছে। উপরের পদ্ধতিটি দ্বারা এটি সম্ভব তা নিশ্চিত নয়:

হালনাগাদ:

আসলে আমি ভুল ছিলাম। আপনি গৃহীত সমাধানটিকে উপরে দেখানো হোভারের রাজ্যটিকে সমর্থন করতে পারেন। এটা কর:

ক এর উপর ধনাত্মক আত্মীয় থাকার পরিবর্তে এটি এ.একটিভ ক্লাসে জেড-ইনডেক্সের সাথে রাখুন যা নীচে আপনার # কনটেন্ট ডিভের চেয়ে বেশি (এটিতে ছায়া রয়েছে) তবে আপনার জেড-সূচকের চেয়ে কম content_wrapper।

উদাহরণ স্বরূপ:

<nav class="ppMod_Header clearfix">
    <h1 class="ppMod_PrimaryNavigation-Logo"><a class="ppStyle_Image_Logo" href="/">My company name</a></h1>
    <ul class="ppList_PrimaryNavigation ppStyle_NoListStyle clearfix">
        <li><a href="/benefits">Benefits</a></li>
        <li><a class="ppStyle_Active" href="/features">Features</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/company">Company</a></li>
    </ul>
</nav>
<div id="ppPage-Body">
    <div id="ppPage-BodyWrap">
        content goes here
    </div>
</div>

তারপরে আপনার সিএসএসের সাথে:

#ppPage-Body
    box-shadow: 0 0 12px rgba(0,0,0,.75)
    position: relative /* IMPORTANT PART */

#ppPage-BodyWrap
    background: #F4F4F4
    position: relative /* IMPORTANT PART */
    z-index: 4 /* IMPORTANT PART */


.ppList_PrimaryNavigation li a:hover
    background: #656565
    -webkit-border-radius: 6px 6px 0 0
    -moz-border-radius: 6px 6px 0 0
    border-radius: 6px 6px 0 0

.ppList_PrimaryNavigation li a.ppStyle_Active
    background: #f4f4f4
    color: #222
    -webkit-border-radius: 6px 6px 0 0
    -moz-border-radius: 6px 6px 0 0
    border-radius: 6px 6px 0 0
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.75)
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.75)
    box-shadow: 0 0 12px rgba(0,0,0,0.75)
    position: relative /* IMPORTANT PART */
    z-index: 3 /* IMPORTANT PART */

Answer 6

হালনাগাদ:

clip-path এখন সমস্ত বড় ব্রাউজারে সমর্থিত।

---

আসল উত্তর:

আপনি যদি কেবল আংশিক সমর্থন দিয়ে পরীক্ষামূলক প্রযুক্তি ব্যবহার করতে ইচ্ছুক হন তবে আপনি সম্পত্তিটি ব্যবহার করতে পারেনclip-path ।

এটি পছন্দসই প্রভাব তৈরি করবে: উপরের, বাম এবং ডানদিকে একটি ছায়া নীচের প্রান্তে একটি পরিষ্কার কাট অফ।

আপনার ক্ষেত্রে আপনি ক্লিপ-পাথটি ব্যবহার করবেন: ইনসেট (px px px px); যেখানে প্রশ্নে প্রান্ত থেকে পিক্সেল মান গণনা করা হয় (নীচে দেখুন)।

#container {
    box-shadow: 0 0 8px 2px #888;
    clip-path: inset(-8px -8px 0px -8px);
}

এটি এখানে প্রশ্নটি ডিভিউ ক্লিপ করবে:

• উপরে 8 পিক্সেল উপরে (ছায়া অন্তর্ভুক্ত)
• ডান প্রান্তের বাইরে 8 পিক্সেল (ছায়া অন্তর্ভুক্ত করতে)
• নীচে থেকে 0 পিক্সেল (ছায়া গোপন করতে)
• বাম প্রান্তের বাইরে 8 পিক্সেল (ছায়া অন্তর্ভুক্ত করতে)

নোট করুন যে পিক্সেল মানের মধ্যে কোনও কমা প্রয়োজন নেই।

ডিভের আকারটি নমনীয় হতে পারে।

Comments

দুর্ভাগ্যক্রমে একটি ফাঁক রয়েছে যেখানে দুটি ছায়া ওভারল্যাপ হয়।

— sbaechler

@ এসবাচেলার আপনি কি বিস্তারিত বলতে পারবেন? ছায়া কোথায় ওভারল্যাপ হয়?

— লুক

Answer 7

পাশাপাশি একাধিক বক্সের ছায়া ব্যবহার করে আপনি ছায়াটি coverেকে রাখতে পারেন।

বাক্স-ছায়া: 0 10px 0 #fff, 0 0 10px #ccc;

Answer 8

আপনি যদি দুটি স্প্যান হুক করতে যোগ করেন তবে আপনি দুটি ব্যবহার করতে পারেন, এরকম কিছু:

box-shadow: -1px -1px 1px #000;

এক স্প্যান এবং

box-shadow: 1px -1px 1px #000;

অন্য এক। কাজ করতেও পারে!

যদি ছায়াগুলি ওভারল্যাপ হয় তবে আপনি 3 টি ছায়াও ব্যবহার করতে পারেন - একটি বাম দিকে 1px, ডানদিকে 1px এবং একটি 1px উপরে, তবে পুরু আপনি এগুলি চান।

Answer 9

আমি এক ধরণের হ্যাক করেছি, নিখুঁত নয়, তবে এটি ঠিক আছে:

<ul class="tabs">
<li class="tab active"> Tab 1 </li>
<li class="tab"> Tab 2 </li>
<li class="tab"> Tab 3 </li>
</ul>

<div class="tab-content">Content of tab goes here</div>

SCSS

 .tabs { list-style-type: none; display:flex;align-items: flex-end;
  .tab {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid $vivosBorderGrey2;
    background-color:$vivosBorderGrey2;
    color: $vivosWhite;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom: 0;
    margin-right: 2px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: 0.2s;
    &.active {
      padding-bottom: 10px;
      background-color: #ffffff;
      border-color: #eee;
      color: $vivosMedGrey;
      border-bottom-color: transparent;
      box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.1);
    }
    &:hover {padding-bottom: 10px;
    }
   } 

.tabContent {
  border: 1px solid #eee;
  padding:10px;
  margin-top: -1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}