Some really nice stuff. Be sure to give the demos a spin. Original Hover Effects with CSS3 →
Tag Archives: css
-prefix-free
CSS4, what can we expect?
The CSS4 Selectors spec has already seen a large number of revisions since level 3. As it is still the first draft of the spec, it will likely change in numerous ways before it becomes a recommendation itself and there are browser implementations. Lets have a quick dig into the draft and see what has …
CSS 3D transformations in Firefox Nightly
Two years after CSS 3D got introduced in Webkit Nightlies: When the first 3D transformations in CSS got support on Webkit browsers people got incredibly excited about them. Now that they have matured we also support 3D CSS in Firefox. Only in Firefox Nightlies for now (Firefox 10). CSS 3D transformations in Firefox Nightly →
Animate.css
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the …
CSS Shaders
CSS shaders “define a filter effects extensibility mechanism and provide rich, easily animated visual effects to all HTML5 content.” They work particularly well with CSS animations and CSS transitions, but they even work on video & SVG animations. Introducing CSS Shaders: Cinematic effects for the web →
CSS Regions and CSS Exclusions
CSS3 Image Styles
CSS3 Image Styles holds a set of CSS3 style rules to set some nice effects on images: Circle, Card, Embossed, Cutout, Morphing, Glowing, etc. The tad of Javascript used to dynamically enhance all the images automagically looks awfully a lot like a piece I knocked up a while ago 😉 CSS3 Image Styles →
SMACSS
TransformJS
Transforming elements via Javascript in all browsers at once can be a real pain in the ass (think vendor prefixes). Enter TranformJS: 2D and 3D transforms as regular CSS properties you can set using .css() and animate using .animate() In code that basically means you can now use this: $(‘#test’).animate({ translateY:’+=150′, scale:’+=2′, rotateY: ‘+=’+(2*Math.PI), rotateX: …