Web Design Tutorials

Triggering CSS3 Transitions With JavaScript

Triggering CSS3 Transitions With JavaScript At the beginning of this month I wrote a post accompanied by five demo pages that showed that CSS3 transitions could be triggered with a number of different events/states in CSS.

That alone should help you see how these types of simple animations work. But let’s take this a bit further.

CSS pseudo-classes and media queries (which I used in that other post to trigger the transitions) represent certain states for certain elements. These states occur after specific events on the page. So naturally, CSS3 transitions can also be fired using any JavaScript event. Let’s try a simple click event that toggles a class name.

Replacing Subtle Flash Animations with CSS3

Replacing Subtle Flash Animations with CSS3 I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 84Colors, which belongs to a freelance designer named Cristiana Bardeanu.

On that site, you’ll notice there are a number of subtle animations that integrate nicely with her overall brand and design.

Her animations are done using Flash. I thought it would be fun to grab some of those elements and create a CSS3-based page that mimicked what those Flash-based objects do.

CSS3′s ‘space’ and ‘round’ Values for background-repeat

CSS3 space and round Values for background-repeat If you’ve seen the code for CSS3 border images then you’re probably familiar with the space and round values for the border-image-repeat property.

Well, in the CSS3 spec, the well-known background-repeat property now includes those two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat — all of which most CSS developers will be thoroughly familiar with).

The “inherit” Value for CSS Properties

The inherit Value for CSS Properties In CSS, there are some properties that are naturally inherited from parent to child. This is useful because it prevents needing to define that same property for all children.

For example, the font-size property can be set (as it often is) on the <body> element, and virtually every element that is a child of <body> will inherit that font-size setting.

(photo by Mariska van Brederide)

CSS3 Radial Gradient Syntax Breakdown

CSS3 Radial Gradient Syntax Breakdown A short time ago I wrote an article that broke down the syntax for coding CSS3 linear gradients from scratch.

Once you get the hang of them, linear gradients are pretty simple to code. Radial gradients, on the other hand, are a little more complex.

So let’s finish off what I started in that earlier post and go through the syntax for radial gradients.

CSS3 Transitions Without Using :hover

CSS3 Transitions Without Using :hover Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.

These types of transitions are pretty common, and you’ve probably seen or used something similar. But transitions are not just limited to use with :hover.

You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined (with demos) in this article.

Multiple Borders with CSS

Multiple Borders with CSS While fiddling around with the CSS3 box-shadow property, I stumbled across a method to put a double border on a single element. I thought to myself, that’s pretty cool, but obviously, it will only work in newer browsers that support box-shadow.

So I wondered how many different ways there are to create an element that has the appearance of a double border. Naturally, the most common way is by using a non-fluid background image. But that’s obviously not ideal.

So, I’ve compiled five different methods for doing this. Only one requires use of an image; the rest are pure CSS, with pretty good browser support for all methods. For brevity, in the code examples I’ve removed the common stuff like width, height, background, etc.

HTML5′s New “form” Attribute

HTML5's New form Attribute One challenge that developers have faced when creating forms is the inability to separate a form control from its parent <form> element without having to resort to some undesirable methods to get that form control to submit its data along with the form.

If you tried to do this in HTML4 or XHTML, the form would not submit the information from the form control that’s structurally outside the form.

As a result, if you wanted the data from the orphaned control to be submitted along with the rest of the form data, you’d have to implement some fancy JavaScript tricks to pass the information into the submission — which has many obvious drawbacks.

A Bookmarklet to Fix Wikipedia’s Layout in a Wide Browser Window

A Bookmarklet to Fix Wikipedia's Layout on a Wide Browser Window I have a wide monitor and I like my windows to be maximised (I’m on Windows 7). I also like when Chrome is maximised, because I usually have about 7,623 tabs open at any given time, so the bigger the window, the better.

Thus, when I visit a page on Wikipedia, it’s unreadable — because Wikipedia’s layout is fluid and it fills the whole monitor. It normally looks like this:

Background-Clip in CSS3

Background-Clip in CSS3 With all the excitement over the flashy new stuff in CSS3 (like transitions, transforms, and keyframe animations), some other properties may get pushed into the … well… background.

The CSS3 spec has introduced some new properties related to backgrounds. Here’s a quick and dirty description, along with a few examples, of one of those properties: background-clip.