Well looking quotes Print

Accès au site français

For a long time, create good looking curly into quotes like prints style has been a challenge for web designers.

Here is an approach that, instead of other ones, offer a pretty good position for the last sign.

One regret however, it only works for modern browsers (whose IE 9+)

HTML markup

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus est, egestas vel aliquet at, pellentesque nec lorem. Pellentesque molestie bibendum eros, eu suscipit nisi volutpat fringilla.</p>
  3. <footer class="cite"><cite>- by Albert Einstein</cite></footer>
  4. </blockquote>

CSS

  1. blockquote {
  2. position:relative;
  3. padding-top: 20px;
  4. font-size: 1.2em;
  5. line-height: 1.5em;
  6. color: #454545
  7. }
  8. blockquote:before {
  9. display: inline-block;
  10. float: left;
  11. margin: 40px 15px 0 0;
  12. font-size: 5em;
  13. /* Impact quote aspect */
  14. font-family: Georgia;
  15. /* Default opening quote */
  16. content: open-quote;
  17. /* Special opening quote */
  18. content: '“';
  19. color: #ddd;
  20. text-shadow: 0 1px 1px #909090
  21. }
  22. /* Depending of final elements (here 2: <footer> & <p>) change the nth-last-child number accordingly in order to select the last second occurrences, e.g. the last <p> */
  23. blockquote p:nth-last-child(2):after {
  24. display: inline-block;
  25. position:relative;
  26. bottom:0.28em;
  27. bottom:-1.7rem;
  28. margin:0 0 0 15px;
  29. font-size: 5em;
  30. /* Impact quote aspect */
  31. font-family:Georgia;
  32. /* Default closing quote */
  33. content: close-quote;
  34. /* Special closing quote */
  35. content:'”';
  36. color: #ddd;
  37. text-shadow: 0 1px 1px #909090
  38. }

But is it really a regret? Not sure. Even if quoting signs are not displayed on old browsers, it worth better looking on the future (waiting for user software upgrades) instead of the past: this is what good practices call “progressive enhancement”.

Result

A website template by Tim Kadlec

These method applied on this model

Published on | Updated on by Patrick LEFÈVRE.

Related Articles

Compress your CSS & javascript files - Publié le 2012.01.09 By Patrick LEFÈVRE.
Access to all article archives

» Previous Article
txp:fr supports Textpattern ;·) Textpattern CMS

Need Help? Post your question on Entr'Aide txp:fr website