The possibilities of CSS is constantly evolving allowing us to do much more creative ideas than previously possible. We are going to take a look at 5 different CSS techniques that'll add a modern touch to your website.

CSS Arrows, Bubbles and Triangles

CSS triangles are fairly easy to achieve. We'll need to implement the :before or :after pseudo-classes and assign them a certain border size to attach a triangle, arrow or bubble onto another element. If you just want a standalone triangle, you can create its own class.

Creating a Standalone Triangle

To get a triangle pointing up, you'd have:

.triangleTop {
width: 0;
height: 0;
border-style: solid;
border-width: 0 11px 10px 11px;
border-color: transparent transparent #007bff transparent;

We create a box with zero width and height so that the size of the triangle itself is defined by the width of the border we set. In an up arrow, the bottom border is coloured while the left and right are transparent. In a bottom arrow, the top border is coloured whilst the left and right are transparent.

We control the width using the left and right sizes. In our instance, 11px each meaning a 22px width altogether. The height is from the 10px. This creates a scalene or isosceles triangle. 

To create an equilateral triangle, you need to set the height to 86.6% of the total width. That is: (border-left-width + border-right-width) * 0.866% = border-bottom-width

In our example above this would produce:

.triangleTop {
    // ....
    border-width: 0 11px 19.1px 11px;
Creating an Arrow / Bubble

To attach a triangle onto a parent element, we have to change our CSS slightly. Lets create a simple container:

.bubble {
    background: #FFF;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
    position: relative;

Now, we need to create two triangles, one that is the background colour and then the second which is the border colour and 1px larger.

.bubble:before {
    // Makes top / bottom filled
    border: solid transparent;
    // We have to set this, to force it to show
    content: " ";
    height: 0;
    width: 0;
    // Position it, ours will be at the very bottom
    top: 100%;
    left: 50%;
    position: absolute;
    pointer-events: none;

Lets start by creating the inner layer which will be filled a solid #FFF:

.bubble:after {
    border-color: transparent;
    border-top-color: #FFF;
    // Left margin ensures it is in the centre
    border-width: 22px;
    margin-left: -22px;

Now we want to create a border surrounding that:

.bubble:before {
    border-color: transparent;
    border-top-color: #DDD;
    // Must be one pixel bigger
    border-width: 23px;
    margin-left: -23px;

Support for CSS generated content on pseudo-elements is supported by all major browsers.

Rounded Images using CSS 'border-radius'

Giving your images rounded edges is a simple CSS trick but can really add a unique edge onto the images you want to stand out. Let's create a class that rounds our images:

img.rounded {
    border-radius: 50%;
    border: 4px solid #FFF;
    // In Compass css3
    @include border-radius(50%);

If your element has a background colour or some solid fill, you'll need to apply the same radius to it. If you want to round a single corner, you can:

img.roundTop {
    border-radius: 5px 5px 0 0;

The 'border-radius' property is supported on all browsers except 'Opera Mini' (Tested against IE10, IE11, Chrome 35, Firefox 29, Safari 7, Opera 21).

CSS Shapes

Creating shapes in CSS isn't that common, but it is do-able. You need to work with the :before, :after and setting different borders on each. A complete list of what is currently possible can be found here.

For example, here is the heart CSS:

#heart {
    position: relative;
    width: 100px;
    height: 90px;
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;

CSS Fade Animations and Transitions

Creating a fade effect using only CSS can be achieved in multiple ways, but we are going to look at fading in a block of content using the opacity option.

Initially, we want to create a block with a zero height and an opacity of 0.

.fade {
    opacity: 0;
    height: 0;
    transition: all 250ms ease-in-out;
.fade:hover {
    height: auto;
    opacity: 1;

CSS transitions give you a large amount of flexibility into the effect you want to run. If you want to change the background when hovered, just change the transition to:

.fadeBg {
    background: #eee;
    transition: background .5s ease-in;
.fadeBg:hover {
    background: #333;

The 'transition' property is currently supported on all browsers except 'Opera Mini' (Tested against IE10, IE11, Chrome 35, Firefox 29, Safari 7, Opera 21).

CSS Filter Animations

CSS3 introduced a mini series of effects that allowed browsers to manipulate blocks by their contrast, hue, saturation, grayscale, etc.

To turn an image grayscale you use:

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(#greyscale);
    filter: gray;
    transition: 1s;
.grayscale:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    filter: none;

For older non-compliant browsers, you'll need to add an SVG below your image. This acts as an additional layer which re-creates the filter the browser doesn't support:

<svg version="1.1" xmlns="">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />

To add a 'Sepia' effect, you can use:

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
    filter: url(#sepia);
    background-color: #5E2612;
    filter: alpha(opacity = 50);
    transition: 1s;
.sepia:hover {
    -webkit-filter: sepia(0);
    filter: sepia(0);
    filter: alpha(opacity = 100);
    filter: none;

Again, there's no sepia filter for IE, so we need to use an SVG:

<svg version="1.1" xmlns="">
<filter id="sepia">
<feColorMatrix values="0.14 0.45 0.05 0 0
0.12 0.39 0.04 0 0
0.08 0.28 0.03 0 0
0 0 0 1 0" />

Finally, we can create a blurred effect to our images using:

.blur { 
    -webkit-filter: blur(3px); 
    -moz-filter: blur(3px); 
    -o-filter: blur(3px); 
    -ms-filter: blur(3px); 
    filter: blur(3px);
    filter: url(#blur);
.blur:hover {
filter: none; 
    -webkit-filter: blur(0px); 
    -moz-filter: blur(0px); 
    -ms-filter: blur(0px);

To add support for current versions of Firefox, you'll need the following SVG:

<svg version="1.1" xmlns="">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />

Using CSS filter effects is currently supported by Chrome 35, Safari 7 and Opera 21. IE and Firefox currently rely on the SVG method. SVG filters are supported in all browsers (IE10 upwards only).

Make your Instagram beautiful. Preview your images before you post them ›