Posts Tagged ‘CSS3’

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

Applying Transformations To Responsive Web Design

To most Web developers, it sounds controversial until you hear the punchline: Last summer, the developers in charge of Google’s Chrome browser floated a proposal that went virtually unnoticed by the technology press, which was to remove support for an established W3C standard that every other browser vendor still supports.

Applying XSL Transformations For Responsive Web Design

The standard in question? Extensible Stylesheet Language Transformations, otherwise known as XSLT. In reaction to this news, most Web developers would likely shrug and say “So what?” That’s unfortunate. Transformations are a simple yet powerful technique for separating content and presentation in Web applications.

Read more...

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...

↑ Back to top