CSS Blockquote Style For Web Design

Create Blockquote using only css. There are many websites used in Blockquote. You can find many types of CSS Blockquote but this CSS Blockquote is made by CSS3 only.

This code is very easy to use. This code is a fully responsive design. I found this code on CodePen. The author of this code is Juan Pablo. My previous tutorial is how to create CSS Search Box With Animation Effects.

HTML

<div class="quote-wrapper">
	<div class="blockquote">
		<h1>Intuitive design happens when <span>current knowledge</span> is the same as the <span>target knowledge.</span></h1>
		<h4>—Prosenjit Sikdar<br><em>Web Site Usability: A Designer's Guide</em></h4>
	</div>
</div>

CSS

body {
	background-color: #292a2b;
}
.quote-wrapper {
	display: flex;
	height: 100vh;
	padding: 0 20px;
}
.blockquote {
	position: relative;
	font-family: 'Barlow Condensed', sans-serif;
	max-width: 620px;
	margin: 80px auto;
	align-self: center;
}
.blockquote h1 {
	font-family: 'Abril Fatface', cursive;
	position: relative;
	color: #e74848;
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 1;
	margin: 0;
	border: 2px solid #fff;
	border: solid 2px;
	border-radius: 20px;
	padding: 25px;
}
.blockquote h1 span{
	color: #ffffff;
}
.blockquote h1:after {
	content: "";
	position: absolute;
	border: 2px solid #e74848;
	border-radius: 0 50px 0 0;
	width: 60px;
	height: 60px;
	bottom: -62px;
	left: 50px;
	border-bottom: none;
	border-left: none;
	z-index: 3;
}
.blockquote h1:before {
	content: "";
	position: absolute;
	width: 80px;
	border: 6px solid #292a2b;
	bottom: -3px;
	left: 50px;
	z-index: 2;
}
@media all and (min-width: 600px) {
	.blockquote h1 {
		font-size: 3rem;
		line-height: 1.2;
	}
}
.blockquote h4 {
	position: relative;
	color: #ffffff;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	padding-top: 15px;
	z-index: 1;
	margin-left: 150px;
	padding-left: 12px;
}

.blockquote h4:first-letter {
	margin-left: -12px;
}

3 Comments

  1. I’m Telugu blogger I don’t know coding knowledge this article very helpful to my blog design thank you so much

  2. […] This CSS Text Shadow Effects author name is Fielding Johnston. Previous tutorial on how to create CSS Blockquote Style For Web Design. […]

  3. Hmm is anyone else encountering problems with the images on this
    blog loading? I’m trying to figure out if its a problem on my end or if it’s
    the blog. Any feedback would be greatly appreciated.

Leave a Reply