{"id":16,"date":"2008-02-04T19:29:04","date_gmt":"2008-02-05T01:29:04","guid":{"rendered":"http:\/\/cssnewbie.com\/css-rules\/5-cssriffic-treatments-images\/"},"modified":"2008-02-04T19:29:04","modified_gmt":"2008-02-05T01:29:04","slug":"5-cssriffic-treatments-images","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/5-cssriffic-treatments-images\/","title":{"rendered":"5 CSSriffic Treatments to Make Your Images Stand Out"},"content":{"rendered":"

image-treatments-example.jpg<\/p>\n

No web presence these days is complete without a little pixel lovin\u2019 in the form of images. If you have a blog or website out there somewhere without a single image anywhere on the site, well… 1997 called. They said they\u2019re sorry you fought and they want you to come back home.<\/p>\n

Sometimes we need a little help to make our outstanding images truly<\/em> stand out.<\/em><\/p>\n

But sometimes just having images isn\u2019t enough. Sometimes we need a little help to make our outstanding images truly<\/em> stand out. And that\u2019s where CSS can help. Here are five things you can do, using CSS, to make the most of your images.<\/p>\n

The Wraparound Treatment<\/h3>\n

One of the easiest ways to add visual interest to your page (and your images at the same time) is to have your text wrap around your images. It\u2019s very easy to do:<\/p>\n

img.wrap {\n\tfloat: right;\n\tmargin: 0 0 .5em 1em; \n}<\/pre>\n
The \u201cfloat\u201d property causes the image to literally float to the right side of whatever container it\u2019s in, and causes the rest of the content inside that container to wrap around it. Then we just added a bit of a margin to the bottom and left sides of the image to prevent the text from butting right up against its edges. And you\u2019ll note we used a \u201cwrap\u201d class on this rule, meaning we can choose which images get this treatment. You can see this in action here<\/a>.<\/p>\n
The Photo Treatment<\/h3>\n
This option gives your image a bit of a white border around the edges, just like photos in real life often have. Try this:<\/p>\n
img.photo {\n\tborder: 1px solid #999;\n\tbackground-color: #fcfcfc;\n\tpadding: 4px; \n}<\/pre>\n
You can see the results here.<\/a> What we\u2019ve done is added a gray border to all four sides, changed the background color of the image to a very pale gray (almost white), and then added a bit of padding to all four sides between the background and the image itself, so the background color could show through. And you\u2019ll note we used a class of \u201cphoto\u201d here: this way, we can pick and choose in our code which images get this treatment.<\/p>\n
The Depth Treatment<\/h3>\n
We can also expand on the Photo treatment above and use the borders to create a sense of depth:<\/p>\n
 img.deep {\n\tborder-left: 1px solid #ccc;\n\tborder-top: 1px solid #ccc;\n\tborder-right: 1px solid #888;\n\tborder-bottom: 1px solid #888;\n\tbackground-color: #fcfcfc;\n\tpadding: 4px;\n}<\/pre>\n
As you can see above and on the example page<\/a>, we\u2019ve changed the border colors slightly. We\u2019ve made the top and left borders a slightly lighter shade than the bottom and right borders. This creates a subtle illusion of depth: the lighter border on the top and left suggests light is hitting those sides and the darker border on the bottom and right suggests a hint of a shadow created by a three-dimensional object.<\/p>\n
The Shadow Treatment<\/h3>\n
And to expand further on the Depth treatment, we can use a bit of CSS magic and slightly modified HTML to really<\/em> make the photo jump up off the page. We\u2019ll start with this HTML:<\/p>\n
<div class=\"shadow\"><img src=\"photo.jpg\" \/><\/div><\/pre>\n
As you can see, we\u2019ve wrapped our image in a div. Then we just apply these styles:<\/p>\n
.shadow {\n\tfloat: left;\n\tbackground-color: #aaa;\n}\n.shadow img {\n\tmargin: -4px 4px 4px -4px;\n\tdisplay: block; \n\tposition: relative;\n\tpadding: 4px;\n\tbackground-color: #fcfcfc;\n\tborder-left: 1px solid #ccc;\n\tborder-top: 1px solid #ccc;\n\tborder-right: 1px solid #888;\n\tborder-bottom: 1px solid #888;\n}<\/pre>\n
Obviously, this is a more advanced technique than the previous options. We\u2019re applying a background color to the div around our image, and then floating it so that it becomes the same size as the image inside. Then, we\u2019re using negative margins<\/em> to move our image up and to the left of where it was originally, setting a display of \u201cblock\u201d and a position of \u201crelative\u201d to keep the floated div container from moving with our image. The result is that a few pixels of our background color are visible in the bottom right, creating the illusion of a shadow. Of course, as you can see by the example<\/a>, it isn\u2019t a true shadow: nothing shows through.<\/p>\n
The Shadow Treatment, Part Two<\/h3>\n
If you want your shadow to behave like a real<\/em> shadow, you\u2019ll need to make use of a transparent PNG image. Image editing is beyond the scope of this article (and as you can probably tell from the site, this author), but if you create a semi-transparent square of black (I used 40% opacity) and save it as a PNG, then you can just replace this line:<\/p>\n
background-color: #aaa;<\/pre>\n
With one like this:<\/p>\n
background-image: url(shadow.png);<\/pre>\n
And the result is a transparent shadow effect!<\/a> On browsers whose initials don\u2019t spell IE6, anyway. As usual, IE is a party pooper: it doesn\u2019t support transparency in images. But the result is a non-transparent shadow, no worse than what we had in the previous example.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<\/p>\n
No web presence these days is complete without a little pixel lovin\u2019 in the form of images. If you have a blog or website out there somewhere without a single image anywhere on the site, well… 1997 called. They said […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173,178,183],"tags":[261],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/16"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}