Style External Links Differently

When you are writing content on your website there will be times when you want to refer to other content on the internet, this can be to either your own articles or to external sources for other peopl...

CSS Loading Spinners

We all know that CSS3 brings a lot of features which allows you to do a lot of cool stuff that we used to need Javascript for. One of the features that we're going to look at today is creating loading...

Create A Typing Effect In CSS

I recently found this jQuery plugin that allowed you to easily create a typing effect on your website. This plugin is an open source plugin available on Github called typed.js. In this post I will sho...

Restart CSS Animation

Since CSS3 we have been able to add CSS animation to our elements, these are relatively easy to setup. An example of a simple CSS animation example is to fade in an element. .fadein_element { opa...

Create A Clock In CSS

In this tutorial we are going to walk through the process of creating a ticking clock in CSS, using CSS3 features animation and transform. The animation will start when you load the page, the animatio...

Customising The Textarea Element

When you add a textarea to your webpage it will allow the webpage visitor access to resize the textarea to any size they want horizontal and vertical. In chrome you are only able to resize the textare...

Maintain Last Keyframe Of CSS Animation

When using CSS animation you can set the keyframes of activities you want the animation to do. For example if you want an element to fade-in you would change the opacity of the element from 0 to 1.

Create A Animated Download Icon In CSS

When you place a call to action on a webpage you normally want the visitors to down something like sign up to your newsletter or download some of your content. All call to actions you should try to st...

How To Create Flat Checkboxes

With the trend of flat design I've decided to extend a previous tutorial of How To Style A Checkbox With CSS with two extra code snippets of styling checkboxes with a flat design. The first checkbox w...

Create A Twitter Profile Card With API V1.1

When Twitter announced that they will shutting down the API V1 people have been switching over their applications to use the new API. All calls to the API have now been changed to be authenticated, wh...

Create An Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes, and when the mouse hovers over a bo...

Center Elements With CSS

Here is a technique about how you can absolute center position an element on the horizontal and vertical in CSS. Center Images Horizontally To center something on the horizontal in CSS it's quite easy...

Recreate The Github Search Box

In this tutorial we are going to recreate a slide out search box just like what you will find on Github. What's different about this search box is that it will start with a small width and then when...

How To Style A Checkbox With CSS

Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not make your site look different by styling you...

Create Polaroid Image With CSS

A polaroid picture is an iconic image of how pictures used to be. It is strange to see them on a computer but they are also a great way to display images. The images are placed on a white background w...