Posts Tagged ‘CSS3’

We are pleased to present below all posts tagged with ‘CSS3’.

CSS3 TransitionsThank God We Have A Specification!

This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed.

Thank God We Have A Specification!

Alex MacCaw has already written a very insightful and thorough article on “All You Need to Know About CSS Transitions.” Whereas Alex wrote about achieving particular effects, I’m going to talk about the technical background, especially the JavaScript-facing side. Pitfalls — this article is all about pitfalls.

Read more...

Sneak Peek Into The Future: CSS Selectors, Level 4

The buzzword “CSS4” came out of nowhere, just as we were getting used to the fact that CSS3 is here and will stick around for some time. Browser vendors are working hard to implement the latest features, and front-end developers are creating more and more tools to be able to work with the style sheets more effectively.

Sneak Peek Into The Future: Selectors, Level 4

But now, on hearing about CSS4, you might ask, “Hey, what about CSS3? Is it over already?” We’ve been working hard to spread the goodness of CSS3, and now it’s obsolete?

Read more...

Let’s Play With Hardware-Accelerated CSS

If you’re a developer of mobile Web apps, then you’ve heard this before: Native apps perform better than Web apps. But what does “perform better” mean? In the context above, performance is usually about measurable aspects such as loading time and responsiveness to user interaction. But more often than not, statements about performance lie within the realm of animations and transitions and how smooth they are.

Let's Play With Hardware-Accelerated CSS

We humans tend to perceive a transition as being “smooth” when the number of frames per second (FPS) drawn on the screen is above a certain cognitive threshold — about 30 or so, arguably.

Read more...

Free CSS Buttons SetFree Zocial Button Set: Social CSS3 Buttons

The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear.

Zocial Button Set: 72 CSS3 Buttons

The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.

Read more...

A Pure CSS3 Cycling Slideshow

Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

Pure CSS3 Cycling Slideshow

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.

Read more...

Beercamp: An Experiment With CSS 3D

This year’s experiment: a 3D pop-up book á la Dr. Seuss. If you haven't seen it yet, hop on over and take a look. The website was a test to see how far SVG and CSS 3D transforms could be pushed. I learned a lot in the process and wanted to share some of the techniques that I found helpful when working in 3D space.

Beercamp: An Experiment With CSS 3D

Before we jump in, please note that explaining everything about the website without boring you to death would be damn near impossible. For your sake and mine, I’ll provide just brief takeaways. As you skim through the code snippets, be aware that jQuery is being used and that a lot of code has been removed for simplicity (including browser prefixes).

Read more...

Adventures In The Third Dimension: CSS 3D Transforms

Back in 2009, the WebKit development team proposed a new extension to CSS that would allow Web page elements to be displayed and transformed on a three-dimensional plane. This proposal was called 3D Transforms, and it was soon implemented in Safari for Mac and iOS. About a year later, support followed for Chrome, and early in 2011, for Android. Outside of WebKit, however, none of the other browser makers seemed to show much enthusiasm for it, so it’s remained a fairly niche and underused feature.

Adventures In The Third Dimension: CSS 3D Transforms

That’s set to change, though, as the Firefox and Internet Explorer teams have decided to join the party by implementing 3D Transforms in pre-release versions of their browsers. So, if all goes according to plan, we’ll see them in IE 10 and a near-future version of Firefox (possibly 10 or 11, but that’s not confirmed yet), both of which are slated for release sometime this year.

Read more...

↑ Back to top