إنشاء ظل مربع CSS3 من جميع الجوانب باستثناء جانب واحد

Question

لدي شريط تنقل مبوب حيث أرغب في أن يكون لعلامة التبويب المفتوحة ظل لتمييزها عن علامات التبويب الأخرى.أود أيضًا أن يكون لقسم علامة التبويب بأكمله ظل واحد (انظر الخط الأفقي السفلي) يتجه للأعلى، مع تظليل الجزء السفلي من جميع علامات التبويب باستثناء علامة التبويب المفتوحة.

سأستخدم CSS3 box-shadow خاصية للقيام بذلك، ولكن لا أستطيع معرفة طريقة لتظليل الأجزاء التي أريدها فقط.

عادةً ما أقوم بتغطية الظل السفلي لعلامة التبويب المفتوحة بمنطقة المحتوى (أعلى z-index)، ولكن في هذه الحالة تحتوي منطقة المحتوى نفسها على ظل بحيث ينتهي الأمر بتغطية علامة التبويب.

تخطيط علامة التبويب

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

خط الظل.

سيرتفع الظل من الخطوط الأفقية، وإلى الخارج من الخطوط العمودية.

                _______
               |       |
_______________|       |_________________

هنا هو مثال حي:

هل من مساعدة هناك أيها العباقرة؟

Answer 1

في عينتك إنشاء شعبة داخل #content مع هذا النمط

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

ووأسلوب التغيير #content (إزالة سائد) وإضافة الظل

#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 */
}

Answer 2

وقطع تشغيله مع تجاوز.

<style type="text/css">
    div div {box-shadow:0 0 5px #000; height:20px}
    div {overflow:hidden;height:25px; padding:5px 5px 0 5px}

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

Answer 3

ويمكنك استخدام عدة الظلال CSS دون أي عناصر div أخرى للحصول على التأثير المطلوب، مع التحذير من عدم الظلال حول الزوايا.

-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;

وعلى الرغم من وعموما في أونينتروسيفي جدا.

Answer 4

أنا شخصياً أحب الحل الموجود هنا بشكل أفضل: http://css3pie.com/demos/tabs/

يسمح لك بالحصول على حالة صفر أو حالة تمرير مع لون خلفية لا يزال يحتوي على ظل من المحتوى الموجود أدناه متراكبًا عليه.لست متأكدًا من أن ذلك ممكن باستخدام الطريقة المذكورة أعلاه:

تحديث:

في الحقيقة لقد كنت مخطئا.يمكنك جعل الحل المقبول يدعم حالة التمرير الموضحة أعلاه.افعل هذا:

بدلاً من وجود النسب الموجب على a، ضعه في الفئة a.active مع فهرس z أعلى من #content div أدناه (الذي يحتوي على الظل عليه) ولكنه أقل من فهرس z الموجود على الخاص بك 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>

ثم مع CSS الخاص بك:

#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 5

واحد أكثر، خلاقة بدلا من ذلك، طريقة حل هذه المشكلة يضيف: بعد أو: قبل عنصر الزائفة إلى واحد من العناصر. في حالتي يبدو مثل هذا:

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

وانظر لقطة، أدلى الأحمر عنصر الزائفة لجعله أكثر وضوحا.

Answer 6

ويمكنك تغطية الظل متعددة باستخدام الظلال مربع أيضا.

ومربع الظل: 0 10px 0 # الاتحاد الفرنسي، 0 0 10px #CCC؛

Answer 7

إذا قمت بإضافة اثنين يمتد إلى ربط على ثم هل يمكن استخدام اثنين، شيئا مثل:

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

وعلى مدى واحد و

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

وعلى آخر. قد عمل!

إذا الظلال تتداخل حتى انك تستطيع استخدام 3 الظلال - واحد 1PX إلى اليسار، واحد 1PX إلى اليمين واحد 1PX تصل، أو مهما سميكة تريد لهم

Answer 8

إذا كنت على استعداد لاستخدام التكنولوجيا التجريبية مع فقط دعم جزئي, ، يمكنك استخدام clip-path ملكية.

وهذا سوف ينتج التأثير المطلوب:ظل مربع على الجانبين العلوي واليسرى والأيمن مع قطع نظيف على الحافة السفلية.

في حالتك ستستخدم مسار المقطع:أقحم (px px px)؛حيث يتم حساب قيم البكسل من الحافة المعنية (انظر أدناه).

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

سيؤدي هذا إلى قص القسم المعني في:

• 8 بكسل فوق الجزء العلوي (لتضمين الظل)
• 8 بكسل خارج الحافة اليمنى (لتضمين الظل)
• 0 بكسل من الأسفل (لإخفاء الظل)
• 8 بكسل خارج الحافة اليسرى (لتضمين الظل)

لاحظ أنه لا توجد فواصل مطلوبة بين قيم البكسل.

يمكن أن يكون حجم div مرنًا.

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);
}