Fancy CSS3 Pull-Quotes

SUBMITTED BY: Guest

DATE: May 24, 2013, 11:23 a.m.

FORMAT: CSS

SIZE: 919 Bytes

Raw Download

HITS: 1289

Report
  1. .has-pullquote:before {
  2. /* Reset metrics. */
  3. padding: 0;
  4. border: none;
  6. /* Content */
  7. content: attr(data-pullquote);
  9. /* Pull out to the right, modular scale based margins. */
  10. float: right;
  11. width: 320px;
  12. margin: 12px -140px 24px 36px;
  14. /* Baseline correction */
  15. position: relative;
  16. top: 5px;
  18. /* Typography (30px line-height equals 25% incremental leading) */
  19. font-size: 23px;
  20. line-height: 30px;
  21. }
  23. .pullquote-adelle:before {
  24. font-family: "adelle-1", "adelle-2";
  25. font-weight: 100;
  26. top: 10px !important;
  27. }
  29. .pullquote-helvetica:before {
  30. font-family: "Helvetica Neue", Arial, sans-serif;
  31. font-weight: bold;
  32. top: 7px !important;
  33. }
  35. .pullquote-facit:before {
  36. font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
  37. font-weight: bold;
  38. top: 7px !important;
  39. }
comments powered by Disqus