Getting Started With SASS

If you do any front-end development over the past couple of years then you would of heard of CSS pre-processors. The most common CSS pre-processors are SASS, LESS, or Stylus. CSS pre-processors are scripts that will compile code and output the results into CSS stylesheets. They allow you to create more dynamic, optimized and organised CSS for your websites. In this article I am going to investigate what it is

Read more...

Equal Height Columns

If you are displaying a number of columns on your web page then would of probably reached the problem where you need these columns to be the same height as each other. The problem you have with these is when you have different content in the columns some will be larger than others, which will break the design of the website. When you start adding content to these boxes they

Read more...

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 spinners with just CSS and show the variety of spinners we can create. In the past we had to create the spinners with Javascript to do the animation for

Read more...

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 show you this jQuery plugin but also show how you can create a typing effect by just using CSS animation. The setup of this plugin is very easy all you have to do is include

Read more...

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. To run this CSS animation all we have to do is add the .fade_element CSS class to an element. With the CSS class assigned to the H1 tag the browser will run this CSS animation on the

Read more...

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 animation is the same for all hands we just need to change the timing used. To view what we are going to create you can see the demo of the CSS clock below. CSS Clock Demo

Read more...

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 stand out so people focus on these areas of your website. In this tutorial we are going to create a CSS animation download icon. View the demo page to see the animation.

Read more...

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 will have a rounded background with a button on the background, when you click the button it will slide to the right of the background and change colour. How To Style A Checkbox With

Read more...

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, when before all calls to Twitter could be made anonymously. This is so Twitter can prevent abusive behaviour of their API. If you are using WordPress, I wrote a previous tutorial about how you can

Read more...

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 box this will grow and shrink the other boxes. We can even add an icon to animate into the box to represent the page on the navigation. View the demo to see this

Read more...

1 2 3 4 5 6