Advanced Search

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.

Expand | Embed | Plain Text

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.