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

sombra para dentro css

Question

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 (ver línea horizontal inferior) subiendo, sombreando la parte inferior de todas las pestañas, excepto la abierta.

Voy a usar la propiedad de box-shadow de 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 simplemente termine cubriendo la pestaña.

Diseño de pestaña

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

Línea de sombra.

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

_______ | | _______________| |_________________

Here hay un ejemplo en vivo:

¿Alguna ayuda por ahí, genios?

Answer 1

Córtalo 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>

Answer 2

En tu muestra crea 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 cambiar # estilo de contenido (eliminar rellenos) y agregar 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 */
}

Answer 3

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

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

ACTUALIZAR:

En realidad, estaba equivocado. Puede hacer que la solución aceptada sea compatible con el estado de desplazamiento mostrado arriba. Hacer esto:

En lugar de tener el pariente positivo en el a, póngalo en la clase a.active con un índice z que sea más alto que su div #content below (que tiene la sombra) pero es menor que el índice z 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 */

Answer 4

Puede usar varias sombras de CSS sin ningún otro div 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, es muy discreto.

Answer 5

Si agregó dos tramos para enganchar, 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 1px a la izquierda, una 1px a la derecha y una 1px arriba, o cualquiera que sea el grosor que desee.

Answer 6

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

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

En su caso, usaría clip-path: inserción (px px px px); donde los valores de píxel se calculan desde el borde en cuestión (ver a continuación).

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

Esto cortará 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íxel.

El tamaño del div puede ser flexible.

Answer 7

Una forma más, bastante creativa, de resolver este problema es agregar: después o antes del pseudo elemento 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 hacerlo más visible.

Answer 8

también puedes ocultar la sombra usando varias sombras de caja.

caja-sombra: 0 10px 0 #fff, 0 0 10px #ccc;