It has been well over a year since we last took a look at some of the latest CSS3 buttons techniques. And what a difference a year makes. No longer satisfied with just using the basic CSS3 properties (border-radius, box-shadow…), many developers have progressed to using @font-face icons, animation and 3D effects. All with only CSS. Hope you enjoy this selection: You might also like… 20 CSS3 Tutorials and Techniques for Creating Buttons → 22 CSS Button Styling Tutorials and [...]

Fluent animated transitions for sliding web page elements such as a menu or an image gallery, have always traditionally been implemented with JavaScript. But using the CSS3 pseudo-class :target and the negation pseudo-class :not() properties, together with the CSS3 Transition Module you can achieve the same effect, but without JavaScript! This means that the very popular “accordion or toggle” effects can be easily implemented using only CSS! In the following CSS workshop we will build an accordion/toggler image gallery to [...]

All of the CSS3 navigation tutorials we have for you today are all fully functional and could easily be used on a live site. But we do prefer to think of them all as being more experimental and proof-of-concept rather than being a robust end-product (a sprinkle of jQuery always makes everything better!). What they do offer is an opportunity to roll-up your sleeves and delve into some ground-breaking code. Anyway, here they all are: You might also like… CSS3 [...]

Today we are showcasing some of best tutorials and techniques that will help you create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3. All with absolutely NO JAVASCRIPT. For the most part, the techniques we have highlighted below, can be used for everyday use, others probably not. Please do check browser compatibility when implementing any of these techniques. You might also like… CSS3 Compatibility Tools, Resources and References for Internet Explorer → CSS [...]

Responsive web design become a very popular trend in 2011. It’s likely something we’ll see continuing well into 2012 as designers are beginning to support a myriad of mobile devices. Building layouts for the web can be tough, but inspiration is a huge factor. In this gallery I’ve collected 40+ amazing responsive website layouts. These designs are built to support a set of different resolutions and re-size accordingly. It’s tricky building this functionality in HTML5, even advanced web developers may [...]

Each time you develop a theme you’ll have to deal with the same, repetitive tasks. E.g. you need a certain folder structure to organize your PHP, CSS and JavaScript files or you rely on features like layouts, compression and caching. Because you don’t want to start from scratch, coding all these features over and over again, you are better off using a theme framework. It provides you with a file and folder structure and offers a rich tool set for [...]

The pros for using @fontface for icons far outweigh the cons. First of all, there are the obvious benefits of being infinitely scalable and being able to style them dynamically using any CSS property (color, gradients, shadow…). Secondly, its much easier to manage one single font file as opposed to juggling lots of individual images or having to create sprites. Thirdly, a single font file will only need a single HTTP Request for all the icons you use. And finally, [...]

A code framework is nothing more than a collection of pre-formatted classes and functions. There are frameworks created for practically every language out there – even including frontend web development like JavaScript and CSS. Developers would be wise to follow these trends of working on top of pre-built code. There are reasons both for and against building on top of web frameworks. You need to spend time learning the code and adjust your website accordingly. But in the long run [...]

In this tutorial, I’ll teach you how to adapt a simple HTML blog layout into a WordPress theme. We’ll be using this static page as starting point.

As a developer, anything that can save you just a little bit of time is well worth its weight in gold. If you agree with that statement, you will love this. What we have for you is our selection of the best, the most useful and the most innovative tools and resources from 2011. That includes frameworks, boilerplates, apps, Javascript resources, CSS3 animations tools…and on…and on. So, no matter what, you are guaranteed to discover something completely new and really, [...]

Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library. However, with the advent of CSS3, I will show you how to build one using only CSS. The result won’t be the most semantic thing to ever be made, but it will be completely functional nonetheless. Demo & [...]

There are many tools built to help with CSS, and improved ones are constantly being created. The fresh tools we have for you in this article will greatly improve your work-flow, whether that be by solving validation or debugging snags, or taking care of many of those tedious repetitive tasks that every project requires, or by simply offering solutions to many of those tasks that are time consuming (like sprites) and at times challenging (CSS3 animations). You’ll certainly appreciate this [...]

CSS has hugely improved forms. Where once you had very rudimentary forms that looked plain and un-styled, CSS lets you style your form however you want and create rich and robust forms. Even a simple contact form can look slick and increase readability and user-friendliness – which means more visitors will fill it out and you’ll get more results based on that action. Like with any web design, there’s no need for you to reinvent the wheel – use these [...]