{"id":2098,"date":"2016-11-20T14:18:48","date_gmt":"2016-11-20T14:18:48","guid":{"rendered":"http:\/\/cssreset.com\/?p=2098"},"modified":"2016-11-20T14:18:48","modified_gmt":"2016-11-20T14:18:48","slug":"7-css-snippets-to-style-blockquotes","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/7-css-snippets-to-style-blockquotes\/","title":{"rendered":"7 CSS Snippets to Style Blockquotes"},"content":{"rendered":"

Blockquotes are HTML elements that are meant to isolate a long quote or block of text. In terms of styling, they present developers and designers with opportunities to get creative with their designs, because they can be styled in so many different ways. Take a look at some of our favorite ways to style blockquotes below.<\/p>\n

1. Colorful Blockquotes<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This snippets hows you how to create cool, colorful blockquotes that mix colors and different font-faces for a stylish look.<\/p>\n

2. Notepad Snippet Effect<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This creative CSS snippet demonstrates how to make blockquotes that look like they’re on notepad paper.<\/p>\n

3. Simple and Nice Blockquote Styling<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This CSS snippet demonstrates how to make a really clean, neutral and simply styled blockquote that will go with any of your projects.<\/p>\n

4. Centered Blockquote<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This snippet creates a simple blockquote style where the text is centered in between the quotation marks.<\/p>\n

5. Blockquote Box<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

Create clean and colorful blockquote boxes with this snippet.<\/p>\n

6. Fancy Blockquote Style<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This “fancy” blockquote style features a text block that expands beyonds its bounds and quotation marks that use text shadows to create a cool color\/border effect.<\/p>\n

7. A Better Blockquote<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This snippet demonstrates a modern, sleek approach to styling blockquotes.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Blockquotes are HTML elements that are meant to isolate a long quote or block of text. In terms of styling, they present developers and designers with opportunities to get creative with their designs, because they can be styled in so […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2098"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2098"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2098\/revisions"}],"predecessor-version":[{"id":2108,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2098\/revisions\/2108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2107"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}