Crear una sombra de cuadro CSS3 en todos los lados menos uno

StackOverflow https://stackoverflow.com/questions/1429605

  •  07-07-2019
  •  | 
  •  

Pregunta

Tengo una barra de navegación con pestañas donde me gustaría que la pestaña abierta tenga una sombra para diferenciarla de las otras pestañas. También me gustaría que toda la sección de pestañas tenga una sola sombra (vea la línea horizontal inferior) hacia arriba, sombreando la parte inferior de todas las pestañas, excepto la abierta.

Voy a usar la propiedad box-shadow de CSS3 para hacerlo, pero no puedo encontrar una manera de sombrear solo las partes que quiero.

Normalmente, cubriría la sombra inferior de la pestaña abierta con el área de contenido ( z-index más alto), pero en este caso el área de contenido en sí tiene una sombra para que se enrolle cubriendo la pestaña.

Diseño de pestaña 

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

Línea de sombra.

La sombra iría hacia arriba desde las líneas horizontales y hacia afuera de las líneas verticales. 

                _______
               |       |
_______________|       |_________________

Aquí es un ejemplo en vivo:

¿Alguna ayuda, genios?

¿Fue útil?

Solución

En su muestra, cree un div dentro de #content con este estilo 

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

y cambie el estilo de #contenido (elimine los rellenos) y agregue sombra 

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

agregar sombras a las pestañas: 

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

Otros consejos

Cortar con desbordamiento. 

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

Puede usar múltiples sombras CSS sin ningún otro divs para obtener el efecto deseado, con la advertencia de que no hay sombras alrededor de las esquinas. 

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

En general, aunque es muy discreto.

Personalmente, me gusta más la solución que se encuentra aquí: http://css3pie.com/demos/tabs/

Le permite tener un estado cero o un estado flotante con un color de fondo que todavía tiene la sombra del contenido a continuación superpuesto. No estoy seguro de que sea posible con el método anterior:

pestaña sombreada con estado flotante

ACTUALIZACIÓN:

En realidad estaba equivocado. Puede hacer que la solución aceptada admita el estado de desplazamiento que se muestra arriba. Haz esto:

En lugar de tener el pariente positivo en la a, colóquelo en la clase a.active con un índice z que sea más alto que su #content div debajo (que tiene la sombra) pero es más bajo que el z- índice en su content_wrapper.

Por ejemplo: 

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

luego con tu 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 */

Una forma más, más creativa, de resolver este problema es agregar: pseudo elemento after o: before a uno de los elementos. En mi caso se ve así: 

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

Vea la captura de pantalla, hizo que el pseudo elemento sea rojo para que sea más visible.

Ver la captura de pantalla hizo que el pseudo elemento se volviera rojo para hacerlo más visible.

también puedes ocultar sombras usando múltiples sombras de cuadro.

box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;

Si agregó dos tramos para enganchar, entonces podría usar dos, algo así como: 

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

en un lapso y 

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

en otro. ¡Podría funcionar!

Si las sombras se superponen, incluso podría usar 3 sombras: una de 1px a la izquierda, una de 1px a la derecha y otra de 1px hacia arriba, o las espesas que desee.

Si está dispuesto a usar tecnología experimental con solo soporte parcial , puede usar la propiedad clip-path .

Esto producirá el efecto deseado: una sombra de cuadro en los lados superior, izquierdo y derecho con un corte limpio en el borde inferior.

En su caso, usaría clip-path: inserto (px px px px); donde los valores de píxeles se calculan a partir del borde en cuestión (ver más abajo). 

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

Esto recortará el div en cuestión en:

  • 8 píxeles por encima de la parte superior (para incluir la sombra)
  • 8 píxeles fuera del borde derecho (para incluir la sombra)
  • 0 píxeles desde la parte inferior (para ocultar la sombra)
  • 8 píxeles fuera del borde izquierdo (para incluir la sombra)

Tenga en cuenta que no se requieren comas entre los valores de píxeles.

El tamaño del div puede ser flexible.

Hice una especie de pirateo, no perfecto, pero se ve bien: 

<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);
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top