Simple and Nice Blockquote Styling by css

Posted By : Balraj Singh | 30-Jun-2015

Blockquote Styling by CSS

We can create Simple and Nice Blockquote Styling by CSS. Generally mostly people use an background image for opne or close coma. But It is very easy to create.

For Example:-

HTML

<blockquote>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</blockquote>
 

 

CSS

 blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 50px 30px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
 

 

THANKS

About Author

Author Image
Balraj Singh

Balraj is a creative UI designer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Balraj likes playing tech Quiz and loves bike riding.

Request for Proposal

Name is required

Comment is required

Sending message..