SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smudged Edge Effect

    Hiya,

    Using purely CSS, is it possible to create a div that utilizes the same effect as shown in the picture found at the following URL?: http://www.freewebs.com/ticstacs/Image.jpg

    Also, how do I add rounded corners to the div?

    TicTac

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally I'd take the image apart so that you have a thin horizontal strip of the middle part of the image (maybe around 2px high) which you'd add as a background image to the div repeating vertically. Then I'd attach the top part of the image to something - say for instance a heading within the div and the bottom part to something else within the day - say for instance a list or paragraph.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it not possible through Pure CSS?

  4. #4
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can this not be done through CSS alone?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's possible, but you're going to need a lot of extra HTML markup. Bear in mind I'm a minimalist coder (to the extreme) so what's "excessive" to me might be appropriate to you.

    I have a bunch of other tabs open, but I'll keep this one in the browser for now, and when I get done, I'll go looking for a link that will show you how to do this, ok?

    Oh and by the way, there's no need to bump your thread like that, and if I haven't done so before, allow me to welcome you to SitePoint!

  6. #6
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smudged Edge Effect

    Ok.

  7. #7

  8. #8
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan Schulz,

    What would you call the border effect on the second square, at the following URL: http://battletech.hopto.org/html_tut.../template.html

    Is there one that has rounded corners with this effect?

    TicTac

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bottom example would be the closest I know of off-hand. You'd probably have to to replace the shaded border with the dropshadow though.

    I'm currently working right now so I really can't help out further at the moment.

  10. #10
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me know when your free.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •