Create your own SVG drawings (such as Twitter/Facebook/etc. logos), upload them to IcoMoon and voilà: you have a custom webfont you can use. If you want to have more control, you can do it manually if you like. IcoMoon →
Tag Archives: css3
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’ …
CSS Filters Demo
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 Filters Demo →
Convert Photoshop Layer Styles to CSS3 with CSS Hat
CSS Hat turns Photoshop layer styles to CSS3 with a click Now $19.99 (regular price $29.99) CSS Hat → CSS Hat Example Output →
CSS 3D Earth
Using CSS 3d to create an earth with shading and layers. It is not as good as using WebGL but it theoretically works on iPad. CSS 3D Earth →
CSS3D Clouds
An experiment on creating volumetric 3D-like clouds with CSS3 3D Transforms and a bit of Javascript. Stunning. Based upon MrDoob’s WebGL Clouds CSS3D Clouds →
The Box
Neat 3D scene implementation, all done via JavaScript and (quite few) CSS3 3D transforms. The Box → (via The Mozilla Dev Derby (March 2012))
CSS/JS 3D Image Transitions
3D Image Transitions → (via The Mozilla Dev Derby (March 2012))
Paperfold CSS
I’m currently working ‘buddycloud’, a federated social network. This is a proposal for a visual folding-effect for hidden comments. The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space. Paperfold CSS — Fold divs like paper →
ʀoToᴙ.js
rotate3d manipulation library – enables manipulation of DOM nodes on three rotation axis, as if it was wrapped in a virtual trackball ʀoToᴙ.js demo → ʀoToᴙ.js source (GitHub) →