Tomomi Imura

Tomomi Imura

An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer.

Twitter LinkedIn Github Flickr

Making Chupa-Chups using CSS3 Pseudo-elements

One of the biggest reasons why I don’t blog often is probably because I tweet a lot. Just write a few words and throw some jsfiddle or Dabblet URLs in 140 chars, and boom, I can reach sizable numbers of people. It was quick and easy for me when I had busy days…

Well, now, I have lost my job at Hewlett-Packard (as they ditched Palm hardware then dumped the webOS software as open-source, they no longer need me and my hard-working teammates), so I should no longer excuse for not writing. So here I am, I decide to write up about CSS3 shapes from the fiddles I have written recently:

Shapes with CSS3 Part.1 – Heart

CSS3 Valentine's heart-shaped chocolate

Heart-shaped chocolate live demo: http://codepen.io/girliemac/pen/xkiDz

This Valentine's Day demo (I really did make this on Feb.14!) shows how to create a heart shape.
Basic idea behind is that creating two rectangles with round-corners on top-left and top-right, and rotate each object in either positive or negative 45 degrees. The trick of making two objects in one HTML element is using pseudo-elements, ::before and ::after.
This code snipet shows how to create a simple heart-shape:

.heart {
    position: relative;
}
.heart::before,
.heart::after {
    content: "";
    position: absolute;
    top: 0;
    background-color: red;
    width: 150px;
    height: 240px;
    border-radius: 75px 75px 0 0;
}
.heart::before {
    left: 0px;
    transform: rotate(-45deg);
    background-color: red;
}
.heart::after {
    left: 64px;
    transform: rotate(45deg);
}

In this example, I omit the vender prefix, but you do need to include them, for example, -webkit-transform to be able to make this code work on the current browsers.

Shapes with CSS3 Part.2 – Flower

css3 Chupa Chups

Chupa-Chupsy live demo: http://codepen.io/girliemac/pen/gnfwd

This Chupa-Chups, or I’d call it Chupa-Chupsy candy, since I cannot replicate the actual design of the candy wrapper accurately. (Oh, by the way, did you know the logo was created by the surreal artist, Salvador DalĂ­? Seriously.)

So I tried to mimic the signature yellow flower-shape, with one HTML element using the pseudo-element. This shape is made with a combination of two rounded-corner squares. One of the square is rotated to 45 degrees.
This is how to create the basic flower-shape:

.flower-shape {
    position: relative;
}
.flower-shape,  
.flower-shape::before {
    width: 200px;       
    height: 200px;
    border-radius: 25%;
    background: yellow;
}
.flower-shape::before {
    content: "";
    position: absolute;
    transform: rotate(45deg);
}

In this example, I used only ::before pseudo-element, instead of both before and after. Although I used both for the heart-shape example (which is made with two rectangles), technically, you can include three objects into one HTML element by inserting each object before and after the object on the element.

So if you’d like to have a flower with 12 petals, you can define .flower-shape::after, which is rotated in 30deg. Make sure to make the .flower-shape::before in -30deg.

To mimic the candy logo, I used the most similar web-font I found on Google Web Font. Once you see the real Chupa-Chups logo, you’ll see this web-font is actually nothing resembling it. But, hey.

Shapes with CSS3 Part.3 – Speech Bubble

Klout flag

Klout Score Flag demo: http://jsfiddle.net/girlie_mac/2uk6U/

This is a no-image replica of the Klout score flag! Creating this speech-bubble style shape used the same technique using ::after pseudo-element.
The method of making the triangle shape is the good’ol CSS2 border shading trick using border-width and border-color. Giving think borders around a box with zero width and height. The triangle size is determined by the border-width, with the given color on the one side and transparent on the rest of the sides. You can read more about how to create a triangle on CSS-Tricks.

The basic shape can be coded like this:

.speech {
    background-color: orange;
    width: 200px;
    height: 160px;
    border-radius: 10px;
    position: relative;
}
.speech:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent;
    border-right: 58px solid orange;
    position: absolute;
    right: 0;
}


comments powered by