Collection of 44 Free CSS3 Animation Code Snippets

Collection of 44 Free CSS3 Animation Code Snippets

Nothing says modern web design quite like CSS-only animation. Just a decade ago this seemed like a common pipe dream. But thanks to some whizzes over at the W3C the world is now a better place with CSS-animated page elements.

Below I’ve put together a huge gallery of 40+ open source CSS3 animation codes. Both developers and designers can benefit greatly from this collection.

All of these snippets are built to run in CSS3-compliant browsers using transitions and keyframes. Take a look over these code samples to see if you can implement any of them into your own web design work.

30 Websites Utilizing Fullscreen Homepage Video

30 Websites Utilizing Fullscreen Homepage Video

It used to be that videos would have taken 20-30 minutes to fully stream over dial-up Internet. But now people can browse YouTube and watch videos streaming from their phone with a 4G connection. This has paved the way for many video-integrated websites including fullscreen background videos.

In this gallery I’ve compiled a series of 30 brilliant websites featuring large homepage video backgrounds. Each layout is structured in a unique yet systematic way according to the video quality and color scheme. Fullscreen background video is a newer trend which has gained a lot of attention over recent years. Use this gallery for both design inspiration and generating cool new ideas in your own projects.

Design Freebies For Creatives: February 2014

Design Freebies For Creatives: February 2014

This is the second instalment of the ongoing DesignWoop freebies series, a monthly design and development freebie collection.

The free design goodies included in this months round-up feature some quality PSD templates, coded HTML templates, backgrounds and some super nice fonts. The free typeface called ‘Adam’ really caught my eye and was rather quickly download into my font library.

Design Freebies For Creative Minds: Jan 2014

Design Freebies For Creative Minds: Jan 2013

This is the first in the series of the monthly design and development freebie collection. I have some super resources in this months collection ranging from HTML templates, PSD files, a Ghost CMS template and a couple of free fonts. The Readium Ghost theme looks fantastic, it is my personal favorite in the collection and unbelievably it is free, kudos to Sven Read and his team.

10 Useful Time Saving Responsive Frameworks

10 Useful Time Saving Responsive Frameworks

The time spent building a new web project can be greatly reduced if you choose to use a prebuilt HTML5/CSS framework.

A front-end framework can provide you with tons of prebuilt web elements such as responsive grids, JS sliders, complex menus, model windows, icon fonts – pretty much everything you may need to get your website up and running fast.

Here are ten useful, time saving web design frameworks that you should bookmark for future use in your projects.

CSS3 Animated Image Slideshows with Flux Slider

CSS3 Animated Image Slideshows with Flux Slider

There are so many JavaScript image slideshow plugins out on the Internet, it can be difficult pinpointing what you need. Developers who are not looking to start from scratch often search the web targeting the perfect solution. And although each technique has its drawbacks, the wide assortment of choices will offer plenty of rewards and something to fit your layout.

In this tutorial I want to focus on using a library called Flux Slider which was created by Joe Lambert. This image slideshow plugin is unique in that it defaults to using CSS3 transitions with JavaScript-controlled alternatives. All modern CSS3-compliant browsers will support the native features which can be set using jQuery or Zepto.js as the core library. Catch a glimpse of the demo we are building in my live example below.