Making an image appear 3-D
-
Wanting to know if there’s a way to make an image of a book cover appear 3 dimensional, i.e., adding a shadow around part of it.
The blog I need help with is: (visible only to logged in users)
-
Are you talking about a drop shadow? Or an actual shadow added on top of the image?
WordPress has very limited image editing abilities such as crop, rotate left and right, and flip vertical and horizontal.
-If you want an actual shadow on top of the image, that is something that can be accomplished with an outside program like Adobe Photoshop.
-If you have access to edit the CSS on your blog, you should be able to add a drop shadow around the image box. If you have access to this, you will want to insert:
.entry-content img { box-shadow: 10px 10px 5px #888888; }This is going to add a box of color around the image box. You will also be able to blur the edges so it looks more like a shadow. For more information about the box-shadow attribute, here is a link that further explains it:
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp -
-
You were very helpful with the code to create a shadow on an image. Now, I’m trying to remove the shadow from specific images, i.e., the curlicues on my “I Love Books” page on densiewebb.com. Is there a code for that? Thanks!
-
Absolutely!
When you are working in your CSS document there are classes. CSS is divided into two classes: non replaced elements and replaced elements.
A non-replaced element is something that is presented by the user inside of the element itself. For example <p> Hello World! </p>.
A replaced element is where the content is replaced by content that is not displayed directly in the document. For example <img src=”button.jpg” alt=”navigation”>. So there is no actual content in the element, just element names an attributes. These attributes can be used to pinpoint exactly how you want certain elements displayed on your website. If you had the button.jpg used in other portions of your website, but only wanted to place the change to the navigation, you would select the “alt” attribute.
You could isolate the curlicue images from your book images by selecting the curlicue attribute. This will work for an image that you have set the “alt” attribute to equal “curlicue”.
The code will be:
img[alt="Curlicue"]{ box-shadow: none; }That will remove the box-shadow from only the Curlicue images. If you want to learn more about how to select different items in your CSS here is a in-depth explanation about selectors:
http://www.w3.org/TR/css3-selectors/#selectors -
Sometimes, I get into my own head and what comes out doesn’t make sense. So if what I wrote was confusing here is some more information about class ids:
http://www.htmldog.com/guides/css/intermediate/classid/
- The topic ‘Making an image appear 3-D’ is closed to new replies.
WordPress.com Forums 