en it en en en en en la la en en en en en en en en en en en en en en en en en en
CSSing: Using a repeatable image as a border
The act of using CSS to create a better web experience for everyone. CSSing contains examples of effective CSS techniques and smart application of tricks and tips.
I've done this example for people many times. The trick is simple, apply a repeatable image to a container block and then make the children have a solid background.
The following example uses   as the container and   as it's children.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus pharetra, wisi fringilla posuere interdum, leo eros pellentesque eros, non venenatis tellus ligula ac neque. Phasellus pede. Nulla facilisi. Integer diam tortor, varius vitae, sodales sit amet, faucibus ut, odio. Curabitur quam sapien, rutrum sit amet, porta vel, dapibus ut, tortor. Phasellus a mi vel ipsum auctor dictum. Integer vel nunc.
Curabitur dolor. Mauris tempus. Ut purus tellus, cursus ac, aliquet at, tempor sed, metus. Vivamus tempus euismod sapien. Maecenas a urna. Morbi pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce consectetuer fermentum justo.
Like I said, the trick is very simple:
blockquote.image-border { background-image: url(image-border.gif); padding: .5em; margin: 1em; } blockquote.image-border p { margin: 0; padding: 0; background-color: #fff; padding: .25em; }
posted by Mike @ 7:45 AM   0 comments
Single GREATEST quote EVER
Color picker of choice!
Ticked Off? Visited Links How-To
VisiBone Font Survey Results - Browsershare
Must bookmark: Developing With Web Standards