Как добиться такого эффекта?

zaec161 · August 7, 2013

Нужен эффект как на 1 картинке. Пытался что-то сделать сам, но бес толку. Получается слишком широкая тень, пытался уменьшить, но получилось еще хуже.

Как исправить?

На 2 картинке показал проблему + приложил код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
background:#F7F7F7;
}
#blok1 {
margin-left:5%;
margin-right:5%;
height: 500px;
background:#FFF;
z-index:-2;
position: relative;


}
#obzor3 {
margin-top: 1px;
margin-left:5%;
margin-right:5%;
position:relative;
padding:1em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.0), 0 0 40px rgba(0, 0, 0, 0.0) inset;
	 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.0), 0 0 40px rgba(0, 0, 0, 0.0) inset;
		 box-shadow:0 1px 4px rgba(0, 0, 0, 0.0), 0 0 40px rgba(0, 0, 0, 0.0) inset;
}

#obzor3:before,
#obzor3:after {
content:"";
position:absolute;
z-index:-1;
}

#obzor3:before {
top:0px;
bottom:50%;
left:10px;
right:10px;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
	 -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
		 box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:100px / 10px;
		 border-radius:100px / 10px;
}

#obzor3 p {
font-size:16px;
font-weight:bold;
}	
</style>
</head>
<body>
	 <div id="blok1">
	 </div>
	 <div id="obzor3">
	 </div>
</body>
</html>

Edited August 7, 2013 by zaec161

npofopr · August 7, 2013

Может поможет http://css3-drop-shadows.herokuapp.com/app

Sign In

Как добиться такого эффекта?

Question

zaec161

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information