0

I would like to achieve a CSS border similar to the one seen around the Tim Cook image on this page: http://www.macstories.net/news/tim-cook-at-d11/ — however, I would only like the border around images in the body text on my own site, not, for instance, images in the sidebar of my site.

What code would I need to achieve the cool border, and how can I target only images in the body text?

1
  • 1) - the style is right there in the source ("inspect element" in Chrome, Safari, Firebug, etc.) 2) - use a CSS selector to target only the element you want.
    – Tim M.
    Commented May 29, 2013 at 0:49

3 Answers 3

6

If your "body text" is, say, in a div classed as "main", you can target the images just in that section like so:

.main img {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    margin: 30px 0;
    padding: 10px;
    background: #FFF;
    border: 1px solid #CCC;
    position: relative;
    display: block;
}
0
img{
    -webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    padding:10px;
    background:#fff;
    border:1px solid #ccc;
    width:auto;
    height:auto; 
    }
0

Well i think it would be something like this for just a generic shadow effct.

The HTML:

 <div id="example" class="outerglow">Full Shadow</div>

The CSS:

    #example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}


    .outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}

and here is the jsfiddle to look see.. http://jsfiddle.net/KMtc6/

Forgive me if my code is sloppy or jumbled.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.