Shadow / border effect in box

Navigation
2

Someone can help me how to do this shadow effect or this border in a box already tried with border and shadow but the effect did not look similar and for me it got ugly, could anyone help me?

link Here I did

    
asked by anonymous 20.05.2017 / 19:46

2 answers

2

Here's a first alternative of how to do it, 

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

Here's a second alternative of how to do it, 

.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>
    
20.05.2017 / 20:03
2

Box-shadow attribute in CSS3.

Its main function is to apply shadows to box's, or any element type in your HTML page using just a few CSS codes.

Not only will I answer your question - since the downvoto did not understand why of my previous example ("Here is an example made on this site") - how do I indicate a website where you can get the desired code by moving on some controls as well as setting any type of borders.

box-shadow generator - online

Below is an example from this 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>
    
20.05.2017 / 20:19
MP3 player with Python Put social media buttons on the site