html - sombrear - Agregue una sombra paralela a una barra de navegación fija superior utilizando Bootstrap
sombrear letra css (2)
En su css agregue lo siguiente a su regla de clase .navbar
.navbar {
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
/* the rest of your styling */
}
EDITAR
Existe una increíble herramienta en línea para generar código de sombra de cuadro (gracias a la gente en cssmatic.com ). Puede ajustar el aspecto de su sombra y generará todo el código necesario más cualquier prefijo de navegador específico (webkit, Mozilla, etc.). A continuación, puede copiar el código en su css.
http://www.cssmatic.com/box-shadow
También puedes encontrar otros efectos css en el mismo sitio.
Estoy intentando agregar una sombra a mi barra de navegación que tengo a través de Bootstrap, pero parece que no puedo resolverlo. Tal vez alguien pueda apuntarme en la dirección correcta. Todas las otras preguntas que he visto que se han preguntado sobre un tema similar tienen respuestas increíblemente largas de código desordenado, pero tiene que haber una forma simple de hacerlo, no es ese el punto central de Bootstrap, después de todo.
Aquí está mi HTML relacionado con mi navegador:
<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">eService</a>
<div class="nav-collapse">
<ul class="nav pull-right">
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Services
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Stage Design & Build</a></li>
<li><a href="#">Event Planning & Management</a></li>
<li><a href="#">Video Production</a></li>
<li><a href="#">Audio Production</a></li>
<li><a href="#">Lighting Production</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Events
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Corporate Events</a></li>
<li><a href="#">Civic Events</a></li>
<li><a href="#">Charity Events</a></li>
<li><a href="#">Grand Openings</a></li>
<li><a href="#">Concerts</a></li>
</ul>
</li><!-- dropdown -->
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
Y aquí está mi CSS relacionado con la barra de navegación:
#custom-nav {
-webkit-box-shadow: 20px 20px 20px #FC0;
-moz-box-shadow: 20px 20px 20px #FC0;
box-shadow: 20px 20px 20px #FC0;
z-index:999;
}
Soy consciente de que con las dimensiones actuales de px que he configurado para mi sombra aparecerá como un bloque sólido. Planeo ajustarme una vez que pueda hacer funcionar esta cosa peligrosa. Gracias por cualquier ayuda o punteros.
Mucho amor
Su marca de barra de navegación es un poco diferente de la marca de barra de navegación de Bootstrap predeterminada, por ejemplo,
Envolvió toda su barra de navegación en una clase llamada navbar-inner lugar de envolver el interruptor y la marca dentro de una navbar-header seguida de los elementos de menú plegables que se encuentran después.
Aquí es cómo debe verse su marcado:
<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eService</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Services
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Stage Design & Build</a></li>
<li><a href="#">Event Planning & Management</a></li>
<li><a href="#">Video Production</a></li>
<li><a href="#">Audio Production</a></li>
<li><a href="#">Lighting Production</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Events
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Corporate Events</a></li>
<li><a href="#">Civic Events</a></li>
<li><a href="#">Charity Events</a></li>
<li><a href="#">Grand Openings</a></li>
<li><a href="#">Concerts</a></li>
</ul>
</li><!-- dropdown -->
</ul><!-- /.nav -->
</div>
</div>
Aquí hay un jsfiddle con los códigos anteriores: https://jsfiddle.net/AndrewL32/e0d8my79/36/
También,
mantenga su archivo css personalizado debajo de su archivo bootstrap css para evitar que sus estilos se sobrescriban con el estilo predeterminado de bootstrap.
<link rel="stylesheet" type="text/css" href="bootstrap.css"> <!--call your bootstrap first-->
<link rel="stylesheet" type="text/css" href="mystyle.css"><!-- followed by your custom css after-->