Jul 29

Tagged in: , Comments:Add

Simple Double Quotes

This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.

Preview double quotes

Download HTML file

1. HTML source code

Start with a blockquote and some text.

<blockquote>Hello, I am a double quote...</blockquote>

2. Specify blockquote

Specify blockquote element as follow:

blockquote {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(images/close-quote.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

The CSS code above will display the close-quote.gif graphic background at bottom right corner. The padding-left and text-indent will create a hanging indent of -18px. It will look like this:

step 2

3. First letter of blockquote

Now add 18px left padding to the first-letter of blockquote. This will make the text align together. Then display the open-quote.gif at top left corner. Note I made the first letter in different font styles just to look nice.

blockquote:first-letter {
  background: url(images/open-quote.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

step 3

Pullquote style

If you want to make a pullquote, simply specify the blockquote float left or right. View my pullquote sample.

Delicious Stumbleupon Digg

30 Artistic Flash Sites Illustrating the Flower Pattern

Comments

Pages: 8 7 6 5 4 3 2 1 » Show All

There are 74 comments (+Add)

  • 74 Ben http://twincircuits.com

    Hey, what happened to the content: open-quote; property?

    Oh well.

  • 73 The Bible Post http://www.thebiblepost.com

    This is exactly what I have been looking for. Thank you!

  • 72 Jasmeet

    very nice technique…

  • 71 Natalie

    Thanks you

  • 70 tacohell

    i luv u for this tut

  • 69 Odwa

    i am using a text box type of field in a details view, now when i’m typing “1″ it changes to “&qoutes 1 &qoutes” now i want to fix that.

  • 68 live dealers casino

    I really, truly am glad I found this site. It has answered so many questions for me. I will be back. Thank You

  • 67 Eric Martindale http://www.ericmartindale.com

    Great tutorial, but what happens when you want to use the following code:

    text-align: justify;

    …to justify the contents of the blockquote? I’m noticing that the hanging indent changes are causing the first word to sometimes overlap the contents of the sentence (Google Chrome 1.0.154.36).

    Any idea on how to prevent that from happening?

  • 66 ntas http://www.kalicido.com

    thank’s for share our

  • 65 walson ma

    Your web page ’s design look very good. I learn a lot of things from your web site. Thank you

Pages: 8 7 6 5 4 3 2 1 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

advertisement

Back to top