CSS

CSS in JavaScript with Angular

For many years the frontend css styling world saw new features added…

Creating a drag drop upload area

Drag and drop functionality has traditionally been a pain for developers to support. But with advances…

CSS only parallax using perspective and transform3d

CSS vertical rhythm with typography units

One of the issues frontend developers have when creating their base grid is setting up the typography. Web typography is not consistent across browsers and very hard to make pixel perfect. Here are some simple steps to ensure the vertical rhythm of the site…

Using inline images as background images with dynamic height

Responsive css only carousel

A while ago I looked at some methods to create css only carousels. Since then new css features have become…

Responsive images using css only

One of the biggest challenges on responsive sites is handling images across different size screens and…

Circular loading bar using css only

I’ve recently started a new project where audio files are played in loops. This presents an interesting challenge as the loading bar makes more sense to be circular rather than linear. Added to this I also wanted to be able to control the amount of time it takes for…

Improving the AngularJS app starter template

AngularJS is a very powerful front-end library which allows you to build apps and…

Responsive cross browser lightbox using only html and css

There are many great lightbox plugins out there, however lots of them rely on jQuery or other libraries. Also another negative aspect is that they use JavaScript for the resizing and other parts which really isn’t needed. So how…