2

Alguém pode me ajudar a como fazer esse efeito de sombra ou essa borda abaixo em uma box ja tentei com border e com shadow mas o efeito nao ficou parecido e para mim ficou ficou feio, alguem poderia me ajudar?

https://jsfiddle.net/vrc7a1ho/ Aqui o eu fiz

Como eu quero que fique

2 Respostas 2

2

Segue uma primeira alternativa de como fazer,

#box {
  background-color: white;
  position: absolute;
  width: 50%;
  height: 200px;
  font-family: sans-serif;
  font-size: 1.5rem;
  float: left;
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
}

.header-avisos:after {
  content: "";
  width: 98%;
  height: 1px;
  margin-top: 170px;
  margin-left: 4px;
  display: block;
  position: absolute;
  /*top:20%;*/
  z-index: -1;
  -webkit-box-shadow: 0px 0px 8px 2px #000000;
  -moz-box-shadow: 0px 0px 8px 2px #000000;
  box-shadow: 0px 0px 8px 2px #000000;
}
<title>DashBoard</title>

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<body>

  <div id="box" class="header-avisos">
    Avisos:
  </div>

Segue uma segunda alternativa de como fazer,

.header-avisos {
  width: 50%;
  height: 200px;
  font-family: sans-serif;
  font-size: 1.5rem;
  float: left;
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 4px -2px #989898;
  -moz-box-shadow: 0 4px 4px -2px #989898;
  -webkit-box-shadow: 0 4px 4px -2px #989898;
}
<title>DashBoard</title>

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<body>

  <div class="header-avisos">
    Avisos:
  </div>

1

Atributo box-shadow nas CSS3.

Sua principal função é aplicar sombras em box’s, ou qualquer tipo de elemento em sua página HTML usando apenas alguns códigos CSS.

Não só vou responder a sua pergunta - já que o do downvoto não entendeu o porque do meu exemplo anterior ("Segue abaixo um exemplo feito nesse site") - como vou indicar um site onde vc poderá obter o código desejado mexendo em alguns controles bem como configurar qualquer tipo de bordas.

Gerador box-shadow - on line

Segue abaixo um exemplo feito nesse site

.header-avisos{
	width: 50%;
	height:200px;
	font-family: sans-serif;
	font-size: 1.5rem;
		
	float: left;
	background: #FFFFFF;
	
   -webkit-box-shadow: 0px 3px 5px 0px rgba(184,175,184,1);
   -moz-box-shadow: 0px 3px 5px 0px rgba(184,175,184,1);
   box-shadow: 0px 3px 5px 0px rgba(184,175,184,1);
}
	<div class="header-avisos">
		Avisos:
	</div>

0

Você deve fazer log-in para responder a esta pergunta.