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.

dialog_thumb

Creating Native HTML5 Dialog Windows

The dialog window is one of the most commonly used elements in a website’s user interface design. It is used for multiple purposes, including displaying notifications, carrying a subscription form, alerting of errors/warnings, and drawing a visitor’s attention to vital pieces of information. When dialog windows are designed effectively and used right, they can ease the user’s task. Previously, creating…

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…