Grow your CSS skills. Land your dream job.

How to achieve

  • # February 19, 2009 at 3:43 am

    Good day all,

    I saw this effect been done by a friend of mine on an apple, and it is all "generated" out of the program they used. I was wondering if anyone would have an idea as to how to achieve this sort of effect. I have created images as displayed in the example to represent the corners and "frame" but I have no idea other than to slap it in a table row & colomn. The other thing is to add then a picture on top of it is what stumps me.

    IE:
    [img]http://img517.imageshack.us/img517/1423/cssik3.th.png[/img]

    If anyone knows, that will be most welcome.
    Thanks again

    # February 19, 2009 at 11:46 am

    I’m not exactly sure what you’re asking here. Are you asking how to make the border/frame around the image? Because that would just be part of the image itself, absolutely nothing to do with CSS.

    # February 19, 2009 at 6:04 pm

    Hi GavinCZA,

    If I’m looking at the capture correctly you are interested in the shadow effect on the images. Just like TheDoc said you would have to create the effect in Photoshop. Once you have it though you could visit Web Designer Wall and there is a tutorial on CSS Decorative Galleries (type in search). You might want to check that out. Nick explains everything very well. This way if you create the effect you can use it with your photos on your website.

    Hope this some help.

    Jason Loucks

    # February 20, 2009 at 1:30 am

    @Louckster – Yeah the dropshadow effect is what I am after, I figured that there are two ways doing it, I mean you could in Photoshop create a: Lets say 400 x 400px page, design a 3 x 4 "gallery" and slap it on as a "content" background, from there position the images you want on top via CSS or something.
    I thought there was some way to dynamically create the frame of the picture (dropshadow) with the something like "left-top" / "right-top" and so on images. But I will go have a look at the site you recommended and see what they have to offer. Thanks :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".