Big Quotation marks styled in html css

Question

How would I style a quote with those huge quotation marks?

I have tried most of the examples shown online. Using Block quote with the :before and :after css styles. The issue I'm having is avoiding the use of a image in div's wrapped around text, because of responsiveness. I'm also using the Twitter Bootstrap framework.

The Quote in html:

<div class="container">
    <blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

And the css:

blockquote {
border:none;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom:-30px;
}

blockquote h3 {
    font-size:21px;
}

blockquote h3:before { 
    content: open-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
} 
blockquote h3:after { 
    content: close-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
}

The end result I'm trying to achieve

The problem is getting to look like this example.Although the responsiveness does sort of work. The Quotation marks are not positioned diagonally from one another

You say you don't want to use images "because of responsiveness", yet instead you use a fixed-size (ie. non-responsive) font size for your quote marks. Make up your mind! — Niet the Dark Absol, Dec 11 '14 at 15:13
I'm not sure what is wrong with your example, it appears to work perfectly. — Joe, Dec 11 '14 at 15:15
What do you actually want to achieve, because your example actually does exactly what you want to do from my point of view? Please try to explain — Andy Reimann, Dec 11 '14 at 15:17
@NiettheDarkAbsol It does respond fine though.It's the styling to get it to look exactly like the image thats giving me the reall hard time — Reeze Cornelius, Dec 11 '14 at 15:21
@AndyReimann The code does seem to work finr. The problem is the styling part. I'm not getting the finished result like I would like in the image. — Reeze Cornelius, Dec 11 '14 at 15:25
I think all you need to do is play around with different fonts just for the quotes. — Novocaine, Dec 11 '14 at 15:57

score 17 · Accepted Answer · edited Dec 18 '18 at 12:54

Although it's not clear after reading your question I guess you want to change the shape of quotation marks.

Pick a proper unicode value and add a quotes property. E.g.

blockquote {
    border:none;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:-30px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote h3 {
font-size:21px;
}

blockquote h3:before { 
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
} 
blockquote h3:after { 
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
  
}

<div class="container">
<blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

You may also want to change the font-family so the shape of quotation marks is more suitable to your desires.

Here is jsfiddle.

Rakaczy nicely done... Thanks The only thing I have chaged with this code is to only put the font-family: in the blockquote h3:before and the blockquote h3:after classes. — Reeze Cornelius, Dec 12 '14 at 07:20

score 7 · Answer 2 · answered Dec 11 '14 at 16:16

7

The Quotation marks are not positioned diagonally from one another

So just position them:

blockquote{
    position: relative; 
}

blockquote h3:before {
    position: absolute; 
    top: 0;
    left: 0; 
}

blockquote h3:after{
    bottom: 0; 
    right: 0; 
}

Or like in this demo: http://jsfiddle.net/pz6kx0bw/

answered Dec 11 '14 at 16:16

Jan Drewniak

1,316
15
18

This works well thanks. I used your suggestion using the position attributes – Reeze Cornelius Dec 12 '14 at 07:29

Big Quotation marks styled in html css

2 Answers2