Big Beautiful Quotes in CSS

Big Beautiful Quotes created using just CSS.

by secretgspot

HTML

<head>
<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/> 
</head>

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus dignissim, purus a blandit cursus, nulla erat cursus mauris, a dignissim est ante et arcu. Vivamus sollicitudin porttitor justo. Nunc at leo quis arcu ultrices placerat. Quisque eget justo at nisi tempus vehicula. Nullam a odio eu orci sodales varius.</p>
</blockquote>

CSS

body {
    margin: 40px;
    background-color:#efefef;
    font-family: 'Yanone Kaffeesatz';
}

blockquote {
    display: block;
    border:1px #dfdfdf solid;
    background-color:white;
    font-size: 20px;
    padding: 10px 60px;
    width: 350px;
    text-align: center;
    color: #444444;
}

/* Quote Mark Styles */
blockquote:before, blockquote:after {
color: #5a7c87;
display: block;
font-size: 500%;
width: 50px;
}
 
/* Left Quote */
blockquote:before {
    content: open-quote;
    height: 0;
    margin-left: -0.55em;
}

/* Right Quote */
blockquote:after {
    content: close-quote;
    height: 50px;
    margin-top: -50px;
    margin-left: 350px;
}