Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image Shadow and Border Without Second Div?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #44342
    siouxfan45
    Participant

    What I’d like to achieve is fairly simplistic. I’d like to have an image with a 15px border and a shadow around the image. However, I’d like that shadow to be around the image itself, not outside the border.

    Is this possible without an additional DIV wrapping around the image? I feel like this is a “Let me Google that for you…” question, but I’ve been unable to find an answer in searches.

    #133048
    ChrisP
    Participant

    > Is this possible without an additional DIV wrapping around the image?

    No, it’s not possible (for now). At least, as far as I know, maybe someone has something creative up their sleeve. But I’d say your best bet without extra markup would be a pseudo-element, which isn’t (currently) supported for the `img` tag. See [this spec](http://www.w3.org/TR/CSS2/generate.html#before-after-content “”).

    #133050
    Paulie_D
    Member

    What would be the purpose/effect of the shadow? Is this a box-shadow/drop-shadow?

    I’m having a tough time visualising this.

    #133056
    Paulie_D
    Member

    Yeah…I get what you are trying to do…but I’m having trouble visualising how this would actually look.

    Do you have something (mock-up image perhaps) we could look at?

    #133057
    Merri
    Participant

    http://codepen.io/Merri/pen/GLwes

    Can’t do it with only the image element as you can’t have pseudo elements for it.

    **Edit!**

    But this you can do:

    img {
    background: red;
    border-radius: 3em;
    box-shadow: inset 0 0 1em black;
    padding: 1em;
    }

    It might not be what you want, but it works.

    #133058
    Paulie_D
    Member

    How about a complex background-image gradient?

    http://codepen.io/Paulie-D/pen/kJlop

    #133059

    merris solution in action…
    http://codepen.io/karimcossutti/pen/eFgBx

    for what i understand this is what you want to achieve right?

    #133069
    wolfcry911
    Participant

    http://codepen.io/wolfcry911/pen/EFbjL

    as merri pointed out, you can’t use pseudo elements :before or :after on img, but you could accomplish this using a background image on a different element.

    #133079
    CrocoDillon
    Participant

    It is possible if you think of the border as another box-shadow ;)

    http://codepen.io/CrocoDillon/pen/DjczI

    #133080
    wolfcry911
    Participant

    good one Croco

    #133142
    ChrisP
    Participant

    Very nice, @CrocoDillon

    #133187
    CrocoDillon
    Participant

    Thnx ^^ @siouxfan45, yeah agree on the not well documented part (JS is even worse…) Good luck!

    #133198
    Podders
    Participant

    Props to Croc, nice simple solution.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.