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 …
Tag Archives: css
Meny — An experimental CSS 3D fold-in menu
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. …
Continue reading “Meny — An experimental CSS 3D fold-in menu”
Firefox 16 and CSS Prefixes
jQuery Transit
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’ …
Vendor Prefix Drama
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 …
CSS Filters Demo
Convert Photoshop Layer Styles to CSS3 with CSS Hat
IE10 CSS Support
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. …
New Twitter Logo in CSS
GPU Accelerated CSS Filters in Chromium
img { -webkit-filter: sepia(100%) contrast(200%) blur(5px); } The current set of supported filters in Chromium include many that are familiar to web developers with image processing experience, such as sepia, saturation, opacity, and blurs. GPU acceleration of these filters brings their performance to the point where they can be used for animating elements in conjunction …