advanced code snippet search

Posted By

blueocto on 01/11/11


Tagged

quotes


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

qubestream
geldora


CSS Curly Quotes

 / Published in: CSS
 

URL: http://www.designmeme.com/articles/csscurlyquotes/

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

Expand | Embed | Plain Text 
  1. <!-- THE HTML -->
  2.  
  3. <blockquote>
  4. <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>
  5. </blockquote>
  6.  
  7. /* THE CSS */
  8.  
  9. blockquote {
  10. display: block;
  11. padding: 0 60px;
  12. width: 350px;
  13. }
  14.  
  15. blockquote:before, blockquote:after {
  16. color: #69c;
  17. display: block;
  18. font-size: 700%;
  19. width: 50px;
  20. }
  21.  
  22. blockquote:before {
  23. content: open-quote;
  24. height: 0;
  25. margin-left: -0.55em;
  26. }
  27.  
  28. blockquote:after {
  29. content: close-quote;
  30. height: 50px;
  31. margin-top: -70px;
  32. margin-left: 360px;
  33. }

Report this snippet  

You need to login to post a comment.