Topic: Quotes Pages that link to <a href="https://ozoneasylum.com/backlink?for=25166" title="Pages that link to Topic: Quotes" rel="nofollow" >Topic: Quotes\

 
Author Thread
templar654
Paranoid (IV) Inmate

From: Beyond that line...
Insane since: Apr 2004

IP logged posted posted 03-03-2005 13:25 Edit Quote

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??

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 03-03-2005 14:13 Edit Quote

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)

templar654
Paranoid (IV) Inmate

From: Beyond that line...
Insane since: Apr 2004

IP logged posted posted 03-04-2005 10:47 Edit Quote
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?

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 03-04-2005 11:41 Edit Quote

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

code:
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 :

code:
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.

templar654
Paranoid (IV) Inmate

From: Beyond that line...
Insane since: Apr 2004

IP logged posted posted 03-05-2005 04:49 Edit Quote

Oh, thanks for clearing that out



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu