Large quote marks generated in html css
How do I create a quote with these huge quotes?
I have tried most of the examples shown online. Using block quote with: before and: after css styles. The problem I'm running into is to avoid using an image in a div wrapped around the text, due to responsiveness. I am also using Twitter Bootstrap framework.
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 problem is looking like this example. Although responsiveness does seem to work. Quote marks are not diagonally apart
source to share
While it's not clear after reading your question, I think you want to change the shape of the quotes.
Select the correct Unicode value and add the property quotes
. for example
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 can also change the family font-family
to make the quotation marks better fit your needs.
Here is a jsfiddle .
source to share
Quote marks are not diagonally apart
So, just post 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/
source to share