Category Archives CSS

CSS Archives

Welcome to our CSS and HTML archives page. Here you will find articles, tutorials and free resources that will help you build beautifully designed web pages.

css_thumb

50 Visually Appealing CSS Tutorials & Techniques

If you are looking for in-depth articles on the inner workings of flexbox, or a comprehensive explanation for using CSS regions, then this is definitely not the post for you. Instead, we have squarely put our focus on those CSS tutorials that not only make the smaller details of the web visually appealing, but are also really useful. You know…

revealing-content-overlays-feat

Create Revealing Content Overlays With CSS3 Transitions

In this tutorial, I will show you how to create revealing content overlays with CSS3 transitions, allowing you to minimise content clutter and provide a neat user experience. Download Source FilesView the Demo Introduction I’ll introduce this tutorial by presenting a very suitable use case. Imagine your company offered a bunch of different services, and on your website’s services section,…

css_tools_resources_thumb

50 CSS Libraries, Frameworks and Tools from 2014

With all of the changes and advancements that CSS has gone threw these last few years, we should not be surprised at the huge volume of free resources and tools that are currently being released. These time-saving CSS libraries, frameworks and tools have been built to make our lives that little bit easier and also offer a clear learning window…

featured_thumb

Creating Round, Flat and Flip-Style CSS Toggle Switches

In this tutorial, we show how to easily create some fantastic round, flat and flip-style CSS toggle switches. We’ll be using pure CSS to create some toggle switches, adding a neat user experience to checkbox functionality. Download the Source Files View the Demo The Reasoning Often times, we find ourselves needing users to check/uncheck a checkbox to signify a yes/no…

css_tools_2013_thumb

50 CSS Tools & Resources from 2013

In the article below we have put together a useful collection of our favorite CSS resources, frameworks, UI kits and handy tools, all from this past year, 2013. The main idea of this is to not only illustrate and highlight what a fantastic year it has been for CSS, but to also to offer you a range of production-ready resources…

css_animation_thumb

CSS Animation Tools & Tutorials

Animating with CSS may have some limits, but overall they do offer a number of advantages over animations that are powered by JS. Easier to work with and being hardware accelerated are just two of the key CSS advantages. Of course CSS powered animations do have some disadvantages, such as it being difficult to have complete control over them. That…

Free Responsive HTML5 Templates

Not only do the feature-rich responsive HTML5 templates we have for you today offer a fantastic platform for building your site upon, they also give you a rare learning opportunity to delve deeply into each of the templates code, allowing you to learn some of the latest responsive and HTML5 techniques. As well as their beautiful code, each of the…

css-tricks-sliding-css3-image-captions

Best Open Source CSS3 and jQuery Image Captions

The use of image captions within HTML has been a long-standing tradition among web developers. Typically this involves the <figure> and <figcaption> elements, plus some additional CSS styles. Because of the large open source movement we can find even more great examples of plugins and starter scripts for building these image captions in your own projects. I want to present…

css_thumb

Tools for Formatting, Organizing and Tidying CSS Code

If you are an uber-experienced web designer, you probably won’t have this problem. Your CSS files will be structured coherently and concisely, every selector will have been attentively placed, every property will be perfectly formatted… basically, your CSS will look like carefully crafted art. If this describes you, then move along please, this post is not for you. But if…