Big Curly Blockquotes


/ Published in: CSS
Save to your folder(s)

Markup example: See Big Curly Quotes Markup.
Thx to difusion.org.uk. No need for images to make big quotes on a page, CSS does it for you. Tested in many browsers.


Copy this code and paste it in your HTML
  1. blockquote {
  2. position: relative;
  3. text-indent: 2em;
  4. }
  5.  
  6. .bqstart,
  7. .bqend { font-size: 300%; }
  8.  
  9. /* apply IE specific rules first */
  10. .bqstart {
  11. text-indent: 0;
  12. margin: -0.6em 0 -2em 0;
  13. float: left;
  14. }
  15.  
  16. blockquote > .bqstart {
  17. /* add extra non-ie rules */
  18. position: absolute;
  19. top: -0.2em;
  20. left: 0;
  21. /* remove IE specific rules */
  22. float: none;
  23. margin: 0;
  24. }
  25.  
  26. .bqend {
  27. position: absolute;
  28. margin-top: -0.6em;
  29. right: 0;
  30. text-indent: 0;
  31. }
  32.  
  33. blockquote > .bqend {
  34. margin-top: -0.2em;
  35. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.