At the time of this writing, the CSS Regions specification is a working draft and things may change! Techniques mentioned in this tutorial might change in implementation. The aim of this tutorial is to give a basic understanding of CSS Regions and what might be coming to a browser near you.
Today Mary Lou wants to share a little subtle effect with you: enhancing required fields in a form. Many web forms are designed in a minimal way, i.e. by only collecting the most necessary data from users. Just think of sign up forms where you don’t want to make your potential customer leave because there are just too many things he has to fill out. But there are also many forms where additional information is asked and the user is actually willing to or needs to fill optional fields. You can think of an order form or a classifieds form.
In this tutorial, Ring Wing is going to create a slideshow with a parallax effect with the help of some CSS3 properties. He will use radio buttons and sibling combinators for controlling which slide is shown. There will be two backgrounds and the idea is to change the background positions and the position of the slider with transitions in order to create a slight parallax effect.
Harry Robert talks covered how to build big, scalable front-ends and one of the key factors involved in doing so is sensible and generous use of abstracted classes. One thing that really helps you achieve this is the application of the single responsibility principle, a method used mainly in OO programming. Loosely, the single responsibility principle states that every module or chunk of code (a function etc) should do one job well and one job only. The benefits of this are mainly in the way of maintainability and extensibility.
Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers, but we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation. Please note that this effect will only work properly in modern browsers that support the CSS3 properties being used.
You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t?
Tom Giannattasio had the pleasure of organizing this year’s Beercamp website - this is a party for designers and developers. It’s also a playground for front-end experimentation. So this year experiment: a 3D pop-up book á la Dr. Seuss. The website was a test to see how far SVG and CSS 3D transforms could be pushed. He learned a lot in the process and wanted to share some of the techniques that he found helpful when working in 3D space.
Mary Lou is here again to show you another fancy new trick which will help to improve your web page in several different ways. In today’s tutorial she will create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. She'll be “exchanging” certain words of that sentence using CSS animations.
In this tutorial Tom Kenny will teach you another great trick to make you page more rich and nicer looking. By now, hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to do some interesting effects with CSS. Here he is going to show you how you can create a simple ‘stacked’ look to some images.
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial Mary Lou will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.