Understanding CSS3 Transitions. It was 1997 and I was sitting in a terribly run-down apartment in beautiful Allston, Massachusetts.
A typical late night of viewing source and teaching myself HTML followed a day of packing CDs at a local record label for peanuts (hence the run-down apartment). I’m sure you can relate. Article Continues Below One triumphant night, I pumped my fist in sweet victory. I’d just successfully coded my first JavaScript image rollover. CSS3 Animation Cheat Sheet - Justin Aguilar. How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects.
All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Effeckt.css. Ladda. Scroll Activated Fixed Header Animations. It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines.
Pop Hovers. POP has these cool hovers in the boxes that make up their homepage.
The boxes have a white background by default, and as you hover over them a dark background slides up behind, the text colors change, and the text "pops" up a little. When you hover off, the dark background slides away, the text colors change back, and the text pops down a little. I thought I'd try and replicate it because, you know, eff yeah hovers. Demo Check out this Pen! Each area is a "box": Replace images with CSS gradients for striped backgrounds. One of the easiest and most effective ways of speeding up a web site is to replace background images with CSS3.
Currently I’m exploring, and trying to have a very good understanding off, all the ways we can use CSS3 to create layouts instead of resorting to using images that create http requests and slow down pages, especially on mobile devices. The site I happen to be working on has three different backgrounds with vertical stripes. Figuring out how to replace the images it currently uses with CSS is a big win, provided that the size of the CSS required to create these backgrounds is not prohibitively large. (Background images tile and can be very small files — it’s the http request for the image that is more expensive in terms of performance.) CSS3 Patterns, Explained. Many of you have probably seen my CSS3 patterns gallery.
It became very popular throughout the year and it showed many web developers how powerful CSS3 gradients really are. But how many really understand how these patterns are created? The biggest benefit of CSS-generated backgrounds is that they can be modified directly within the style sheet. This benefit is void if we are just copying and pasting CSS code we don’t understand. We may as well use a data URI instead. Important note In all the examples that follow, I’ll be using gradients without a vendor prefix, for readability and brevity. The syntax described here is the one that browsers currently implement. If you are not yet familiar with CSS gradients, you can read these excellent tutorials by John Allsopp and return here later, as in the rest of the article I assume you already know the CSS gradient basics: The main idea.
CSS3 Linear Gradients. It’s been a while since we posted anything particularly technical to the Web Directions blog, but that’s something we plan on changing.
Here’s the first in a series of technical articles on CSS3 features (along with tools to help you lean and use them). We’re starting with linear gradients. We’ll take a look at where they come from, how to use them, and the current level of browser support. Ironically although webkit introduced gradients, until version 5.1, Safari has supported a different syntax from that described here — so, if you are using a version of Safari other than 5.1 (currently in beta) you won’t be able to see the examples. A little history. CSS3 Patterns Gallery. Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+.
However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? Diagonal Lines Pattern. Edit this Fiddle. Uniqlo Stripe Hovers. For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover.
It's kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect. Original Hover Effects with CSS3.