The New Hotness: Using CSS3 Visual Effects

Advertisement

Previously in this series on CSS3, we talked not only about how to create scalable and compelling buttons but about how to effectively use new CSS3 properties to speed up development and quickly create rich page elements. In this final article of the series, we’ll really get into it and use CSS3 visual effects to push the envelope.

Not everything in this article is practical, or even bug-free, but it’s a fun primer on what’s in the pipeline for Web design. To get the most from these examples, you’ll have to use Safari 4 or Chrome. (Firefox 3.5 can handle most of it, but not everything: WebKit is further along than Gecko in its tentative CSS support.) We’ll show you how to create impressive image galleries, build animated music players and overlay images like a pro. All set? Let’s rock.

Create A Polaroid Image Gallery

Polaroid image gallery

We always try to stay pretty active with our Flickr feed; our chief instigator Bryan does a great job of capturing the day-to-day and special events and even some of our old work. We wanted a great way to show off these photos, so we turned to CSS3 to create a compelling, fun image gallery. The Polaroid style is pretty common, but we wanted not only to make it dead-simple to create the gallery in the markup but also to add styles that would have required Javascript just a year or two ago.

The Polaroid Gallery Markup

First off, we created very simple markup for the gallery, something that would be easy to generate automatically using the Flickr API. The markup for the entire gallery looks like this:

<ul class="polaroids">
	<li>																				  
	   <a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">	  
	   	<img src="image-01.jpg" width="250" height="200" alt="Roeland!" />
	   </a>																			  
	</li>																				  
	<li>																				  
	   <a href="http://www.flickr.com/photos/zurbinc/3985295842/" title="Discussion">	  
	   	<img src="image-02.jpg" width="250" height="200" alt="Discussion" />	
	   </a>																		 
	</li>																				  
</ul>

We’ll be using the title element in a minute.

The Base Style and Labels

Our next step was to create the simple Polaroid look. We placed our image inside an anchor with a white background and scaled the image container. This gave us space for the image labels, which we created using little-known CSS tricks: :after and content: attr.

ul.polaroids a:after {
	content: attr(title);
}

What we’re doing here is telling the browser that after it renders the given anchor content, add another piece of content. We then generate that piece of content with the content: attr(title) element, which pulls a specific attribute from the element, in this case the title attribute. Using alt would make more sense, but neither Safari nor Firefox has implemented it for the content element.

The snippet above tells the browser to take the title attribute and render it immediately after the content. Note that the title attribute will be rendered within the anchor, which is exactly what we want. We would have liked to have used the alt attribute, but Safari and Firefox do not support the use of content with it.

Our styling of the anchor element takes care of the formatting of the title attribute as well, and we’ve now placed the image title attribute below it so that we don’t have to replicate that content in the markup.

Scattering the Pictures

A handful of Polaroids would never be in a perfect grid; they’d be scattered over the table. We compromised by messing up the grid a little bit for each image: a little rotation here, some displacement there. However, we did not want to have to manage that scattering on a per-image basis, so we used another new pseudo-class: nth-child.

/* By default, we tilt all images by -2 degrees */
ul.polaroids a {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
}

/* Rotate all even images 2 degrees */ ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); } /* Don't rotate every third image, but offset its position */ ul.polaroids li:nth-child(3n) a { -webkit-transform: none; -moz-transform: none; position: relative; top: -5px; }

These are only a few of the declarations we used; we actually added them for everything up to 11n, but you get the idea. As you can see, nth-child supports a few different arguments, including even, odd and Xn (where X can be any integer). The even and odd declarations are self-explanatory. Xn takes every Xth element and applies a particular style; in this example, every 3rd. Combining this with odd, even and some more Xn declarations means that even though the style won’t really be random, it will appear random enough to the average user. You can see the entire set of styles on our demo page.

We’re using a new CSS3 property here as well: the CSS transform (shown as -webkit- and -moz-transform). The transform property can take a number of arguments for different kinds of transformations; in this example, we’ll be using rotate and scale. You can see the complete (tentative) list in the Safari Visual Effects Guide.

Some Final Animation

Our last touch was to give the image focus on hover; in this case, to enlarge and straighten out. We accomplish this using a -webkit-transition that is activated by the :hover pseudo-class. Check it out:

ul.polaroids a:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-webkit-transition: -webkit-transform .15s linear;
	position: relative;
	z-index: 5;
}

What’s happening here is that we’re overriding the existing -webkit-transform to simply scale the image (this eliminates the rotation). The -webkit-transition tells Webkit-based browsers to animate the transform so that the move from one to another is smooth. -webkit-transition is actually extremely versatile, because it can just as easily support color, position (top, right, etc.) and most any other property.

That’s how we created our Polaroid gallery. Once you know these new tricks, putting them together is actually pretty easy, and the markup is dead simple.

Polaroid image gallery

See the Live Demo »

We’ve created a live demo page for this gallery in our Playground, a place for us ZURBians to create small side projects and samples of cool toys. We’ll be linking to the Playground examples throughout this article.


Sliding Vinyl Albums With CSS Gradients

Vinyl albums

This example began as a simple experiment with CSS gradients and grew into a pretty detailed investigation not just of gradients but of new background properties and animation. We’ll show you how to create advanced gradients with no images and use layered backgrounds for some cool effects.

Writing the Markup

What we’ve created here is a simple unordered list of albums with slide-out album controls. You could use something like this to present your band’s albums or to showcase a series of podcasts or any other kind of audio (or potentially video) media. Each item in the list is an album, with some fairly simple markup:

<div class="album">
	<a href=""><img src="/playground/sliding-vinyl/muse-the-resistance.jpg" width="500" height="375" alt="Muse: The Resistance" /></a>
	<span class="vinyl">
		<div></div>
	</span>
	<ul class="actions">
		<li class="play-pause"><a href=""></a></li>
		<li class="info"><a href=""></a></li>
	</ul>
	<div>
		<h5>Muse</h5>
		<small>The Resistance</small>
	</div>
	<span class="gloss"></span>
</div>

It might look like a few extraneous elements are in there, but we’ll be using all of them to render our slide-out record and controller buttons.

Creating the Record

Record The real trick here was the album. We challenged ourselves to create the album without using any images at all (we ended up cheating a bit, but we’ll get to that). When it slides out, the album looks like the figure on the left: standard black vinyl with a slight shine to it and a couple of control buttons.

You’ll notice that the inside edge of the album is a little jagged, and that’s because the album isn’t an image but rather two layered gradients generated by the browser and set as the background of the same object. This required not only a bit of messing around with the new gradient objects in CSS3 but also another CSS3 trick: multiple backgrounds. Check out the CSS for the record:

ul.tunes li div.album span.vinyl div {
	display: block; 
	border: solid 1px black; 
	width: 112px; 
	height: 112px; 
	-webkit-border-radius: 59px; 
	-moz-border-radius: 59px; 
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,.5); 
	-webkit-transition: all .25s linear; 
	background:
		-webkit-gradient(
			linear, left top, left bottom, 
			from(transparent),
			color-stop(0.1, transparent),
			color-stop(0.5, rgba(255,255,255,0.25)),
			color-stop(0.9, transparent), 
			to(transparent)),
		-webkit-gradient(
			radial, 56 56, 10, 56 56, 112, 
			from(transparent),
			color-stop(0.01, transparent),
			color-stop(0.021, rgba(0,0,0,1)),
			color-stop(0.09, rgba(0,0,0,1)),
			color-stop(0.1, rgba(28,28,28,1)),
			to(rgba(28,28,28,1)));
	border-top: 1px solid rgba(255,255,255,.25);
}

We’ve omitted some of the positioning and other boring CSS pieces (check out the live demo for the complete markup). We want to focus here on the pieces that are critical to creating the album visually: border-radius and -webkit-gradient.

The simplest part was creating a round object: by setting the border radius to exactly half of the height and width of the object, the browser masks the object to a perfect circle. Watch out, though: unlike in Photoshop, if the border radius is higher than half the object’s height or width, the browser might simply ignore the declaration. That said, rounding the object is the easy part; the tricky part is controlling the gradients.

Two gradients are at work on the object: one creates the album itself (complete with the hole in the middle), and the other casts a light across it. We’ll start with the shine:

ul.tunes li div.album span.vinyl div {
	...
	background:
		-webkit-gradient(
			linear, left top, left bottom, 
			from(transparent),
			color-stop(0.1, transparent),
			color-stop(0.5, rgba(255,255,255,0.25)),
			color-stop(0.9, transparent), 
			to(transparent)),
			...
}

The shine gradient is a linear gradient from the top-left to bottom-left. We start with transparent so that the gradient fades in, then we shift the gradient to white at the 50% mark (halfway across the album), with 25% opacity. We’re using RGBa colors because they allow us to control both the color and opacity in the same declaration.

The album itself is more complicated, and it suffers a bit from early implementation of the radial gradient.

ul.tunes li div.album span.vinyl div {
	...
	background:
		...,
		-webkit-gradient(
			radial, 56 56, 10, 56 56, 112, 
			from(transparent),
			color-stop(0.01, transparent),
			color-stop(0.021, rgba(0,0,0,1)),
			color-stop(0.09, rgba(0,0,0,1)),
			color-stop(0.1, rgba(28,28,28,1)),
			to(rgba(28,28,28,1)));
	...
}

Radial gradients are just as they sound, and just what you’d expect from gradients in Photoshop. They begin at the center of the object and track across the object in concentric circles. In our case, we wanted to start with transparency, then switch to a solid black, and end up with a very dark gray.

Perhaps the most difficult part of the gradient is declaring its size and position: radial, 56 56, 10, 56 56, 112. We have five pieces of data here: type, starting center, starting diameter, ending center and ending diameter. Here’s how they work:

  • Radial is, of course, where we define this as a circular gradient rather than straight (linear) gradient.
  • We begin at 56 56, which is exactly half the height and width of our 112-pixel-tall object. We want the gradient to end with the same center, so we repeat 56 56.
  • The gradient begins with a diameter of 10 pixel.
  • The ending center (56 56) ensures that this is a concentric gradient.
  • 112 is our final diameter, the same width as the object.

The radial implementation was still a bit rough around the edges, so we played around with these values and the color-stop elements to get the effect we wanted. In the future, a more polished implementation won’t be quite so trial and error.

Album cover with disc From there, similar to the linear gradient, we created a series of color-stops to go from transparent to black to dark gray. The result of these two backgrounds (separated by a comma—thanks, CSS3) is our shiny record. Again, you’ll notice the center is a bit rough, but we’re sure future implementations of this new element will be cleaner.

The button controls are simply rounded anchors (using border-radius), with a couple of image glyphs (we told you we cheated a bit). The final touch was to add the animation so that the album would roll out of the sleeve on hover.

Adding in the Final Animation

To achieve the rolling effect, we paired up a position shift and a rotation effect so that, as the object moves to the right, it rotates just the right amount to appear as if it’s rolling. Here’s what we did:

ul.tunes li div.album span.vinyl { 
	-webkit-transition: all .25s linear; 
}

ul.tunes li div.album:hover span.vinyl { 
	-webkit-transform: translateX(60px); 
}

ul.tunes li div.album:hover span.vinyl div { 
	-webkit-transform: rotate(120deg);
}

We’re using two transforms, translateX and rotate, on two objects. We use the translate instead of standard positioning because transforms don’t impact the DOM—from a layout perspective, the object never really moves, and so we don’t have to worry about floats going awry or objects pushing each other around. Transitions also work better on translation transforms than on actual position (left: 20px, etc.) changes.

Gradients have a ways to go, but there are already some cool uses for generated gradients. You can even control them at runtime using transitions or JavaScript, which opens up yet more possibilities.

Sliding vinyl

See the Live Demo »

We’ve created a live demo page for this gallery in our Playground, so you can see it in action and delve deeper into the source code. Enjoy!


Sweet Overlays With Border-Image

Border image

This last part is perhaps the most practical. We use it in our feedback tool Notable every day. The border-image property is new but has some really interesting applications. We’ll explain how it works and how we’re using it in our flagship application.

The Overlay Markup

Overlays in Notable have two parts: the frame and the actual glass overlay. The markup for the overlay is pretty simple, consisting of two sibling DIVs:

<div class="note" id="note1">
	<div class="border"></div>
	<div class="overlay"></div>
	<span class="black circle note">1<span class="wrap"></span></span>
</div>

When we created these overlays, we had a few goals:

  • They shouldn’t overly obscure the content beneath them.
  • They shouldn’t affect the hue of the content beneath them.
  • They must look awesome.

To that end, we devised an overlay that would appear as a glass overlay, with a slight shine and a nice, fairly bold frame. For the purposes of this article, we’ll focus on the frame, which we created using the new border-image property.

Using Border-Image

The new border-image property is a strange beast: very versatile, but takes a little getting used to. Here’s what the border-image declaration for our frame looks like in the CSS:

div.note div.border {
	border: 5px solid #feb515;
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px;
	-webkit-border-image: 
		url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;
	-moz-border-image: 
		url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;
}

Let’s get the easy stuff out of the way. The border element is both required and a fallback: older browsers will still render a usable border for the overlay, but border-image requires a defined border width. While we’ve been fairly unconcerned with backwards-compatibility in our articles, in this case we needed it (Notable has to work in more than just cutting-edge browsers). This is one of many examples of progressive enhancement (or graceful degradation, if you prefer): older browsers render something usable, just less pretty. The first progressive piece in here is the border-radius, which we’ve already discussed at length.

The border-image is what we’re interested in. Check out the figure to the right; notice the gradient on the frame that goes from top to bottom? It’s a simple touch, but adding it to an object that has to scale to many different sizes required that we use this new property. And we’re glad we did; learning how to use it opened up new possibilities in our coding repertoire. Let’s look at just the border-image code again:

url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;

The syntax is the same for WebKit and Gecko(Mox) browsers. The actual declaration is simple. What takes some effort is understanding how to create the image file itself.

Border image takes a single image and slices it into nine pieces, which it then stretches over the object. We’ve sketched a diagram to explain how this works, and we’ve blown up the actual border image file for you to compare. Check it out:

Border image diagram sketch

The browser takes the top-left corner and uses it for the top-left border, and then it stretches the top-middle to cover the entire top of the object, and so on around the image.

Border image diagram

We created an image with transparent center, because border-image will stretch the center quadrant across the entire object (which seems counterintuitive for a “border” image, but it does make the style a bit more versatile). You’ll notice that the actual gradient is present only in quadrants 4 and 6, because those are the only pieces that will be stretched enough for us to see a gradient. The browser actually does a good job of stretching the image as long as it’s not too complex, so artifacts aren’t really an issue.

The last pieces of the border-image declaration are the size and style: 5 5 5 5 stretch. The repeated 5s determine the size on each side of the object; because we wanted a 5-pixel border, we created an image that was 15 x 15. If we had used a smaller image, the browser would have had to scale the corners as well, and no doubt it would have looked messier. The last property, stretch, dictates how the browser actually handles the pieces of the image. A great (and amusing) intro to the different styles can be found at lrbabe.

Putting It Together

Combining the frame with the glass overlay center (which is a semi-transparent PNG) gives us our frame. Using different border images, we actually created classes for our different colors (red, blue, etc.), while older browsers still get a usable frame without the gradient-edged niceties. This isn’t an incredibly complex example, but you can see how useful border-image can be, especially using an alpha-mapped image format such as PNG.

Overlay

See the Live Demo »

We’ve created a live demo page for this gallery in our Playground so that you can see it in action and delve deeper into the source code. You can also read up on why we created this overlay in our two-part Notable Behind the Scenes blog post: part 1 and part 2.


CSS 3 Is Totally Bad Ass

Right? We hope you’ve enjoyed this primer on what we can look forward to in the final CSS3 specification. Familiarize yourself with the properties and start using them—just be sure to account for browsers that, sadly, will never support all of these fun new tricks. You can see how we use CSS3 in our work for clients as well as in our own product, Notable. Found a super-awesome way to use these new properties? We’d love to hear about it in the comments!

References and Resources

(al)

CSS, CSS3,

↑ Back to top

ZURB is a close-knit team of interaction designers and strategists that help companies design better products & services through consulting, products, education, books, training and events. Since 1998 ZURB has helped over 75+ clients including: Facebook, eBay, NYSE, Yahoo, Zazzle, Playlist, Britney Spears, among others.

  1. 1

    Nice stuff :)

    -1
  2. 2

    Nice and Great! But on my core duo processor, effects in css3 are very slow…

    0
  3. 3

    I LOVE THIS !!!! CSS3 is awesomeness

    0
  4. 4

    Very nice tipps and infos about the things we are still waiting for since years. HTML5 in cooperation with CSS3 will definitely become The Future of Webdesign!

    -1
  5. 5
  6. 6

    Awesome!!!! Cheers for CSS3 and HTML5! Going to redesign my blog using CSS3, HTML5 and jQuery 1.4 :)

    0
  7. 7

    I just love this. More of this kind of tuts!

    Too bad CSS3 isn’t supported that well across all browsers and still a lot of ppl using stone age technology like IE.

    0
  8. 8

    Is there a javascript way to make it work on IE6/7 and other browsers that does not support native CSS3?

    0
  9. 9

    Nice, but browsers still strikes against xhtml 5 and css3.
    Sliding Vinyl Albums works only in Safari in my case.

    0
  10. 10

    this article is just awesome! Learn a lot! thanks :D

    1
  11. 11

    Great article, loved the vinil!
    Now we just have to wait for css3 to be compatible with all browser… ¬¬

    0
  12. 12

    Nice article. I look forward to incorporating some of these into some of my own Web sites.

    0
  13. 13

    Some great tricks there to learn, CSS3 and HTML5 is the way ahead, i just wish Microsoft would get on with catching up and just die completely.

    0
  14. 14

    yeah! css3 is totally bad ass! enjoyed this article!

    0
  15. 15

    That all-css vinyl is a stroke of genius. Too bad it only works in Chrome/Safari (I wish Mozilla would hurry up with css3 support already).

    I’ve been working on an iphone-only site and it is so liberating to know that I can use CSS3 without having to worry about how things would look in other browsers, one of my most satisfying projects to date :)

    0
  16. 16

    Don’t work in IE8 so what’s the point…

    0
  17. 17

    Yes, it’s good, but please, don’t use only -moz- and -webkit- CSS 3 properites, also include real CSS 3 properties, such as “border-radius:5px”.

    Why? Because new Opera 10.50 also supports many of them (border-radius, border-image, multiple backgrounds, etc.) and maybe somewhere in the future there will be a browser, which will support them (maybe IE9?), so be nice ;-).

    If you will use only -moz- and -webkit- properties, many coders/designers will learn to use them and they will never use real (and valid!) properties of CSS 3.

    (sorry for my bad english, hope you understand me…)

    0
  18. 18

    CSS3 IS TOTALLY BAD ASS! AMAZING!!

    can’t wait til it’s browser compatible (yawn)

    0
  19. 19

    I love CSS3!

    …and your postings too, ZURB!

    0
  20. 20

    Nice article but it is totally pointless introducing some of these techniques until it becomes a requirement for people to update their browsers past IE6. Not going to happen for a long long time.

    *sigh*

    0
  21. 21

    CSS 3 is absolutely awesome! If I wanna see what to do with CSS 3 I’m visiting ZURB, you do really cool stuff :) Thanks for this nice article!

    0
  22. 22

    Nice in theory, but pointless until the majority of web users are on a CSS3 compliant browser. Not to mention the animations are slow, choppy and generally ugly even on my i7.

    0
  23. 23

    this whole post is amazing. I especially like the coverage on the border-image property, which in my opinion will be an extremely useful feature. Thanks a bunch.

    0
  24. 24

    I love this stuff, but it may be a while before we can use it on large sites.

    0
  25. 25

    It looks nice, but I don’t like the syntax of the examples, all those -webkit etc, too vendor-specific.
    Also, those whining about people using IE should get a different job: most people use IE, those are your clients, visitors, readers, etc. You cater to their needs, not the other way around.

    0
  26. 26

    So let me get this straight…. The W3C has been preaching the separation of Content, Presentation and Behavior for years now and suddenly CSS gets a few new tricks and we are going to abandon the separation idea? Leave the animation to Javascript and stick with presentation ONLY in CSS. Just because something is shiny and new doesnt mean its the better way of doing things.

    0
  27. 27

    Unfortunately code probable won’t validate in the W3C right now if you use this type of CSS3 code.

    0
  28. 28

    Hey, the sliding vinyl didn’t work in any of my browsers. They either looked like moving squares, or just outlines of a circle (and didn’t animate). Great idea in principle though.

    0
  29. 29

    You can also go one step further, and mix CSS Animations/Transforms with JavaScript and achieve some great results: http://nouincolor.com/ElementStack/

    0
  30. 30

    very nice but irrelevant for web designers who wish to give a simple answer for cross-browsers not to mention that for Internet Explorer it would take 70 years to get to this technology.

    0
  31. 31

    Doesn’t seem to work on Firefox 3.5.5 on Mac OS 10.5.8

    0
  32. 32

    It’s all well & good showing off the new CSS 3 bits & bobs. Here in the real world of developing Websites to W3C, WAI & WCAG priority 1 & 2 CSS3 for clients it is not an option untill it is supported by all browsers as many of the values do not validate.

    Don’t get me wrong i would love to start using it & did but due t o the DDA law, W3C & WAi i had to strip it right back out again.

    I think CSS3 is amazing & will save me so much time one i can actually use it.

    0
  33. 33

    Sliding Vinyls don’t work on Firefox 3.6/W7

    0
  34. 34

    @Dkoon: alas you got it backwards, not straight. This was purely presentational effect, done purely in CSS. And by the way, there are W3C drafts for these.

    0
  35. 35

    Paulo de Tardo F. M.

    January 25, 2010 12:16 pm

    As Mugros told, on FF 3.6 the vinil doesn’t work. And I’m using a core duo processor too, like the Marcin Szewczyk, and was very slow… -.-

    0
  36. 36

    Great article, I really enjoyed the demos.

    I’m curious though… Is the -moz and -webkit stuff actually considered CSS3? I always looked at them as browser-specific hacks. Do you know if there will end up being a non-browser specific way of doing some of these techniques?

    0
  37. 37

    Nice post but this commenting system is whacked :(
    almost as bad as Seth’s Blog and there are none on that Over rated site
    It’s good to have good content
    It’s bad to not link to people after you think you all that :( LOL

    0
  38. 38

    Cool effect, but the results load slowly, and my FF isn’t rendering the angled text too well…

    0
  39. 39

    Here’s how to give vinyl grooves with (-moz-repeating-radial-gradient), for firefox 3.6…
    ul.tunes li div.album span.vinyl div{
    display: block;
    border: solid 1px black;
    width: 112px;
    height: 112px;
    -moz-border-radius: 59px;
    -moz-box-shadow: 0 0 6px rgba(0,0,0,.5);
    background:
    -moz-linear-gradient(top, transparent, transparent 1%, rgba(255,255,255,0.25) 50%, transparent 90%),
    -moz-repeating-radial-gradient(center, circle, transparent, rgba(0,0,0,1) 2px, transparent 3px),
    -moz-radial-gradient(center, circle, transparent, transparent 1%, rgba(0,0,0,1) 2.1%, rgba(0,0,0,1) 2.1%, rgba(0,0,0,1) 9%, rgba(28,28,28,1) 10%);
    }

    0
  40. 40

    Nice but useless since most browser don’t’ fully support CSS3 and doesn’t doesn’t look like they will for some time.

    0
  41. 41

    Am I wrong or is this a page about a company selling a product ? And incidentally mentionning a few techniques one has read elsewhere or that do not work that well ?

    Sorry for my poor english.

    0
  42. 42

    Great stuff !!!!!
    loved the Vinyle technique !!!

    0
  43. 43

    very cool thx zurb !

    0
  44. 44

    Since when are -moz und -webkit considered to be CSS3? Same old thing, like with the IE filters. They won’t validate and I myself don’t use code that will not validate. Webdesigners who used IE-filters got kicked in the a** for doing so and now you are selling Mozilla and Apple *hacks* as CSS3…?

    0
  45. 45

    Great stuff.

    0
  46. 46

    Nice collection! CSS3 looks awesome :)

    Btw: the “Sliding Vinyl Albums With CSS Gradients” didn’t work for me (Firefox 3.5.7).

    0
  47. 47

    full futuristic…ck ck ck
    css3 full featured…awesome

    0
  48. 48

    Mohammad Koubeissi

    January 25, 2010 5:22 pm

    This is great. Though I’m still not ready to use CSS3

    0
  49. 49

    Please future proof the code by also adding -o-* for Opera 10.5, and the CSS 3 proper names.

    0
  50. 50

    Just glancing at the source code shows that this has been put together terribly.
    I mean, come on.. No text content for anchor tags? Good job at alienating screen readers.

    0
  51. 51

    Awesome ideas for browsers that are capable of using these methods. As long as you consider fall back ideas for browsers that don’t support (RRRRR IE6/7/8) these are nice tips.

    0
  52. 52

    nice cool! i want to try this one!

    0
  53. 53

    cool! but in the demo page it says it works best in FF3.5 but its not :). In chrome the demo works best.

    0
  54. 54

    Nice article. But implementing CSS3 is too early, specially when no support for older browsers

    0
  55. 55

    go CSS3! amazing

    0
  56. 56

    Smashing magazine at it’s very best.

    0
  57. 57

    I don’t want to spoil the party, but aren’t you taking too much credit for other people’s work? See http://forabeautifulweb.com/blog/about/realigning_for_a_beautiful_web_using_html5_css_transforms_and_transitions/ for an explanation of the sliding disc example. Anyone interested in CSS3 must be familiar with Andy Clarke’s work and so you must have seen this example before…

    0
  58. 58

    My firefow 3.5.7 doen’t show the sliding record…CSS3 is not for today I think, too bad

    0
  59. 59

    Great fun but unusable for commercial projects for some time. Vinyl doesn’t work in Firefox – Andy Clarke did something similar but with much better degradation on “For a Beautiful Web”. I can accept a lower aesthetic experience in older browsers but not the lack of functionality (i.e. can’t play music or get further information), even in FF3.5

    0
  60. 60

    It all looks great, and easy to do. However it’s too bad it can’t be used for the next 12 to 24 months, or even longer! Only Safari 4 and Chrome support CSS3 and HTML5 (except GeoLocation) and Firefox 3.5 supports it almost, but IE (surprise!) and Opera are far behind.

    Ofcourse, it’s good to look in to the future for the possibilities, but to be realistic, the future is not now.

    0
  61. 61

    Another post with -webkit- only css? Wow.

    0
  62. 62

    All a bit pointless as it has such a limited audience. It’s not worth pushing the boundaries in such a way. Effects like this such be confined to flash.

    0
  63. 63

    This example doesn’t work in the latest Opera because of arguably bad coding. The author just includes -moz and -webkit and not -o which is for Opera. Ideally, anytime you do anything which requires browser based prefixes, you also include the normal value for future proofing.

    For example, if you use -moz-something and -webkit-somthing and you would also include -o-something for Opera and just ‘something’ for all other browsers in the future when such an implementation becomes standard.

    For the moment, it would be good if the author includes -o prefix to make it work in Opera, just like he has done for mozilla and webkit.

    0
  64. 64

    kristel van den Akker

    January 26, 2010 4:54 am

    I love the vinyl album one!

    0
  65. 65

    Yes, some of the demos only work in Safari, and the article is largely a puff piece for Noteable, but I learnt about how the border-image property works and so count that as a plus.

    0
  66. 66

    Like others have said, most of these techniques are not even viewable in IE6,7, or 8. The vein of most web designers’/developer’s existence. FF3.5 kinda works. Like others have said, this is too soon for these to come out. If you have potential clients who come to your site and 3/4 of them have IE, and you use a bunch of HTML5 and CSS3 techniques, the effect is going to be lost, broken, or look like crud. CSS3 and HTML5 I don’t see being accepted and making heavy use for at least 3-5 years.

    People are still using IE6 among other older browsers. Corporations, schools, non-profits, either have built security based off of old browser technology and policy does not allow upgrades, or don’t have the IT staff to keep up on the latest and greatest browsers.

    I can see these tricks being used on a web designer/developer site where people who’s lives surround the use of the web, upgrade their browsers regularly and will see the effects correctly.But not for normal everyday use on potential client sites or typical internet users. I won’t even touch HTML5 or CSS3 for client sites until there is more penetration of HTML5 and CSS3 compliant browser use.

    0
  67. 67

    Looks great! But I think the div “container” in the first guide needs to have “overflow: visible;” added. The photos get cut off in both Firefox and Safari where they reach outside the container.

    0
  68. 68

    Hmmm… looks awesome…
    But there’s heaps of awesome stuff out there…
    considering the author this article its more like a ZURB ad!

    Does anyone notice that ZURB only promotes their own stuff?!
    I appreciate their work, but they could just join the smashing network…
    rephrasing their own blogcontent doesn’t need a stand-alone article on SM.

    This is no different from link baiting in the comments… just slightly more work.
    SM used for ZURB’s SEO… pretty annoying…

    0
  69. 69

    Wow! …very cool.

    0
  70. 70

    Love the new CCS3 bag of tricks. Thanks!

    0
  71. 71

    No sliding record in FF and incredibly slow. I can’t see a point in using any of the animation properties – sure it’s fun, but is there an actual need. Also, I have to agree with Danny Calders.

    0
  72. 72

    very nice effects, shame they run so slowly, even on fast machines. in my case chrome is by far the quickest and only browser to do the effects smoothly. more then happy to stick with javascript for effects like this. will be handy for basic stuff though once the support is there.

    0
  73. 73

    I’m getting a little bored by reading articles that can’t be used in the real world. Time for Smashing to get out of the office and see what the rest of us is dealing with every day. As mentioned before: Theses examples gives an error in IE and that makes the whole article pointless…

    0
  74. 74

    How about providing examples which really work for most (not saying all) browsers. Otherwise, it’s useless. How one suppose to sell this stuff to a client? Or we are talking again about personal portfolios for front end developers, aren’t we?
    PS: this is already 5th or 6th time I saw 365 Days of Astronomy as example, reference, guide LOL. I got it, you like it, let’s move on! :)

    0
  75. 75

    Nice article but it would be good to see some credit to Andy Clarke as a source of inspiration.

    0
  76. 76

    Loved this article

    0
  77. 77

    So many ‘nice but pointless’ comments: just glad that development, advancement, and enhancement in web technology isn’t led by people like this.

    A few years ago, you couldn’t reliably use alpha transparent PNGs because IE6 didn’t support them. Now you can. At the moment, only Firefox, Webkit and the new Opera alpha support border-radius, but IE9 when it’s released will too; etc. etc.

    The point is, if these experimental features aren’t added by browser makers, and then tried out by adventurous developers willing to push the envelope, then they won’t ever see widespread take-up and we’ll be stuck using the same over-used techniques or overly complicated hacks that we’ve had to resort to.

    So big thumbs up from me to the Zurb crew. Just a couple of things that I noticed that seemed a bit off (in the latest Webkit nightly): the left and right polaroids are getting cut off by the container when enlarged; and also the descenders on the heading on the vinyl covers page also are getting cropped.

    0
  78. 78

    This makes me giddy like a school girl.

    0
  79. 79

    i like this a lot thanks

    0
  80. 80

    Firefox did a reasonable job of this although the scale transform could be smoother. It would be great if you could specify time splices etc like wpf.

    I’ll definitely consider using CSS3 transforms as opposed to Silverlight and xaml transforms.

    0
  81. 81

    CSS 3 is why i hate IE so, so, so much !
    I use it a very little on my website for shadows. That’s all i can do with so much IE visitors. Step after step, my website is better viewed with a webkit browser (and now FF3.6 since it supports gradients) and i hope some visitors spread the word.
    Also, i made an intensive 1-year campaign against IE6 2 years ago and it seems that a part of the returning visitors took care : i have far less IE6 visitors that many websites, according to statistics, and much more Safari and Chrome users.
    Also, i rarely test my creations with IE for 1 year now… i just don’t care, don’t get any complaints and have more visitors every month so… maybe i will just forget about any IE version in the next monthes.
    Ppl create Facebook acounts ? OK, downloading and installing a decent browser doesn’t take much more time than creating a FB account. If ppl really want to see your website, maybe they’re ready to take some efforts after all.

    0
  82. 82

    neat examples, but I think they take “drawing” the record takes CSS too far. It would be much easier to the do the same with an SVG created in inkscape.

    The css transforms and translate look a lot like SMIL
    http://en.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language

    Perhaps CSS3 is picking up where SMIL support is lacking?

    0
  83. 83

    Can you play the music in-screen on the the album covers?

    0
  84. 84

    Wow, some nifty tricks, border image is inspired!!

    0
  85. 85

    Here a nifty little landing page I just finished using the new hotness of css3 and a bit of html 5. Loving the new capabilities with this stuff. http://preview.tinyurl.com/yalej8w

    0
  86. 86

    This the album one doesn’t work in the latest firefox for me… Anybody else?

    0
  87. 87

    Check out:
    http://www.forabeautifulweb.com

    They use this effect but use an image so that there is some movement for FF and other browsers that can’t implement the full effect.

    0
  88. 88

    Awesome ..

    0
  89. 89

    One of the awesomeness of css3 is @font-face font embedding on web page. By this css3 rule, we can embed any fonts into our web page. Which can be natively render from browser.

    I have write nice tutorial based on implementation of @font-face css3 technique on my special font techniques related blog – Font Villa.

    http://fontvilla.wordpress.com/2011/01/24/use-any-font-in-wordpress-or-any-website/

    Hope this would be helpful to modern web designers.

    1
  90. 90

    Cool and inspiring!

    0
  91. 91

    Michael Ecklund

    May 31, 2011 11:12 am

    Came across this website via Google search query “css 3 image effects”.

    Just wanted to say, the “Polaroid” blurb was EXACTLY what I was looking for on a project. I plan on using the “Record” blurb on a future project as well. I am very excited to begin using more CSS 3 on all future projects.

    Thank you very much for this post.

    -Mike Ecklund
    http://www.MichaelBrentEcklund.com

    P.S. I bookmarked this website! Keep up the awesome posts!

    0
  92. 92

    Beautiful sexy singles, Meet hot girls best international horny matches.

    0
  93. 93

    Unknown message

    0
  94. 94

    срочно ищу активного реферала для участия в проекте. старт в марте. Заработок гарантирован.
    icq 228703685

    0
  95. 95

    You can’t separate pease from freedom because no one can be at peace unless he has his freedom.

    0
  96. 96

    Good point Smasty – there are still a few properties though where the final spec is up in the air, for example box-shadow will likely be deprecated in favor of drop-shadow. Good tip though and we’ll definitely bear that in mind going forward. Thanks!

    0
  97. 97

    It should work in all moden browsers but IE

    0
  98. 98

    Smashing Editorial

    January 25, 2010 4:40 pm

    John, we would love to allow people to post a link to their site if we didn’t have that many spammers trying to get a link juice from the site. Sorry.

    1
  99. 99

    Yeah very good point – it really is stretching the semantic definition of presentation if you include animation in there as well.

    I suppose that is the W3C reasoning? Animation is related to presentation rather than behaviour?

    0
  100. 100

    Animation is presentation. Javascript was used for this, because it wasn’t possible with CSS yet. Not CSS can be used for animation too.

    0
  101. 101

    True, shiny and new doesn’t mean better, but in this case the ease of use is definitely what makes it better.

    Also, I agree with Frank: animation is presentation. I mean, come on, that’s common sense.

    0
  102. 102

    This is ture but there only drafts not actually in place yet!

    0
  103. 103

    Same here. No luck in FF3.5 and IE8. Their “… works… pretty well in FF 3.5″ is more than exaggerated. IEs also come up with a JavaScript error on the ZURB page, which looks a bit bad.

    Call me old fashioned, but releasing anything fancy that’s still far from compatible is rather pointless.

    Otherwise: nice round-up, Smashing!

    0
  104. 104

    Not quite yet, but eCSStender.org looks like it might be possible soon…

    0
  105. 105

    Anthony Calzadilla

    January 26, 2010 8:43 am

    There are many ways to code websites using graceful degradation. Its up to us to shoe-horn these css3 technologies in to projects and be skilled enough to make sure they work for everyone. Just because clients tend to upgrade their technologies slower does NOT justify ignoring them until they’re in full adoption. You will only fall behind. Remember, your clients will not wait for you to get up to speed with new tech.

    0
  106. 106

    If you wait until everyone can see these in every browser, it will be 2945.

    Don’t get left behind because of those still using archaic browsers like IE6 can’t see them. Keep supporting the old browsers and see where it gets you in the long run.

    0
  107. 107
  108. 108

    So you are calling compatible IE8… shame on you!

    0
  109. 109

    Using FF 3.6 here.

    Gallery is getting cut off on either side.

    Album viewer doesn’t work at all.

    0
  110. 110

    Try Safari 4… works like a charm… http://www.apple.com/safari/download/

    0
  111. 111

    We actually are very familiar with his work, and he’s actually a pretty decent fan of our own articles http://twitter.com/Malarkey/status/6738404885. Our purpose for the vinyl wasn’t really to demo the animation – that’s been covered before. We wanted to explore gradients in depth and our way of doing that was to see what we could make. Andy’s discs are beautiful, which fits…they’re also just images. We do our own work ;)

    0
  112. 112

    oh, poppy-cock. The great thing about design in css3 is the decent degradation. Sure, the animations don’t work on IE or firefox, but the sites still look good, and if you have a browser that lets you see the animation, even better.

    0
  113. 113

    Agreed! Personally, I’ve never cared about IE, not just because it sucks, but because seriously, the people who use IE aren’t the kind of people who are going to care a great deal about the finer details of a quality website design.

    Anyone who uses IE probably doesn’t care that much about what their internet experience is going to be, so we should stop catering to them.

    0
  114. 114

    It’s sad to read that so many people are still missing the facts concerning IE6. Many big companies use IE6 and there employess CAN’T DOWNLOAD ANY OTHER BROWSER. To don’t care about IE6 is like telling an UPS employe that he/she can’t visit your gas station because their car is brown…

    0
  115. 115

    @Sandstream:
    Yeah well, at the same time, people at work are not supposed to browse the web, are they? :-/
    I guess your metaphor would be better with “To don’t care about IE6 is like telling an UPS employe that he/she can’t visit your drive-in cinema because their car is brown…”. Unless you’re in charge of the official drive-in cinema of UPS, I think it’s perfectly fine to forbid such cars to come in because they are too big.

    In other words: unless you’re publishing content/offering service dedicated to in-company use, I think it’s fine to say that you don’t have to care about IE6.

    Of course, I won’t say I don’t care *at all* and always check before putting newer versions online, but I don’t mind *at all* how the site looks like as long as the information is understandable.

    0
  116. 116

    Håvar I. Henriksen

    February 1, 2010 3:54 pm

    Firefox 3.6 does support CSS3 gradients, but the syntax is somewhat different from Safari’s syntax since it uses W3C’s proposal for CSS3 gradients, while Safari uses WebKit’s proposal atm. But I guess Safari/WebKit would catch up with W3C’s proposal soon…
    https://developer.mozilla.org/en/Using_gradients

    0
  117. 117

    Håvar I. Henriksen

    February 1, 2010 3:59 pm

    What’s the point in supporting IE8? This article is all about the future, to show what HTML5 would bring of exiting new features. This article is for web-developers, which don’t use outdated browsers like Internet Explorer. (Yeah I guess someone would say that since IE8 doesn’t support this, than it shouldn’t be used, but that’s just bullshit, IE users would just have to get used to getting a degraded version of the web).
    I guess IE would catch up sometime, maybe IE10 or IE11 wil support HTML5, while IE9 will have limited support. Maybe IE9 finally would get a much higher score on the Acid3 test, and maybe pass it? Who knows…

    0
  118. 118

    Vinyl doesn’t work for me either in latest FF. Polaroid looks like a great technique tho and I’m looking for an opportunity to use it in drupal flickr galleries.

    0
  119. 119

    this!

    Many of the comments here are like “you use IE so gtfo”. I think this attitude is completely wrong. IE is the most-used browser so deal with it. That doesn’t mean I like it – but it’s my daily business so I’ve to adapt.
    The internet is not for “this browser or that browser” (remember the “optimized for IE and 1024×768″ messages??) – the internet is for everyone – without exclusion. At least that is what we (as web developers) have been working on – to tear down boundaries, to open up. Or haven’t we??

    Of course CSS3 will be a great improvement and I am really looking forward to it – when it’s finished. Until then…

    PS: CSS gradients do only work in FF since version 3.6
    http://www.mozilla.com/en-US/firefox/underthehood/

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top