Advertisement
News

Fun With CSS Shapes

by

I bet a bunch of you don't realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week's screencast, we'll figure out a way to create speech-bubbles without resorting to background images.

Most of us, by now, are familiar with using the "-moz-border-radius" and "-webkit-border-radius" properties to create rounded corners - or even complete circles - but there are other techniques to create more complicated shapes.

Traditional Speech-Bubble

css shapes
blockquote#one {
 width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}

#one .arrow {
 width: 0; 
 height: 0;
 line-height: 0;
 border-top: 30px solid #e3e3e3;
 border-left: 60px solid white;
 border-right: 10px solid white;
 position: absolute;
 bottom: -30px;
 right: 30px;
}

Note how the "bottom" property is the reciprocal of the "border-top" property.

Alternate

css shapes
blockquote#two {
 width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}

blockquote#two .arrow {
 width: 0;
height: 0;
line-height: 0;
border-top: 40px solid #e3e3e3;
border-left: none;
border-right: 30px solid white;
position: absolute;
bottom: 60%;
right: -30px;
}

Yet Another

css shapes
blockquote#three {
 width: 450px;
 background: #e3e3e3;
 padding: 25px;
 position: relative;
}

#three .arrow {
 width: 0;
 height: 0;
 line-height: 0;
 border-bottom: 25px solid #e3e3e3;
 border-right: 50px solid white;
 position: absolute;
 top: -24px;
 left: 20px;
}
css shapes

Interesting Note

I'm typing this paragraph minutes before posting the tutorial. I learned something tonight. Did you know that, if you want your document to validate, you can't place text directly into a blockquote? It needs to be nested within a parent element - like the <p> tag. Additionally, the validator didn't like the fact that I used a span tag within the blockquote. It allows for a plethora of elements, but unfortunately not the span! Oh well; no big deal. Just replace it with a different element. It hardly makes a difference.

Span tag within a blockquote

Pretty Nifty

I'm really eager to see how you guys have implemented this unique trick into your own projects. Send us links to your examples, via the comments. Thanks for watching. Next week, plan on learning something much more advanced. ...I just need to figure out what! Until then.


Related Posts
  • Web Design
    HTML & CSS
    Quick Tip: Solving the Equal Height Column ConundrumFloat columns
    There's one familiar problem in web design which has been around ever since we moved from the days of table-based design into the CSS era, and that is: "How can I have 100% height backgrounds in my flexible multi-column layout?". Today, we'll look at some solutions.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Web Design
    CMS
    Uber Aesthetics and ResponsivenessGhost rwd retina
    Welcome to the final part of our Ghost theme design tutorial series! In the previous two parts of this series we worked on the first half of styling our theme and laid the groundwork for responsive behavior. This fifth and final part finalizes our styling and completes the task of making our theme fully responsive.Read More…