Media Query Sass Mixin

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. For more information you can read a previous article I wrote

Read more...

How To Get Started With CSS Flexbox

In this tutorial we are going to look at the CSS flexbox property and how we can use this to improve layouts of our websites. The CSS flexbox property is created to be flexible so it can provide you with a more intelligent layout than the older ways of using floats or display: inline-block. The advantage you get by using the flexbox model is that it can provide you with

Read more...

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...

1 2 3 4 5 6