I would like the green lines in this title to shrink with the browser window.
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.
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.
I think this has come up before….here’s a couple of options
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.
@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.
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:
Here is a technique that doesn’t involve faking a background image: http://jsfiddle.net/joshnh/AHNQd/
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".