Shadow/edge effect in box

Asked

Viewed 6,642 times

2

Can someone help me how to make this shadow effect or this edge below in a box already tried with border and shadow but the effect did not look like and for me it got ugly, someone could help me?

https://jsfiddle.net/vrc7a1ho/ Here’s what I did

Como eu quero que fique

css

2 answers

2

Follows a first alternative how to do, 

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

Follows a second alternative how to do,

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

2

Box-shadow attribute on CSS3.

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

Not only will I answer your question - since the downvoto did not understand why from my previous example ("Below is an example made on this site") - how to indicate a site where you can get the desired code by moving some controls as well as configure any kind 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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.