Grow your CSS skills. Land your dream job.

Expanding hr for responsive design.

  • # June 28, 2012 at 1:27 pm

    I would like the green lines in this title to shrink with the browser window.
    http://goodwynbuilding.com/communities/ashley-place/

    Here I am trying to use a percent width for the green lines. But that doesn’t work because I have different size titles on each page. I don’t want to readjust the percentages for each title.

    I wish the hr length could always be 100% of distance between the title and the arrow pointer on the end.

    Thanks

    # June 28, 2012 at 2:00 pm

    Have you considered using a background-image for the green line instead? You might be able to use :before and :after for the artwork on either side as well.

    Example: http://jsfiddle.net/MVm3Q/2/

    # June 28, 2012 at 3:24 pm

    I think this has come up before….here’s a couple of options

    http://jsfiddle.net/joshnh/2dUqV/

    http://jsfiddle.net/Paulie_D/tW5Nd/

    # June 28, 2012 at 3:42 pm

    Unfortunately neither of those options will work because they both have the title background color the same color as the body background.

    Because I have a wood pattern background that wont work for me. If I do background-transparent for title like I need to, on the above suggestions, the title will have the line going through the title.

    # June 28, 2012 at 4:02 pm

    @aaronheine, did you check the fiddle I provided? It uses the same wood pattern on the text element to hide the green background passing through.

    Fiddle: http://jsfiddle.net/MVm3Q/2/

    In fact, you could do away with all of the gradient code and use a dataURI on the background instead. This extends support further back in IE as well:

    Fiddle: http://jsfiddle.net/MVm3Q/8/

    # June 28, 2012 at 6:59 pm

    Here is a technique that doesn’t involve faking a background image: http://jsfiddle.net/joshnh/AHNQd/

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

You must be logged in to reply to this topic.

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