We can start to use CSS3 transitions right now as long as we carefully choose the situations in which to use them. They certainly won’t replace existing technologies like Flash, JavaScript, or SVG (especially without broader browser support)—but they can be used to push the experience layer a notch higher. And most importantly, they’re relatively easy to implement for the web designer already familiar with CSS. It only takes a few lines of code…
Articles in the ‘Tutorials’ Category
-
Understanding CSS3 Transitions
Posted: 2 years ago in Tutorials
Read More: Understanding CSS3 Transitions
-
Getting Clever with CSS3 Shadows – Screencast
Posted: 2 years ago in Tutorials
As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways. This quick video tutorial will show you how…
-
Formalize CSS
Posted: 2 years ago in Tutorials
I want some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system. Thus, my quest to find a happy medium, where browsers would generally agree and let me keep my sanity. The result is what I’m simply referring to as Formalize CSS…
Read More: Formalize CSS
-
Diagonal CSS Sprites
Posted: 2 years ago in Tutorials
With the sprite built on a diagonal there are no components below or to the right of the component you are showing. This allows for the element using the sprite to be as wide or as tall as it needs to be with no worry of exposing the next component…
Read More: Diagonal CSS Sprites
-
CSS Border Tricks – Pressed, Beveled, Shadows, Indented Borders
Posted: 2 years ago in Tutorials
Since I released my new redesigned blog, a lot of people have asked me how I styled the pressed effect on my category navigation. I would like to share some simple border style tricks to get various effects for your next project…
Read More: CSS Border Tricks – Pressed, Beveled, Shadows, Indented Borders
-
CSS3 Advanced Box Shadows
Posted: 2 years ago in Tutorials
In this video, you’ll learn about additional box-shadow features, such as multiple shadows and inset shadows. You’ll also learn some advanced techniques, such as how to create a sunken well effect…
Read More: CSS3 Advanced Box Shadows
-
CSS3 Animated Bubble Buttons
Posted: 2 years ago in Tutorials
This week we are creating a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names…
Read More: CSS3 Animated Bubble Buttons
-
An Almost Complete Guide to CSS3 Multi-column Layouts
Posted: 2 years ago in Tutorials
One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case. First of all, it’s generally easier to read lines of text between 8 and 12 words long. Second, it’s easier to control the amount of negative space in a layout with columns. For a long time, this was the primary advantage of print but CSS3 makes multi-column layouts possible online and without the need for JavaScript…
Read More: An Almost Complete Guide to CSS3 Multi-column Layouts
-
Creating Shadows Around Polygons in CSS
Posted: 2 years ago in Tutorials
Almost every polygon can be reduced to a combination of simpler shapes — a reduction that’s the essence of how we make complex shapes with HTML and CSS in the first place. So what we have to do is apply the shadow to both those boxes, and then cut off the overlap with clip…
Read More: Creating Shadows Around Polygons in CSS
-
CSS3 Card Trick: A Fun CSS3 Experiment
Posted: 2 years ago in Tutorials
This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS. I’ve used no images and no scripting; everything’s done using HTML and CSS…
Read More: CSS3 Card Trick: A Fun CSS3 Experiment