Today Mary Lou wants to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects.
In this tutorial Mary Lou is going to experiment with perspective and use a radio input trick to create a fun css-only timeline-like structure. The idea is to show a teaser of an item and when clicking on the associated radio input, the content will expand and rotate in 3D, giving some depth to the whole thing. She’ll be using CSS 3D transform, transitions and sibling selectors. Note that the 3D effect looks best in WebKit browsers. Unfortunately, Firefox does not play along very nicely.
Cinemagraphs are great fun - a surprising blend between a static photograph and a video. They engage website visitors explicitly because they initially appear to be a regular photograph, but then they catch the viewer by surprise by moving subtly, and for a moment your visitor is fully engaged with your page. First and foremost, cinemagraphs use the animated GIF format to capture the frames within the animation. This is a simple, portable and flexible way to create an animation, but as GIFs are strictly 8bit, the palette that can be reproduced is extremely limited.
This article will guide you in improving the look and feel of scrollbars to match your UI design. Muhammad Ahmad Zafar will take a look at what WebKit browsers offer you in terms of CSS, plus he’ll use a jQuery fallback to cater for other browsers. When he refers to Webkit-based browsers he’s essentially talking about Apple Safari and Google Chrome. Together they currently hold more than 40% of the overall desktop browser market. For tablets, Apple’s iPad will always use Webkit no matter which company’s browser is used. Google also added Chrome to its Android OS.
In this article Hugo Giraudel will mostly talk about his own experience. Remember that CSS is an extremely simple language. It can be summed up in 3 words: selector, property, value. Nothing more, really. This is why some people don’t like CSS at all: because they feel like children playing with LEGOs. From what Hugo Giraudel can tell, he has been playing around with CSS for almost two years now and on what he would call a heavy level for something like 7 months. He's still far from perfect, and there are still some tricks he doesn't know or understand. Anyway, there are a few things he understood over the months and he’d like to share them with you.
Today, Hugo Giraudel is going to do a lot of stuff with CSS animations. Indeed, he will talk about CSS loading animations. A few things before he starts: You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files; the goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE9-; if you plan to support these browsers, be sure to make fallbacks. Hugo Giraudel personally uses the box-model where [width] = [element-width] + [padding] + [borders].
Nowadays, almost every web service, application, game etc. allows (or even requires) user subscription, which means they all need some kind of form for users to register and sign in. With this in mind, Hugo Giraudel tried to create a few different login forms, some of which are inspired by design concepts on the web. The aim was to give some particularity to each of them.
Ever wondered how to style checkboxes and radio buttons, but without JavaScript? Thanks to CSS3 you can! What exactly will Nick Dugger be doing? Well, due to CSS3's nifty little :checked pseudo selector, he is able to target an element based on its checked (or unchecked) status. He can then use the “+” adjacent sibling selector from CSS2.1 to target the element directly following the checkbox or radio, which in his case is the label.
This time, Hugo Giraudel is going to talk (and do stuff!) about something a bit more practical than button switches: drop-down lists. The point of this tutorial is to show how to create nice drop-downs without any image but with CSS only. He will add some line of jQuery to make them work.
Laying out pages in CSS has always seemed a more complicated process than it needs to be. So here’s some great news: there are fresh specs that will make creating layouts a much simpler task for web designers. The major browsers, with the help of bodies such as the W3C, are starting to provide standards and implementations for a variety of new layout options that you can begin using today. For example, the W3C currently considers CSS3 Multicolumn Layout Module a Candidate Recommendation. Basically this means it’s at the point where the W3C is comfortable with browsers implementing it as a feature.