Jump to content

3d Effect


smerny
 Share

Recommended Posts

How can I create basically a border on the bottom and right side to create a 3D effect?I tried just putting a little different color border on the right and bottom... but the problem is that the top-right corner is horizontal when I'd want it to be at a 45 degree angle down and to the right, and the bottom-left corner is vertical when I am also wanting a 45 degree angle down and to the right on that (the same angle the bottom and right borders make where they connect)or even like this picture herehttp://www.baby.giftsinmind.co.uk/images/T...ast-frame-3.jpghow underneath the frame there is a shadow that has angles going inward... basically i guess i want to know if i can change the angle of the corner/edges of the border somehow

Edited by smerny
Link to comment
Share on other sites

try border-top and border-left to be the same colour as the background. (or transparent?)To change the angle, set different border widths for the top and left borders.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta name="generator" content="Bluefish 1.0.7"> <meta name="author" content="Jim Haslip"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> body {	 background-color: #ffffff;	 } p {	 width: 100px;  	 border-top: 10px solid blue;	 border-right: 10px solid red;	 border-bottom: 10px solid black;	 border-left: 40px solid green;	 }	 </style> </head> <body> <div>   <p>content</p>   </div> </body> </html>

*edit*I should have looked at that link first... that shadow is a photoshop drop-shadow and generally not do-able in CSS, although CSS3 will have the ability to do that, we are told.

Edited by jlhaslip
Link to comment
Share on other sites

for me anyway... that only works for.... like for example on the lower left corner it would only work for adjusting the angle from straight down (if the left border is 0) to almost straight left (if the left border is much larger than the bottom border)... i want the angle to go down and to the right, would need to use a negative left border to get the effect on the bottom border that i want ....but that's not possible

Edited by smerny
Link to comment
Share on other sites

That would require images, which are not allowed as borders.Another technique is to use a positioned image below the image. Offset the bottom image by a couple of pixels in two directions for the shadow offset. I do not have a demo of that in action, sorry, but here is a link: http://www.alistapart.com/articles/cssdropshadows/

Edited by jlhaslip
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...