Quote icons

Need help with Photoshop, the GIMP, Illustrator, or others? Want to show off your work? Looking for advice on your newest Flash stuff?

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Quote icons

Post by alex.barylski »

You know those really popular quotes you see on web sites which resemble something of an 6 or 9

6This is some quoted text9

Anyone know of an article on how those are made? I want to add them to my website...
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

Do you mean:

‘ quote left ‘ or ‘
’ quote right ’ or ’
“ quote double left “ or “
” quote double right ” or ”
(#10850)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

...or are you thinking of big graphic files?

You can put them in place with the :before and :after pseudo-classes I believe.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

If what pickle thinks you are thinking is correct, I would recommend using this CSS:

Code: Select all

blockquote.fancy {
  background: transparent url(quote-left.png) left top no-repeat;
}
blockquote.fancy div.quote {
  padding: .5em 48px .5em;
  background: transparent url(quote-right.png) right bottom no-repeat;
}
blockquote.fancy div.origin {
  text-align:right;
}
Used as:

Code: Select all

<blockquote class="fancy">
  <div class="quote">The goodies!</div>
  <div class="origin">-- by Someone</div>
</blockquote>
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

heh...I meant a tutorial on making those large quotes in Photoshop...guess i hshould have said so :P

I'm designing a banner fo rmy site and need to quote some text...no idea how to make pretty quoted text or interesting banner backgrounds...

ANy help is appreciated :)
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

(#10850)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

different typefaces ave different quote styles. I would suggest finding some that suit you and adding them as text in photoshop - they'll be vectors.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

You know, I just realized something: wouldn't taking a random font on your computer, making a nice image of it, and then putting it on your website be a violation of copyright? Probably justifiable under fair use though...
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I don't think so - the rendered image of the font is part of the intended use
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Depends on the license of the font.
Post Reply