background preloader

50 New Useful CSS Techniques, Tutorials and Tools

50 New Useful CSS Techniques, Tutorials and Tools
Advertisement These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing! In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSSTim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio buttonA demo of HTML input elements made with CSS3. The Simpler CSS GridWhy restrict your layout so that it can fit into this 960gs?

http://coding.smashingmagazine.com/2010/10/12/50-new-useful-css-techniques-tutorials-and-tools/

Related:  CSS3

35 Useful CSS3 Tutorials To Boost Your Skills Good CSS3 tutorials can teach you the tricks and techniques used by experienced web designers and developers to implement a specific solution. Looking the experts over the shoulders is also a great way to pick up fresh inspiration and further to see that something your client is asking for can actually be done. A great CSS3 tutorial providing clever solutions to requirements you need to fulfill may be a great time saver and therefore may kick-start a project.

Creating Interactive Fictional UI With CSS3 In today’s article we will create an interactive fiction user interface (UI) coded with CSS transforms and transition properties. The idea is to have a button and reveal more information when mouse over on it. You can check out the demo before you proceed to the next section. View Demo Cool right? MicroTut: Centering a Div Both Horizontally And Vertically Martin Angelov While building web page layouts, you’ve probably been faced with a situation where you need to center a div both horizontally and vertically with pure CSS. There are more than a few ways to achieve this, and in this MicroTut I am going to show you my favorite involving CSS and jQuery. But first, the basics:

CSS3 Transitions — Thank God We Have A Specification! Advertisement This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. Creating a Mouseover Fade Effect with jQuery My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image.

13 Pure CSS Techniques for Creating JavaScript-like Interactions We all know that JavaScript allows us to do great things when it comes to user interfaces, but with a little imagination and creativity, the same types of effects can be created with only CSS. Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing. You’ll notice that some of these techniques can be very useful, while others are simple for proving it can be done.

An Awesome CSS3 Lightbox Gallery With jQuery Martin Angelov In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it. It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost). We are using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling. Before reading on, I would suggest that you download the example files and have the demo opened in a tab for reference.

Advanced CSS Menu Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

Multiple Backgrounds and CSS Gradients CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I'm covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS?

Related: