How we can create a custom stylish blockquote using HTML & CSS? Solution: Check out this Stylish CSS Blockquote Design, A Pure HTML CSS Blockquote Highlighter.
I am sure that you know what is blockquote If you don’t know then let me tell you. In HTML, the blockquote element defines a section that is quoted from another source. If you want to show someone’s quotes or statement then you should use blockquote.
Maybe you have seen different kinds of blockquote design on multiple websites. If you are using CMS like WordPress then there are also have a feature to put blockquote. But the default blockquote style in HTML or WordPress is non-stylish or non-catchy. Now you can customize the blockquote‘s style after reading this post.
Because today you will learn to create or customize the blockquote on any type of website. Yes, you can change the style & create an attractive blockquote section using CSS. The codes I am providing you in this post, this has two versions. I mean it has a responsive design, you can see a style in desktop & another in mobile.
So, Today I am sharing Stylish CSS Blockquote Design, A Pure HTML & CSS Blockquote Highlighter. It also has an animated quotation icon, that’s animated on click. The interesting thing is, you use it on any websites like scratch coding or CMS websites, Just you have put the CSS codes given below.
If you are thinking now how this Stylish Blockquote Highlighter actually is, then see this video preview given below.
Preview Of Blockquote Highlight With Animated Quotation Icon
See this video preview to getting an idea of how this stylish highlighter looks like.
Now you can see this visually. See when I click on the quotes or texts then quotation icon flip with 360 degrees. If you like this, then get the source code of its.
You Also May Like:
- CSS Style Checkbox With Animated Tick
- Show or Highlight Active Link
- Text Fill On Hover Direction
- HTML CSS Glitch Effect
Stylish CSS Blockquote Design Source Code
As always before sharing source code, let’s talk about it. I just put the main div with class name container, class= "container". Then I placed the blockquote inside the main div. I used Ionicons Ico to created the animated quotation icons. For the desktop or large screen, I put the line and icon on the left side. For creating the left sides line & icon just put border-left: 3px solid #color;.
To placing the icon in the middle of the line, I used CSS postion: absolute; with top: 50%;. The animation I used for the quotation icon as you can see on the preview, This is just rotating on click. To this animation effect, I used these codes.
|
1 2 3 |
blockquote:active:after { transform: rotateY(360deg); } |
For small screens like mobile, I placed two lines one on the top, or other on the bottom. For creating this, I used the CSS @media query. After putting the screen size condition in @media, I just added two lines border-top: 2px solid #color; & border-bottom: 2px solid #color;. This time I placed the icon in the middle of the top line, for this I have put top: 0 and left: 50%.
For placing the <cite> or author name I had added this line margin-top: 1em;. In the responsive version, I give this condition to <cite> text-align: right;. These are the main points of this program, left others you will understand easily after getting the codes.
For creating this stylish blockquote you have to create just 2 files. One for HTML & one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Pure CSS Blockquote</title> <link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.1/css/ionicons.min.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> <blockquote>Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program. <cite>- Linus Torvalds</cite> </blockquote> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body, html { background: #fff; color: #333; font-size: 20px; line-height: 1.8em; margin: 0; overflow-x: hidden; padding: 0; margin-left: 10%; margin-top: 10%; } .container { max-width: 960px; padding: 0 6em 3em; } blockquote { border-left: 3px solid #FF5154; color: #1a1a1a; font-family: 'Cinzel', serif; font-size: 1.25em; font-style: italic; line-height: 1.8em; margin: 1.1em -4em; padding: 1em 2em; position: relative; transition: 0.2s border ease-in-out; z-index: 0; } blockquote:before { content: ""; position: absolute; top: 50%; left: -4px; height: 2em; background-color: #fff; width: 5px; margin-top: -1em; } blockquote:after { content: ""; position: absolute; top: 50%; left: -0.5em; color: #FF5154; font-family: "Ionicons"; font-style: normal; line-height: 1em; text-align: center; text-indent: -2px; width: 1em; margin-top: -0.5em; transition: 0.2s all ease-in-out, 0.4s transform 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; margin-left: 0; margin-top: 0; } .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; margin-left: 0; margin-top: 0; } .container { padding: 0 2em 3em; } blockquote { border-top: 2px solid #FF5154; border-bottom: 2px solid #FF5154; border-left: none; margin: 1.5em 0; padding: 1.5em 1em; } blockquote:before { left: 50%; top: 0; height: 4px; margin-top: -3px; margin-left: -1em; width: 2em; } blockquote:after { font-size: 0.75em; left: 50%; top: 0; margin-top: -0.5em; margin-left: -0.5em; } blockquote cite { text-align: right; } } |
That’s It. Now you have successfully created Stylish CSS Blockquote Design, A Pure CSS & HTML Blockquote Highlighter. If you want to use it on WordPress, Just remove the body, HTML, & container properties from CSS section, Left others add on custom CSS section. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
