Member Avatar for Behseini

Hi,
Can you please take a look at attached JPEG and let me know how I can create a div like this(looks like 3D) using CSS or JQuery?
I will appreciate if you introduce me to a tutorial or any thing that can help me regarding this,

Best Regards
Behrouz

3D_Div.JPG 4.5 KB
  • 3 Contributors
  • 3 Replies
  • 395 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Skorpio07

Recommended Answers

All 3 Replies

Member Avatar for Ritesh_4

I think you only need to add an image as background from css to the div and it's done

Member Avatar for Skorpio07

i think maybe he was looking for this:

<!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>3dD Div</title>
<style type="text/css">
.container {
	background-color: #333333;
	height: 120px;
	width: 270px;
	border: thin double #191919;
	position: relative;
}
.bigbody {
	background-color:#;
	text-align: center;
	margin-top:25%;
}
.bigdiv {
	width:100%;
	height:50%;
	text-align:center;
}
#hrprop {
	text-align:center;
	color:#cccccc;
}
</style>
</head>
<body class="bigbody">
	<div id="bigdiv" align="center">
		<div class="container">
		  <hr class="hrprop" width="95%" style="margin-top:25px;" />
		</div>
	</div>
</body>
</html>
Member Avatar for Skorpio07

maybe he was looking for this

<!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>3dD Div</title>
<style type="text/css">
.container {
	background-color: #333333;
	height: 120px;
	width: 270px;
	border: thin double #191919;
	position: relative;
}
.bigbody {
	background-color:#;
	text-align: center;
	margin-top:25%;
}
.bigdiv {
	width:100%;
	height:50%;
	text-align:center;
}
.hrprop {
	text-align:center;
	color:#cccccc;
}
</style>
</head>
<body class="bigbody">
	<div id="bigdiv" align="center">
		<div class="container">
		  <hr class="hrprop" width="95%" style="margin-top:25px;" />
		</div>
	</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.