CSS framework

CSS framework like Bootstrap, HTML5 Boilerplate and Foundation tremendously improves the workflow of front-end developers. A responsive website mock up could be done in hours and even minutes. However the disadvantage is that unless you do some customisation and integrate some CSS tricks, your website will look similar to other websites that are using the same framework.

The developers that I meet are usually back end developers. And sometimes when back end developers have to develop the front end user facing interface, the results are not always optimal. Admittedly, front end development is much simpler than back end development but there are certain user-centric thought processes that could be overlooked. For instance, when designing and developing a user interface, the developers need to think about the target audience, style preferences, usabilities and user behaviors.

User-centric design is a discipline by itself.

Websites are becoming more interactive, attractive and innovative. A look at Awwwards features an array of fanciful, though not always user-centric, website design.

Users are expecting more nowadays. Here are 5 beautiful CSS tricks (ok, you need some javascript to make it works) that you could use to take your website to the next level.

5. Page transitions

See the Pen A Collection of Page Transitions by Cohesion (@cohesion) on CodePen.

4. Clipping

See the Pen Reverse clip path with blend modes by Zach Saucier (@Zeaklous) on CodePen.

3. Page loading animation

See the Pen Galleria Tbilisi - loading by Misha Tsankashvili (@Tsankashvili) on CodePen.

2. Stylish Hover effects

See the Pen 10 stylish hover effects with less by Renan C. Araujo (@caraujo) on CodePen.

1. Transitions on scroll

See the Pen Background Transition On Scroll by ianchouinard (@ianchouinard) on CodePen.

That’s it, my website uses clipping, page loading animation and transitions on scroll. What are some of your CSS tricks that you like? Share with me below.