Pure CSS Elegant Blockquote

Elegant and responsive blockquote solution. Highlight quote text for a neat animation.

Demo Download

Author John Fink

Official Page: Go to website

Created SEPTEMBER 06, 2018

License Open

Compatible browsers Chrome, Firefox, Opera, Safari

HTML Snippet

`<div class="container">
  <blockquote>The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.
    <cite>~ Paul Rand</cite>
  </blockquote>
  <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
  <h3>Section Header</h3>
  <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
  <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>`

CSS Snippet

`@charset "UTF-8";
blockquote {
  border-left: 4px solid #00CC8F;
  color: #1a1a1a;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 1.25em;
  font-style: italic;
  line-height: 1.8em;
  margin: 1.1em -4em;
  padding: 1em 2em;
  position: relative;
  z-index: 0;
}
blockquote:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1em;
  height: 2em;
  background-color: #fff;
  border-radius: 50%;
  width: 2em;
  margin-top: -1em;
}
blockquote:after {
  content: "ï͟";
  position: absolute;
  top: 50%;
  left: calc(-0.5em - 2px);
  color: #00CC8F;
  font-family: "Ionicons";
  font-size: 1.15em;
  font-style: normal;
  line-height: 1em;
  text-align: center;
  width: 1em;
  margin-top: -0.5em;
  transition: 0.5s all ease-in-out;
}
blockquote:active:after {
  transform: rotateY(360deg);
}
blockquote cite {
  display: block;
  font-size: 0.75em;
  line-height: 1.8em;
  margin-top: 1em;
}

@media (max-width: 1200px) {
  body, html {
    font-size: 18px;
  }
}
@media (max-width: 980px) {
  body, html {
    font-size: 16px;
  }

  .container {
    max-width: 720px;
    padding: 0 3em 3em;
  }

  blockquote {
    font-size: 1.1em;
    margin: 1.1em -2em;
  }
}
@media (max-width: 767px) {
  body, html {
    font-size: 16px;
  }

  .container {
    padding: 0 2em 3em;
  }

  blockquote {
    border-top: 2px solid #00CC8F;
    border-bottom: 2px solid #00CC8F;
    border-left: none;
    margin: 1.5em 0;
    padding: 1.5em 1em;
  }
  blockquote:before {
    left: 50%;
    top: -3px;
    margin-left: -1em;
  }
  blockquote:after {
    font-size: 0.75em;
    left: 50%;
    top: calc(-0.5em - 2px);
    margin-top: 0;
    margin-left: -0.5em;
  }
  blockquote cite {
    text-align: right;
  }
}`

Preview