smerny Posted July 14, 2009 Share Posted July 14, 2009 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 Link to comment Share on other sites More sharing options...
jlhaslip Posted July 14, 2009 Share Posted July 14, 2009 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. Link to comment Share on other sites More sharing options...
smerny Posted July 14, 2009 Author Share Posted July 14, 2009 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 Link to comment Share on other sites More sharing options...
jlhaslip Posted July 14, 2009 Share Posted July 14, 2009 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/ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.