Grow your CSS skills. Land your dream job.

Possible to tile this difficult image?

  • # August 6, 2010 at 9:50 am

    So I have a little problem, because I want to achieve this effect:

    [img]http://junk.purplepies.be/css_snap.png[/img]

    As you can see it looks ok with fixed height, but I would like to have this effect on boxes that could be different of length. The line-height on this thing is not perfect (as I did not keep that in mind while designing), but could be changed to have 2-3 lines for each repeating part.

    I have a good knowledge of using sprites, so if that would be a solution, the only thing I’d have to know is how I could get a dynamic margin beneath the main text and the details on the bottom, which is – I think – where the problem is located.

    Hope anyone here can help :)

    # August 6, 2010 at 7:59 pm

    You can try using border image to display a repeating image down the left side and have it so it doesnt cut off, but you’re going to have to get a little creative.

    http://css-tricks.com/understanding-border-image/

    # August 7, 2010 at 7:08 am

    That might do the trick indeed :)
    I doesn’t look that hard, perhaps only the first time, so I’ll fix this for sure!

    Do you have any idea how I can get this to fall back on a regular sliding-door technique just for IE (since all the other browser that are supposed to be supported can display border-image)? I’ve been using that throughout the rest of the website to have the rounded corners and hard drop shadow effect.

    # August 8, 2010 at 2:53 am

    I wouldn’t know. None of my clients so far have requested any kind of sliding door affect.

    # August 8, 2010 at 5:30 am

    So this is how I got it looking with border-image:

    [img]http://junk.purplepies.be/css_snap2.png[/img]

    I do have to try out some negative margins for the paragraph to get rid of the extra whitespace surrounding it (as borders had to be 40×48 rather than the regular 15px padding), so don’t pay attention to that :)

    It’s almost good as you can see, and I’m thinking of leaving it this way if it solves any variable height problems, but I think this property has a long way to go before it’s useable for difficult images..

    # August 8, 2010 at 7:43 am

    I think by playing with the values a little you can improve the look. Should be able to get it perfect somehow.

    # August 8, 2010 at 7:54 am

    I thought that too when I first looked at it, but I have practically no control over how the left part repeats itself.. The corners are all as they should be, but the only thing I can to is tell the center part to either stretch or repeat..

    This is the image I’m using right now:

    [img]http://junk.purplepies.be/news_border_image.gif[/img]

    And this is the css (again, without having paid attention to padding or negative margins to contract the whitespace):

    Code:
    #news li
    {
    border-width:48px 40px 48px 40px;
    -moz-border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;
    -webkit-border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;
    border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;

    width: 240px;
    float: left;
    line-height: 26px;
    color: #999999;
    font-size: 14px;
    text-shadow: #E5E5E5 0 1px 0;
    }

    # August 8, 2010 at 8:05 am

    Do you have a link to a test page or site? It’s easier to look at and test things out.

    # August 8, 2010 at 9:57 am

    There is occasionally chatter of a "height-increment" property where elements could only grow in height in specified chunks which I think would solve your problem here. I don’t think there is any browser implementations of it though. You might have to rely on JavaScript to measure the height of it and adjust it to the next highest value that ensures a lined up border.Not ideal of course, but that’s our job.

    # August 8, 2010 at 10:17 am

    @noahgelman:

    Here’s the live version of the page:
    http://student.devine.be/florian.vanthu … ?page=news

    Not everything is functional on the website, so if you want to go exploring, keep that in mind ;)

    @chriscoyier:

    Too bad most of the things that are revolutionary aren’t supported (enough) :(
    I’ll take a look at doing this with js, but my teachers expect this to function without it as well, so that’s where I might consider losing a bit of quality in the representation of the notes..

    # August 8, 2010 at 2:36 pm

    Switch: url("../images/news_border_image.gif") 48 40 48 40 repeat

    To: url("../images/news_border_image.gif") 48 40 48 40 round

    And you’re all set.

    # August 8, 2010 at 3:23 pm

    That did the trick for Firefox, but I seem to still have the same problem in Safari and Chrome :( Check back on the same url to see for yourself if you have those 3 browsers available.

    # August 8, 2010 at 4:32 pm

    Try switching your 48 values to 45

    # August 8, 2010 at 4:41 pm

    That fixed the first two notes, but the latter one is still a bit messed up.
    Either way, I think I’m going to keep the messages short (in between first and second note), perhaps trim down the line-height a bit, and there’s a "read more" link anyways, so perhaps I can automatically limit the length of the paragraph in php :)

    So unless you’ve made another breakthrough, thanks a bunch for your help and insight!

    # August 8, 2010 at 6:20 pm

    Sorry, no break-throughs, but your very welcome.

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

You must be logged in to reply to this topic.

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