1
I’ve tried using "z-index=1", but it didn’t work.
I tried to take the navbar from div first Blur, but when I click the button it does not get "Blur", but if I leave it inside it has black edges on the side, as if it were a shadow, I tried several things anyway... I wanted the navbar to have "Blur" when I clicked the button "get in," but don’t get that black edge.
Note: The codes of both Nav.css and Jane1style.css are from the same page, only in different css files... so the error when running.
.firstBlur {
margin:20px 20px 0;
padding:20px;
position:relative;
z-index: 1;
}
/* coloque blur em todos os elementos menos no elemento com a class .modal */
.firstBlur.modalBlur > *:not(.modal) {
-webkit-filter: blur(8px);
filter: blur(8px);
}
/* remove a cor escurecida do fundo, se quiser que fique escurecido ajuste a opacidade para 0.5*/
.log{
margin-top: -400px;
}
body {font-family: Arial, Helvetica, sans-serif;
margin:0;
background-color: black;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.imgcontainer + div{
position: relative;
z-index: 1;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* Imagem do logotipo, caso queira alterar a posição dela ou aplicar efeitos, etc... */
.logo {
height: 500px;
width: 500px;
margin: 24px 0 12px 0;
margin-left: -14px;
margin-top: 130px;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
color: black;
}
span.psw {
margin-left: : -5px;
}
/* The Modal (background) */
.container1-blur{
filter: blur(8px);
-webkit-filter: blur(8px);
}
/* The Close Button (x) */
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="description" content="Site educaciona para deficientes auditivos">
<Meta name="keywords" content="deficientes, deficientes auditivos, educação, surdos, educação para surdos, educação para deficientes, site educacional, projeto aval, aval, auxilio para surdos, ajuda com surdos, escola surdos, escola deficientes, surdos e mudos">
<Meta name="author" content="Vitor Hugo Minhaco Junior e João Vitor Galhardo">
<Meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/JANE1estilo.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<!-- Não remover esse style -->
<style>
.firstBlur {
margin:20px 20px 0;
padding:20px;
position:relative;
}
/* coloque blur em todos os elementos menos no elemento com a class .modal */
.firstBlur.modalBlur > *:not(.modal) {
-webkit-filter: blur(8px);
filter: blur(8px);
}
/* remove a cor escurecida do fundo, se quiser que fique escurecido ajuste a opacidade para 0.5*/
.modal-backdrop.show {
opacity: 0;
}
</style>
</head>
<body>
<!-- TODA PROGRAMAÇÃO DEVE SER FEITA DENTRO DA DIV firstBlur!!!-->
<div class="firstBlur">
<div class="navbar-container">
<ul>
<li class="nav-link active-link">
<a href="#">Home
</a>
<div class="underline"></div>
</li>
<li class="nav-link">
<a href="#">About Us</a>
<div class="underline"></div>
</li>
<li class="nav-link">
<a href="#">Testimonials</a>
<div class="underline"></div>
</li>
<li class="nav-link">
<a class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" href="#">Entrar</a>
<div class="underline"></div>
</li>
</ul>
</div>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
aria-hidden="true" data-backdrop="true" data-keyboard="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Faça o login!</h5>
</div>
<div class="modal-body">
<!-- Início do formulário -->
<form class="log">
<div class="imgcontainer">
<div class="logo">
<img src="logotipo.png" alt="Avatar" class="logo">
</div>
</div>
<div class="container">
<label for="uname"><b>Nome</b></label>
<input type="text" placeholder="Digite seu nome" name="uname" required>
<label for="psw"><b>Senha</b></label>
<input type="password" placeholder="Digite sua senha" name="psw" required>
<button type="submit" class="shadow-pop-tr"style="background-color:#008080">Entrar</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Lembrar de mim
</label>
</div>
<div class="container1" style="background-color:#008080; height: 60px;">
<span class="psw" style="margin-top:0px">Esqueceu a<a href="#"> senha?</a></span>
</form>
</div></div></div></div></div></div>
<!-- Fim do formulário -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<!-- Animação para tornar o fundo embaçado -->
<script>
(function () {
//Show Modal
$('#exampleModalLong').on('show.bs.modal', function (e) {
$('.firstBlur').addClass('modalBlur');
})
//Remove modal
$('#exampleModalLong').on('hide.bs.modal', function (e) {
$('.firstBlur').removeClass('modalBlur');
})
})();
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js">
</script>
</body>
</html>$('.nav-link').on('click', function() {
$('.active-link').removeClass('active-link');
$(this).addClass('active-link');
});a {
outline: none;
}
.navbar-container{
text-align: center;
background-color: #009688;
box-shadow: 0px -20px 5px 20px #333333;
padding: 10px;
font-size: 0;
z-index: 2;
}
.navbar-container ul {
margin: 0;
padding: 0;
text-align: right;
display: inline-block;
vertical-align: middle;
z-index: 2;
}
.navbar-container ul li {
display: inline-block;
font-size: 16px;
z-index: 2;
}
.navbar-container ul li a {
color: #ffffff;
text-decoration: none;
display: inline-block;
padding: 10px;
transition: color 0.5s;
z-index: 2;
}
.navbar-container ul li .underline {
height: 3px;
background-color: transparent;
width: 0%;
transition: width 0.2s, background-color 0.5s;
margin: 0 auto;
z-index: 2;
}
.navbar-container ul li.active-link .underline {
width: 100%;
background-color: white;
z-index: 2;
}
.navbar-container ul li:hover .underline {
background-color: white;
width: 100%;
z-index: 2;
}
.navbar-container ul li:hover a {
}
.navbar-container ul li:active a {
transition: none;
color: rgba(255,255,255,0.76);
}
.navbar-container ul li:active .underline {
transition: none;
background-color: rgba(255,255,255,0.76);
}
Guy could not understand well what would be this black border, I at least did not understand... have you edit the pegunta and put an image signaling where is such edge ?
– hugocsl
I’ve already put, pardon me. =)
– Vitor Hugo