Experimental CSS 3D scroll behavior
JS code needed wrapped as a jQuery plugin.
A rather geeky/technical weblog, est. 2001, by Bramus
Experimental CSS 3D scroll behavior
JS code needed wrapped as a jQuery plugin.
Safari 6 and Chrome 21 added vendor-prefixed support for the proposed CSS4 image-set specification. This proposed specification is designed to support displays with different pixel densities (read: retina displays).
background-image: url(image.jpg);
background-image: -webkit-image-set(url(image.jpg) 1x, url([email protected]) 2x);
/* Also include other prefixed versions of this ... */
background-image: image-set(url(image.jpg) 1x, url([email protected]) 2x);
Safari 6 and Chrome 21 add image-set to support retina images →
Related: High DPI images for variable pixel densities →
A UI experiment with a 3D fold-in menu. Move your mouse to the left edge of this page — or swipe in from the left edge if you’re on a touch device — to expand the menu.
A refreshing alternative to the already overly common left nav flyout which Facebook introduced in their mobile app.
Meny Demo →
Meny Source (GitHub) →
Related: Responsive navigation patterns
In the upcoming Firefox 16, which reached the Aurora status today, a major enhancement is the unprefixing of several stable CSS features.
Animations, Transitions, Transforms, Gradients, and calc()
have become unprefixed.
jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.
Include the plugin and you can use code like this to perform transformations:
$("#box").css({ x: '30px' }); // Move right
$("#box").css({ y: '60px' }); // Move down
$("#box").css({ translate: [60,30] }); // Move right and down
$("#box").css({ rotate: '30deg' }); // Rotate clockwise
$("#box").css({ scale: 2 }); // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] }); // Scale horiz and vertical
$("#box").css({ skewX: '30deg' }); // Skew horizontally
$("#box").css({ skewY: '30deg' }); // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });
To animate use use $.fn.transition
instead of jQuery’s $.fn.animate
:
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast'); // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in'); // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..}); // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..}); // everything
Works fine in all browsers that support it (be it prefixed, or unprefixed)
Note that this plugin will become obsolete once the new animation code lands in jQuery 1.8
Grab a bucket of popcorn and start reading. “YHWH” clearly doesn’t get it (UA sniffing, only prefixed properties, inline JS, …)
Hundreds of pages in our 16 plus domains DO NOT fade images on mouseover anymore, because the -moz-opacity:0.7 reading function is GONE.
Seems like he’s also forgetting the fact it only works used to work in Firefox and none of the other browers out there. #facepalm
Related: JSDrama
Single page demoing all the new CSS filter
effects (grayscale, sepia, hue-rotate, invert, brightness, contrast, blur, saturate, drop-shadow & opacity). Not to be confused with the legacy IE filter
CSS property, which has been deprecated.
Use Chrome or IE10 dev preview.
CSS Hat turns Photoshop layer styles to CSS3 with a click
Now $19.99 (regular price $29.99)
The following W3C draft standard features match these criteria and IE10 now supports them in their unprefixed form:
- Gradients (CSS Image Values and Replaced Content)
- CSS Animations
- CSS Transitions
- CSS Transforms
font-feature-settings
property (CSS Fonts)- Indexed Database API
- Timing control for script-based animations (
requestAnimationFrame
)IE10 also supports the following W3C draft standards in vendor-prefixed form.
Looks like IE10 is on the right track 🙂
Even though I don’t like these “X’s logo in CSS” things (CSS wasn’t made for that), I do like this one as it clearly shows you the idea (being circles) behind it.
Also: if you rotate it 90°, it’s Batman!