Pure CSS Coke Can. (versión en castellano abajo) After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image). With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop: a Coke can - my favourite drink.
Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little - below 5kb - and easy to understand I hope. Castellano. The mesmerizer. 10 HTML5 Demos to Make You Forget About Flash. You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have a place, especially for developing complex games and rich internet applications. If you’ve yet to see what HTML5 can do, I’ve rounded up 10 demos that show off some of its capabilities. So what do you think – will HTML5 replace Flash? Canvas Minimal Particle Animation CanvasMol Flickr and Canvas in 3D Cloth Simulation etchaPhysics Google Images Gift Box – CSS 3D example Liquid Particles HTML5 Canvas Nebula Ball Pool Bomomo About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience.
Related Posts 1139 shares 20 Fresh CSS3 Tutorials The design industry is probably one of the fastest changing and growing. Read More 559 shares Developing Streamlined and Efficient CSS Styles. 50 impressive CSS drawings « Web Design Blog – WebDesignShock. As Wikipedia says, Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language.
Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL. But beyond the web design, you can use CSS to create some pretty cool graphics, as the ones we show you below. 1. 3D CSS Puzzle by Stu Nicholls This puzzle was made completely with CSS, must have taken a lot of time. 2. Homer CSS by Roman Cortes This guy knew about the hidden potential inside CSS, and use to draw a simple but lovely character of all. 3. A simple pencil that draws a horizontal line. 4. A new year greeting can be made in CSS, easy way. 5. The beautiful American flag, CSS version. 6. iPod with CSS3 A realistic iPod made with CSS3, pretty cool graphic. 7. 8.
This raindrop is just awesome. 9. 10. 11. 12. 13. 14. 15. 16. 17. Data-visualisation. Dancing Typography / Never Gonna Give You Up.