How to style a blockquote with large curly braces around it

0 Views

I am trying to style a block of text so that it is surrounded by a large curly brace on each side (so that each brace takes up the whole height of each side of the element). Here is the HTML: 

<blockquote>
<span class="braceleft">{</span>
<p class="quotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus           Pellentesque at neque lorem, vitae aliquet risus.</p>
<span class="braceright">}</span></blockquote>

I should also mention that I am trying to do this in WordPress, which I know can add unwanted tags. If I could get the right CSS for plain HTML, I can hopefully figure out how to strip the unwanted tags.

Read More

I can easily change the HTML markup if that would make styling easier.

Post Views: 0

Related posts

Leave a Reply

4 comments

  1. Remove the <span> and <p> tags. Edit the opening <blockquote> tag to
    <blockquote class=”addCurlys”>. Use this CSS (play with the font-size for the :before and :after pseudoelements):

    blockquote  {
    font-size:1em;
}
blockquote.addCurlys:before {
    content: "{";
    font-size:10em;
}
blockquote.addCurlys:after {
    content: "}";
    font-size:10em;
}

    Because em is the unit of measurement for the :before and :after pseudoelements, they’re linked to the font-size of their parent – the blockquote itself.

    I think most browsers now support :: for pseudoelements – I still tend to only use one

  2. Keep in mind that you should restrict content to make it fit inside curly brackets.

    You can probably do something like

    <blockquote class="clearfix">
  <div class="curly-left float-left">
    <div class="float-left"> Content here </div>
  <div class="curly-right float-left">
</blockquote>

    Then in the CSS you set the hight / width and background image for curly left and right.
    Float the divs and use clearfix on the blockquote.

    I think that should do it.

    Here’s the code I use for clearfix

    /* Clearfix */
.clearfix:before, .clearfix:after { content: "020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } 

  3. <span class="braceleft" style="float:left; padding: 0 10px">{</span>
<p class="quotation" style="float:left; padding: 0; margin: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus Pellentesque at neque lorem, vitae aliquet risus.</p>
<span class="braceright" style="float:left; padding: 0 10px">}</span>

  4. The way to do it without additional tags would be to use CSS’s :before and :after to create the 2 braces and then style them accordingly.

    Consider this code (or test the fiddle):

    HTML: 

    <blockquote class="addCurlys">I like curly <br> curls <br/><br/> I really do<br/><br/>I really really do</blockquote>

    CSS: 

    BLOCKQUOTE.addCurlys {background: yellow; position: relative; padding: 0.5ex; 1em}
BLOCKQUOTE.addCurlys:before {
    content: ''; border: 1px dotted pink;
    position: absolute; right: 100%; top: 0; bottom: 0; width: 30px; 
    background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100%
}
BLOCKQUOTE.addCurlys:after {
    content: ''; border: 1px dotted pink;
    position: absolute; left: 100%; top: 0; bottom: 0; width: 30px;
    background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100%
}

    Here’s how it works (for the opening brace): :before creates a pseudo-element. We need to add the content attribute otherwise it won’t be rendered ‘properly’. The pink border is only there so you can see where it is.

    The BLOCKQUOTE is given a position: relative attribute so that the before and after blocks can be positioned relative to it. We give :before a position: absolute and give it a top and bottom value of 0 so that it gets aligned with the blockquote’s top and bottom edges. Then we give it a right: 100% so that it gets pushed all the way to the left of the edge (could use left:0 if you want it inside the blockquote, adjust for your tastes). And a width to our liking.

    Finally we add a background (since you wanted the curl to stretch vertically) image and specify that we want it to be sized 100% by 100% of the container (:before, i.e. the opening brace). Feel free to change the kitten images to curly braces, I prefer kittens.

    Adjust for your needs.