Next

Rounded corners pull-quote using CSS

Next

Rounded corners pull-quote using CSS

Note: Creating the illusion of round corners

Next

Rounded corners pull-quote using CSS

Step 1. Setting up the HTML code

<div id="pullquote">
<h2>Heading here</h2>
<p>
Lorem ipsum dolor sit amet....
</p>
<p class="more">
<a href="#">More information</a>
</p>
</div>

Exercise 5 - example 1

Next

Rounded corners pull-quote using CSS

Step 2. Setting up the selectors

div#pullquote {...}
div#pullquote h2 {...}
div#pullquote p {...}
div#pullquote p.more {...}
div#pullquote p.more a {...}

Next

Rounded corners pull-quote using CSS

Step 3. Styling the <div> element

div#pullquote
{
margin: 2em;
background: #09f url(lesson17a.gif) no-repeat;
}

Exercise 5 - example 2

Next

Rounded corners pull-quote using CSS

Step 4. Styling the <h2> element

div#pullquote h2
{
margin: 0;
padding: 20px 20px 0 20px;
background: url(lesson17b.gif) no-repeat 100% 0;
}

Exercise 5 - example 3

Next

Rounded corners pull-quote using CSS

Step 5. Styling the <p> element

div#pullquote p
{
padding: 0 20px;
}

Exercise 5 - example 4

Next

Rounded corners pull-quote using CSS

Step 6. Styling the .more class

div#pullquote p.more
{
padding: 0 0 0 20px;
background: url(lesson17c.gif) no-repeat 0 100%;
}

Exercise 5 - example 5

Next

Rounded corners pull-quote using CSS

Step 7. Styling the <a> element

div#pullquote p.more a
{
display: block;
padding: 0 20px 20px 0;
text-align: right;
background: url(lesson17d.gif) no-repeat 100% 100%;
}

Exercise 5 - example 6

Start

Rounded corners pull-quote using CSS

The final result

div#pullquote
{
margin: 2em;
background: #09f url(lesson17a.gif) no-repeat;
}

div#pullquote h2
{
margin: 0;
padding: 20px 20px 0 20px;
background: url(lesson17b.gif) no-repeat 100% 0;
}

div#pullquote p
{
padding: 0 20px;
}

div#pullquote p.more
{
padding: 0 0 0 20px;
background: url(lesson17c.gif) no-repeat 0 100%;
}

div#pullquote p.more a
{
display: block;
padding: 0 20px 20px 0;
text-align: right;
background: url(lesson17d.gif) no-repeat 100% 100%;
}

Exercise 5 - finished