GO AWAY
orHTML/CSS + media queries (no images, no JS*) this is a simple interactive experiment with responsive design techniques.
Some great, transformative, CSS3 animations activated by responsive/adaptive media queries. Take a look.
Reblogged Via: decodering Source: thismanslife.co.uk
A really badass jQuery plugin that allows you to create zoomable elements on your web page. They can also change the perspective, scale, and rotation of the entire layout as well. I have yet to see how this handles raster images, but a great resource nonetheless. They have documentation and in-page demos on the site, but here’s a list of sites the page provides using the plugin effectively:
Reblogged Via: Draftfcb Dev Group Links Source: thedevgroupVery creative use of Zoomooz in this Frech presidential campaign web site!
Aza Raskin prototyping with Zoomooz and showing how to live code in front of seventy-five people.
A photo gallery using Zoomooz for Antoine Giraldo.
A zooming comic experiment by Richard Milewski.
A virtual educational collage tool for classrooms that uses Zoomooz by Opinsys. Just create a new “pahvi”, add some objects and browse in “presentation mode”.
Simple HTML Slides by Richard Milewski uses Zoomooz.
A (slightly outdated) Zoomooz tutorial on Design Shack has a nice thumbnail gallery example.
orSo it’s my 2,000th post and I have been working hard to do something special. So while I’m on this experimentation kick, I decided put my CSS3 skills to the work and create a simple animation using an old illustration of myself from my 600th blog post. You’re definitely gonna want to see this in Webkit or Mozilla browsers only. Getting the delay times right was tricky because I had to set the start for all the elements off the page (which leaves no safety net for older browsers not supporting animation).
Also, I had to make use of the “animation-fill-mode” property using the value “forwards”. This makes sure that once the animation has completed, it uses the CSS properties of the last frame as the new values.
Anyway, thanks to all my new follower and veteran followers alike. This blog does not feel like a chore thanks to your readership. Anyway, check out the animation, and use the social bar to share it to all your homies.
Source: dl.dropbox.com
orFINALLY. Something that takes the annoying production work out of making css arrows. Best believe I’ll be using this. Bookmarked.
Source: cssarrowplease.com
orDamn. This is cool. I’m gonna have to start a sandbox myself to start playing like this guy. You’re gonna have to view this in webkit only browers.
Reblogged Via: simurai Source: lab.simurai.comSmall demo of animated CSS Mask Icons. Note: It uses the non-standard CSS masks that are only implemented in WebKit without a spec. I don’t wanna go into discussing if that’s ok or not, instead I just like to experiment with them because I think you can do cool stuff and hopefully one day it will become standard.
Using CSS masks for icons would have the benefit of being able to create a large icon-set and easily swap textures, colors, shadow effects. And also animate them. Basically everything you can do with CSS backgrounds. It could also be used for other stuff like tooltips, speech bubbles, funky shaped buttons and so on.
The basics of this demo goes something like this:
- Add a texture and gradients to your element’s background.
- Use SVG (or PNG) as mask-image to “cut out” the rectangle into the desired shape.
- Use a second shape together with mask-composite to either add (source-over -> robot), subtract (source-out -> apple bite, cloud arrow) or intersect (xor -> cloud arrow while pressing) with the first mask.
- Add some transitions/animations to the mask-position.
So ya, basically you can mask a mask, combine multiple masks or even do the opposite depending if they overlap or not. In total there are a dozen mask-composite options that I’m not quite sure what the exact difference is. I just tried them all till it worked like I wanted. ;-)
Couple notes:
- Pseudo elements (highlight on the cloud) also gets masked.
- CSS filters (Chrome Canary, WebKit nightly) work great with CSS masks, unlike box-shadows. See how the drop-shadow follows the contures of the SVG shape.
- For better cross-browser support you could just animate multiple backgrounds (background-composite works too), but then you loose the ability to use a seamless texture.
- I’m pretty sure, you could do all the effects with SVG alone. It has masks, drop-shadows, animation.. I just haven’t really dugg myself deep enough into them.
- Since it uses mask-position to animate the masks, you can’t rotate them, which is a little limiting.
See demo (WebKit)
