Photoshop Question posted in
The official user guide can be found here.

How to create this quote box with (preferably) HTML5/CSS3? – Photoshop

I want to add the quote box below (created in Photoshop) on my website but would love for it to be created “dynamically” with preferably HTML5/CSS3 (+ jQuery if not possible with HTML/CSS alone). Using images for the quotes is also possible, but would prefer none for the best responsive solution. Width can be fixed but height should adjust to contents within the box.

Googled and searched SO for a solution but couldn’t find one.

But! .. found some html blockquote element CSS (see below and [jsbin here][1]) that does everything but the lines, but don’t have the skills to get them “drawn” myself, so will appreciate if someone will help. Thanks!

quote box

Update

Getting close now!

See here: http://jsbin.com/giwafo/1/ (locked, clone to make changes)

The idea is to position a box that has the background color on top of the border on the <blockquote> element, but I can’t seem to figure out how to do this so it adapts to the size of the quote/blockquote and is position correctly no matter what size the blockquote is.

Any ideas?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @Jasper (see comments under my question above), I resolved it. Solution can be found here: jsbin.com/ziquzi/2.

    CSS:

    .container {
  z-index: 1;
  background: white;
  padding: 2em;
}
blockquote {
  padding: 2em 1.5em 2em 2em;
  position: relative;
  color: #999;
}
blockquote p {
  color: #555;
}
@media screen and (min-width: 300px) {
  blockquote {
    border: 1px solid gray;    
  }
  blockquote:before, blockquote:after {
    background-color: white;
    font-size: 3em;
    font-weight: 800;
    position: absolute;
    height: 20px;
    z-index: 10;
  }
  blockquote:before {
    content:"201D";
    padding: 0 12px 11px 0;
    left: -8px;
    top: -8px;
  }
  blockquote:after {
    content:"201C";
    padding: 9px 0 0 11px;
    right: -8px;
    bottom: -7px;
  }
}
blockquote cite {
  font-size: 14px;
  margin-top: 5px;
}
blockquote cite:before {
  content:"2014 2009";
}

    HTML:

    <!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>

<div class="container">
  <blockquote>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <footer>
      <cite>Somebody famous</cite>
    </footer>
  </blockquote>
</div>
</body>
</html>

  2. 0 
    .container {
	z-index: 1;
	background: white;
	padding: 2em;
}
blockquote {
	padding: 2em 1.5em 2em 2em;
	position: relative;
	color: #999;
}
blockquote p {
	color: #555;
}
@media screen and (min-width: 300px) {
 blockquote {
 border: 1px solid gray;
}
 blockquote:before, blockquote:after {
 background-color:white;
 font-size: 3em;
 font-weight: 800;
 position: absolute;
 z-index: 20;
}
 blockquote:before {
 content:url('http://download.easyicon.net/png/534874/32/');
 width: 34px;
 height: 31px;
 left: 2px;
 top: 2px;
 -ms-transform: rotate(178deg); /* IE 9 */
 -webkit-transform: rotate(178deg); /* Chrome, Safari, Opera */
 transform: rotate(178deg);
}
 blockquote:after {
 content:url('http://download.easyicon.net/png/534874/32/');
 width: 31px;
 height: 37px;
 right: 3px;
 bottom: 0px;
}
}
blockquote cite {
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: -7px;
}
blockquote cite:before {
	content:"2014 2009";
}
    <div class="container">
  <blockquote>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <footer> <cite>Somebody famous</cite> </footer>
  </blockquote>
</div>

    hope it can help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search