Advanced Search

Return to Snippet

Revision: 39001
at January 11, 2011 21:18 by blueocto
Initial Code 
<!-- THE HTML -->

<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>

/* THE CSS */

blockquote {
display: block;
padding: 0 60px;
width: 350px;
}

blockquote:before, blockquote:after {
color: #69c;
display: block;
font-size: 700%;
width: 50px;
}

blockquote:before {
content: open-quote;
height: 0;
margin-left: -0.55em;
}

blockquote:after {
content: close-quote;
height: 50px;
margin-top: -70px;
margin-left: 360px;
}
Initial URL 
http://www.designmeme.com/articles/csscurlyquotes/
Initial Description 
<p>Simon Collison recently explained how to create Swooshy Curly Quotes Without Images using CSS. It’s a nice technique that works cross-browser, but you have to add < span > tags to your markup for it to work. Here is an alternate technique that requires no changes to your markup that will work in modern CSS2 compatible browsers like Firefox.</p>
Initial Title 
CSS Curly Quotes
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS