View the icons

As you may already know, I’m a big fan of CSS. I have done my fair share of CSS experiments, and I have learnt an incredible amount by doing so. One of the most important things I have learnt is this: it’s not okay to use non-semantic markup for styling. Style is not content, and they are kept separate for a reason. I have seen many experiments in which entire images are made only using HTML and CSS, and I have to ask why? While it is often challenging to complete such experiments, aren’t they teaching others that it is okay to use markup for styling purposes?

With my latest experiment, pure CSS icons, I had two strict guidelines in place:

1. No extra markup just for styling
2. No need for a solid background colour for the icons to work

This made it incredibly difficult to produce high calibre icons, especially as I was working with a single anchor element for each icon. However, it was quite the accomplishment when I was able to do so. The most difficult aspects were creating the triangular shapes (due to my use of borders), and producing certain icons without using a solid background colour.

This experiment, as always, was a lesson. Firstly, pseudo-elements are incredibly powerful, and secondly, if you are using non-semantic markup, then you are probably doing it wrong. My advice to you would be that next time you are undertaking a challenging CSS experiment, introduce some limiting guidelines, you might be surprised with the result.

Note

These icons are just an experiment; they degrade terribly in older browsers. Feel free to poke around the source code, play with, replicate, and learn from them, but I wouldn’t recommend using them on a website. If you want to fork the code on GitHub, you can do so here.

I was recently introduced to the idea of using display: inline-block; instead of floats when positioning elements (thanks Justin). At first it was a bit of a shock to the system; I had always used floats, why should I change? But with time, the idea of no longer using floats for layout started to sound pretty good. For instance, it meant I could forget about using a clearfix hack.

After doing some research—and using inline-block in a few projects—I have become a convert. And I’m hoping I can convince you to consider using it too.

Before I get too far into it, I need to be honest with you: inline-block isn’t a magic fix, but as long as you are aware of its quirks, you can work around them. Also, to clarify: I am not asking you to stop using floats altogether. Floats still have their uses, but it would pay to be more mindful when using them. No more using them willy-nilly!

The float property

Floats were originally used for wrapping text, and as such, they can play up when used to align elements. The most well-known issue is that non floated elements don’t recognise floated children. This is due to floated elements being removed from the normal flow of the document.

Another issue (in regards to layout) is that you can’t centrally float an element; you are limited to left or right floats only. And an even lesser known issue is that elements in the flow of the document will collapse their margins with the elements above and below whereas floated elements will not.

Display: inline-block;

Setting an element’s display to inline-block tells browsers to place that element inline, but to treat it as though it were a block level element. This means that we can use inline-block instead of floats to have a series of elements side by side.

An important thing to take note of when using inline-block is that it takes white space into account. What that means is that any white space in your markup will be rendered in the document. Now most of the time this won’t be an issue, but if you need to eliminate it, doing something like this works:

<ul>
    <li></li><!--
 --><li></li><!--
 --><li></li>
</ul>

An alternate solution is to set the font-size of the parent element to zero, and then set the required font-size on the children.

Another thing that you will need to be aware of is the way that inline-block elements are vertically aligned. I generally use vertical-align: top;, but you have a fair bit of flexibility if required. If you don’t want to declare it more than once then you could use this:

* {
    vertical-align: top;
}

Aligning elements that are inline-block

Alright, on to the important stuff. Aligning elements using inline-block is incredibly simple; all you have to do is use text-align on the parent element. This gives you the ability to align elements centrally, to the left, or to the right. Not only that, but you don’t need to define a width to center an element. You can also align elements to the right without the need to reverse their order in the markup.

Since being introduced to inline-block, I have been questioning how I was able to use floats for so long. I have already encountered situations where inline-block allowed me to position an element in a way that I could not using floats. Not only that, but I no longer have to concern myself with weird browser bugs and clearfix hacks. Sure inline-block renders white space, but that is to be expected; browsers render inline-block elements as though they were characters in a sentence. I would much rather work with behaviour I expect than behaviour I don’t.

Browser support

I’m sure you’re not surprised to hear me say that IE6 and 7 have a few issues with inline-block. That being said, if you do need to support them, you can do so by declaring zoom: 1; *display: inline; (The asterisk targets IE6 and 7). Just make sure that the inline value is listed after display: inline-block.

Addendum

There have been a couple of points brought to my attention that are worth mentioning. Firstly, Christian informed me that IE6 and 7 will correctly render elements that are natively inline as inline-block. And secondly, Justin has made the great suggestion of using an IE conditional style sheet instead of using the *display CSS hack.

Download

I’m a huge fan of Sublime Text 2. Hopefully you are too, and if you haven’t heard of it, then I highly recommend checking it out. It is currently in public beta, and awesome features are being added regularly.

I have spent some time putting together a set of CSS snippets for Sublime Text, and thought I might share them. I have gone through and made them as simple as possible to use. The majority of the snippets are triggered by typing the first three letters of a property, and then hitting tab. Some snippets are a little more advanced, with tab locations saved into them, but I’ll let you play with them for yourself rather than go into any more detail.

The snippets can be downloaded here. Copy the folder into Sublime Text packages folder. On a Mac this can be found in Library > Application Support > Sublime Text 2 > Packages. For Windows, it can be found in C: > Users > {username} > AppData > Roaming > Sublime Text 2 > Packages.

Here is a video showing the power of these snippets, and here is an overview of what is included. Also, here is the GitHub repository.

I am a big fan of halftone patterns. I love that you can use a solid colour to give the impression of shading, or even a gradient.

Most of my design work is done in Illustrator, and I have spent many hours working out the best way to create halftone patterns. To save you the time, I will walk you through the technique that gives me the best results.

For this quick tutorial, I will replicate the halftone pattern shown on this sword:

Once you have your basic shape, remove the border, and then fill it with a white to black gradient. You will have to play around with the angle to get it just right. Keep in mind that the circles will decrease in size from black to white.

Now it’s time to apply the ‘Color Halftone’ effect. This can be found in the ‘Effect’ menu, under ‘Pixelate’. Make sure that all the channels are set to 0 degrees, and then play around with the maximum radius until you get a halftone pattern that isn’t too small or large. Something like this:

The next step is to expand the result; we want to get rid of the white, and turn it into a vector. Select ‘Expand Appearance’ from the ‘Object’ menu. Then, from the context menu, hit the drop down arrow next to ‘Live Trace’ and select ‘Tracing Options’. You want to change ‘Path Fitting’, ‘Minimum Area’, and ‘Corner Angle’ all to 1. Also, make sure that ‘Ignore White’ is checked. I have this saved as a preset for ease of use:

Finally, hit the ‘Expand’ button on the context menu. You are left with just the halftone vector, which you can then do with as you like. I generally change the color and opacity to suit the current design, but I’m sure you can be more creative than that!

Firstly, if you aren’t sure what I am talking about, I would recommend having a read of this article by Chris Coyier.

Alright, now to the formula that I use to make sure that I get my nested border radii just right: x = z — y, where x is the inner border radius, z is the outer border radius, and y is the space between the two elements (as shown above). Keep in mind that for this formula to work, both pseudo circles formed by the border radii need to have the same centre point.

Now, unlike most mathematical formulas, this one isn’t always right. You may encounter the odd situation where the result doesn’t look quite right, so keep in mind that this is only a guide; you may need to eyeball it to get it perfect.

Here are a few examples of the formula in action (as you can see, the top right has been adjusted slightly):

A tool for the job

I have put together this little tool to help you guys out. If you have any improvements, you can fork the code here.

A while back I explained how to make a speech bubble using CSS. But what about if instead of giving the speech bubble a drop shadow, we wanted to give it a border?

Normally this wouldn’t be too difficult, but due to the shape of a speech bubble—a rectangle with a triangle underneath it—it becomes more difficult. We can easily give the rectangle a border, but considering the technique used to create the triangle, also giving that a border isn’t possible.

Luckily, we have a spare pseudo-element, and by duplicating our triangle, increasing its size, and sitting it behind our original, we can give the appearance of a seamless border: http://jsfiddle.net/joshnh/26Lww/

A few months ago I installed Instagram on my iPhone and it has quickly become one of my most used apps. If you haven’t already checked it out, and you own an iPhone, then I would highly recommend doing so.

Instagram has refuelled my passion for photography, not only allowing me to take stunning photos with my phone, but also allowing me to share them easily with my friends. Now instead of talking about Instagram itself, I would like to share with you the apps I use to compliment it:

• Camera+
• ColorSplash
• Diptic
• Dynamic Light
• Halftone
• Photo Fixer
• Photoshop Express
• Slow Shutter Cam
• Tiny Planets

Camera+

The first, and most important, is the camera app itself. I don’t use the native Apple camera app, instead opting for Camera+. This app is incredibly powerful, giving you much more control than the inbuilt camera app.

Not only does Camera+ have inbuilt filters, it also allows you to crop, rotate, add borders, and add captions to your photos before exporting them out to your gallery. But my favourite feature is the ease in which I can manually set the exposure.

ColorSplash

Ever wanted to highlight one particular item in a photo? Well then ColorSplash is what you are looking for. This is a very handy app that makes it easy to ‘finger paint’ the color back into a greyscale photo.

Although it is not my most used photography app, it is one that can add a little piece of magic to a photo, more so than any other app I have found.

Diptic

I quite like combining multiple photos into a framed image, and the best app I have found to do that is Diptic. You can choose one of 23 default templates and then customize each layout to really make it your own. You can also edit imported images with basic transforms and effects before finalizing the border and exporting the result.

Dynamic Light

Dynamic Light is an incredibly powerful app designed to give your photos a HDR effect. With an easy to use interface, it allows users to control the level of the ‘dynamic light’ effect while also providing a set of ready to use filters. This is a great app for bringing some life back into a dull photo. Keep an eye out for the ‘comic’ effect, it is a personal favourite of mine.

Halftone

Speaking of a comic effect, this is exactly what Halftone is designed to do.

Halftone is unlike any of the other apps that I have mentioned so far, as it is meant entirely for fun. It allows you to tell more of a story than a typical photo can, allowing you to insert captions, speech bubbles, and comic book inspired symbols. While this app isn’t a necessity, I highly recommend it.

Photo Fixer

Adam Uccello has created a few photography based iPhone apps, the best of which is Photo Fixer. Put simply, Photo Fixer allows you to remove unwanted objects from your photos, and the result is very surprising. You are able to ‘paint’ over the object you want removed with your finger, and then algorithms are used to remove the unwanted item. And if you aren’t quite happy with the result, then just hit the ‘erase’ button again, the outcome is slightly different each time.

Photoshop Express

Photoshop Express is a must have app for iPhone photography enthusiasts. It allows you to make fine adjustments such as straightening a photo or tweaking contrast and exposure. It also comes with some great effects and borders that are ready to use. Photoshop Express is a one-stop-shop for all your editing needs.

Slow Shutter Cam

The name of this app is pretty self explanatory. Slow Shutter Cam allows you to take photos with various slow shutter speed effects. You are able to choose between automatic, manual, and light trail (light painting) modes and can also set up a self timer to ensure that the camera will be as stable as possible when taking the photo.

Tiny Planets

Last but not least is Tiny Planets. It is the latest addition to my photography app collection, and has quickly become my favourite.

Tiny Planets takes an image that you already have on your iPhone and applies what is known as a polar coordinates filter effect to it. This turns your regular image into a globe, or a ‘tiny planet’. It is an incredibly unique effect, and a lot of fun to play around with.

What we will be making:

Demo

I have slowly noticed more and more sites using pop from the top style notifications. They can be very effective if used correctly. Today I am going to run through the creation of such an alert bar using only CSS; no images and no JavaScript. To make things even more interesting, the bar will persist until clicked.

I won’t be using browser prefixes in this tutorial, make sure that you do. If you need help determining which prefixes to use for what properties then check out this handy site: When can I use…

Before you read on click here to load jsFiddle in a new tab.

The Plan:

1. Markup
2. Form
3. Animation
4. Behaviour
5. Instruction
6. Design

Want to see the finished code? Click here.

Step 1: Markup

The markup is pretty straightforward: an anchor wrapped in a div. We will be doing a neat little trick with the anchor and div later on.

<div id="alert">
    <a class="alert" href="#alert">This is a slide down alert!</a>
</div>

Step 2: Form

Now let’s give the alert some basic form. To do that we need to consider what it is we want:

• 100% width
• Centered text
• Attached to the top of the viewport
• Above all other content
• Bright color

The following CSS produces an alert that matches our requirements nicely:

.alert {
    background-color: #c4453c;
    color: #f6f6f6;
    display: block;
    font: bold 16px/40px sans-serif;
    height: 40px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: -45px;
    width: 100%;
}

Those with a keen eye may have noticed that I used top: -45px; instead of top: 0;. This is in preparation for the next step…

Step 3: Animation

By default, the alert is hidden off the top of the screen, we are going to use an animation to slide it down. That way, browsers that don’t support animations (and probably some of the other advanced techniques we will be using) won’t see the alert at all. Here is a simple entrance animation for our notification:

@keyframes alert {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { top: 0; }
}

Now all we need to do is run the animation on the anchor.

.alert {
    animation: alert 1s ease forwards;
}

Step 4: Behaviour

Now we have our alert showing, but wouldn’t it be great if there was a way to get rid of it when we had finished reading it? That’s where our wrapper div comes in. We are going to use the :target pseudo-class to style the wrapper when it becomes the target (the URL’s hash is the value of its ID). If you are unsure what I am talking about look back at the markup, see that the ‘href‘ matches the ID of the wrapper div?

Here is the relevant CSS:

#alert:target {
    display: none;
}

Step 5: Instruction

Great, now we can close the alert. There is a slight problem though; how will users know that clicking closes the alert? Well let’s add a tooltip to inform them!

We can use pseudo-elements to avoid extra markup. We will use both the :before and :after pseudo-elements, one for the body of the tooltip, and one for the arrow.

#alert {
    position: relative;
}
#alert:hover:after {
    background: hsla(0,0%,0%,.8);
    border-radius: 3px;
    color: #f6f6f6;
    content: 'Click to dismiss';
    font: bold 12px/30px sans-serif;
    height: 30px;
    left: 50%;
    margin-left: -60px;
    position: absolute;
    text-align: center;
    top: 50px;
    width: 120px;
}
#alert:hover:before {
    border-bottom: 10px solid hsla(0,0%,0%,.8);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: '';
    height: 0;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    top: 40px;
    width: 0;
}

Notice that I have used pseudo-elements with the :hover pseudo-class. This is fine to do as long as you order it as I have (pseudo-class before pseudo-element).

Step 6: Design

We now have ourselves a beautifully working alert. It looks a bit plain though. How about using a linear gradient to give an effect similar to warning tape?

.alert {
    background-image: linear-gradient(135deg, transparent,
                      transparent 25%, hsla(0,0%,0%,.1) 25%,
                      hsla(0,0%,0%,.1) 50%, transparent 50%,
                      transparent 75%, hsla(0,0%,0%,.1) 75%,
                      hsla(0,0%,0%,.1));
    background-size: 20px 20px;
}

Finally, we can add a subtle border to the bottom to help separate the alert from the content below it. To do this I am going to use a simple box-shadow:

.alert {
    box-shadow: 0 5px 0 hsla(0,0%,0%,.1);
}

And that is it! Pretty simple wasn’t it?

Final Product:

<!-- HTML: -->

<div id="alert">
    <a class="alert" href="#alert">This is a slide down alert!</a>
</div>

/* CSS: */

#alert {
    position: relative;
}
#alert:hover:after {
    background: hsla(0,0%,0%,.8);
    border-radius: 3px;
    color: #f6f6f6;
    content: 'Click to dismiss';
    font: bold 12px/30px sans-serif;
    height: 30px;
    left: 50%;
    margin-left: -60px;
    position: absolute;
    text-align: center;
    top: 50px;
    width: 120px;
}
#alert:hover:before {
    border-bottom: 10px solid hsla(0,0%,0%,.8);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: '';
    height: 0;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    top: 40px;
    width: 0;
}
#alert:target {
    display: none;
}
.alert {
    animation: alert 1s ease forwards;
    background-color: #c4453c;
    background-image: linear-gradient(135deg, transparent,
                      transparent 25%, hsla(0,0%,0%,.1) 25%,
                      hsla(0,0%,0%,.1) 50%, transparent 50%,
                      transparent 75%, hsla(0,0%,0%,.1) 75%,
                      hsla(0,0%,0%,.1));
    background-size: 20px 20px;
    box-shadow: 0 5px 0 hsla(0,0%,0%,.1);
    color: #f6f6f6;
    display: block;
    font: bold 16px/40px sans-serif;
    height: 40px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: -45px;
    width: 100%;
}

@keyframes alert {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { top: 0; }
}

I have attempted to keep this tutorial as short as possible so if you would like me to go into any more detail just let me know.

This arti­cle was orig­i­nally writ­ten for Forrst.

CSS animations are becoming quite popular thanks to things like Animate.css and Animatable. I have been using them quite a bit recently and decided to compile a list of tips for those that haven’t spent that much time with them. Here are the things I will be discussing:

1. Using multiple animations.
2. Running sequential animations.
3. Using animation-fill-mode on delayed animations.
4. Stopping your animations from flickering.
5. Controlling the play state of your animations.

For those that aren’t familiar with the animation syntax please check out Chris Coyier’s neat write up.

Keep in mind that for now all browser prefixes will need to be used (webkit, moz, ms and o).

Use multiple animations

This one is pretty straightforward: you may list several animations and have them all run together. You would do so like this:

animation: fadeIn 1s ease-in,
           rotate 2s linear 2 alternate;

Details on the animation shorthand property can be found here.

Run sequential animations

But what if you didn’t want both of the above animations to start at the same time? What if you wanted the first animation to complete before the second began? This is achievable by setting a delay on the second animation equal to the duration of the first animation:

animation: fadeIn 1s ease-in,
           rotate 2s linear 1s 2 alternate;

Use animation-fill-mode on delayed animations

This one is a little trickier to explain but let’s say that you had the following:

div {
    animation: fadeIn 1s ease-in,
               rotate 2s linear 1s 2 alternate;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes rotate {
    0% { -webkit-transform: rotate(45deg); }
    100% { -webkit-transform: rotate(0deg); }
}

That code won’t work as well as you might think (see here): the first animation will run, and then, as the second animation starts, the div will instantly rotate 45 degrees. You can combat this by using the animation-fill-mode property.

div {
   animation: fadeIn 1s ease-in,
              rotate 2s linear 1s 2 alternate both;
}

Basically, defining a fill-mode will display the animation’s first/last keyframe before/after the animation runs. More information can be found here.

Stop your animations from flickering

This is a nifty little trick I found while troubleshooting a problem. Here is the write up.

Control the play state of your animations

I haven’t actually found a use for this last tip yet but I’m hoping I will shortly. Put simply, the animation-play-state defines whether an animation is running or paused. As far as I am aware, you cannot include this property in the animation shorthand. Here is an example of how it works.

This arti­cle was orig­i­nally writ­ten for Forrst.

What we will be making:

Demo

CSS speech bubbles aren’t new, but they are often flat and ugly. Below I will share some techniques to improve upon the design and add a seamless drop shadow. It is possible that you are familiar with many or all of the techniques used, if that is the case I would love for you to share an example of when you have had to use some outside of the box CSS. Before you read on click here to load jsFiddle in a new tab.

The Plan:

1. Write the markup
2. Basic styling
3. Improve the design of the bubble
4. Add an arrow
5. Give it a shadow

Want to see the finished code? Click here.

Step 1: Write the Markup

The markup for this is very simple. We are going to wrap our text in a span with a class of bubble.

<span class="bubble">Speech bubble with a shadow</span>

Step 2: Basic styling

Now let’s get the basic styling out of the way. This will include choosing a background color for the bubble, giving it some font styling and also some padding. I like to order the properties alphabetically.

.bubble {
    background-color: #fff0a0;
    color: #333;
    display: inline-block;
    font: 16px/25px sans-serif;
    padding: 15px 25px;
}

I have also set the display to inline-block so that the bubble doesn’t break if the window is too narrow.

Step 3: Improve the design of the bubble

Now that our bubble has some basic form we need to give it a design to make it stand out. Let’s give it a slight gradient, we can do that with the following code:

background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));

If you look carefully at the code above you will notice that only white is being used, with the transparency fading out from 0.5 to 0. This enables us to keep our code easy to edit; if you want to change the color of the bubble you only have to alter a single value. Now that our button has some depth lets add a 1px highlight to the top. We can do this using an inset box-shadow.

box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5);

Let’s also give the text a slight shadow, by using white we can give the illusion of letterpress.

text-shadow: 0 1px 1px hsla(0,0%,100%,.5);

Lastly, how about giving the bubble some rounded corners, it is a bubble after all!

border-radius: 5px;

Step 4: Add an arrow

We are going to use a pseudo-element to add our arrow to the bottom right of our bubble. Internet Explorer 7 doesn’t support pseudo-elements but luckily it degrades gracefully. Before we start styling our arrow we are going to add the following line to our bubble class:

position: relative;

This allows us to use absolute positioning to position the arrow relative to the bubble. We will use the :after pseudo-element for our arrow. If you aren’t familiar with pseudo-elements and would like to learn some more I would recommend reading this article. We are also going to produce a triangle using borders, more information on that can be found here. Finally, we will use absolute positioning to place the arrow appropriately.

.bubble:after {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: -25px;
    content: '';
    position:
    absolute;
    right: 25px;
}

Step 5: Give it a shadow

Giving the bubble a drop shadow is quite easy, we simply add it to the box-shadow property that is already declared:

box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
            3px 3px 0 hsla(0,0%,0%,.1);

Giving the arrow the same shadow is not as easy though. Luckily we have a second pseudo-element to work with, let’s use that. Most of the rules we will be declaring for the arrow’s shadow will match that of the arrow itself so rather than rewriting the rules let’s group the selectors.

.bubble:after,
.bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: -25px;
    content: '';
    position: absolute;
    right: 25px;
}

Now we simply rewrite the rules that will be different. We will need to change the color to match that of the shadow, and also adjust the positioning. This is the last bit of styling we need:

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
}

Final Product:

<!-- HTML: -->

<span class="bubble">Speech bubble with a shadow</span>

/* CSS: */

.bubble {
    background-color: #fff0a0;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    border-radius: 5px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
                3px 3px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    font: 16px/25px sans-serif;
    padding: 15px 25px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.bubble:after,
.bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0a0;
    bottom: -25px;
    content: '';
    position: absolute;
    right: 25px;
}
.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
}

Now it’s time to experiment with what you have learnt!

This arti­cle was orig­i­nally writ­ten for Forrst.