Topic: Quotes (Page 1 of 1)

I'm confused (as usual) I want to make those neat looking quotes using CSS you know the ones like this:

" Quote "

Where the " are replaced by huge quote symbols (images). How are they done? Same technique as custom corners??

You can use the :before and :after pseudo elements, and even the background of the blockquote tag itself to display one of the quote symbol.



(Edited by poi on 03-03-2005 14:15)

quote:

---

poi said:

even the background of the blockquote tag itself to display one of the quote symbol.

---

But that way I'll be restricted to how big I save the image. What if I wanted it to be fluid?

nope you won't be restricted to the size of your image!
you can put the opening quote with the

blockquote

{

    background:url('img/top_left_quote.png') top left no-repeat;

}

and use the :after pseudo element to put the closing quote, like that :

blockquote:after

{

    display:block;

    background:url('img/bottom_right_quote.png') bottom right no-repeat;

}

Basically it's the same technique as the custom corners in full CSS2 ( read without additionnal markup ).
Check the FAQ entry about round corners in CSS.

Oh, thanks for clearing that out