Recommended
More Related Content
Similar to Future of images in the web
Similar to Future of images in the web (20)
More from Roman Trukhin
More from Roman Trukhin (12)
Recently uploaded
Recently uploaded (20)
Future of images in the web
- 1. The future of images in the web
- 2. Agenda B.C. - bitmap, gif, jpeg, <img> A.D. - vector, svg Contemporary - HTML5/CSS3 Questions
- 3. B.C the first ever image in the web
- 4. B.C inventing of <img> tag
- 5. B.C formats JPEG color and brightness gradients, 32bit GIF full transparency, animation, lossless, 8bit PNG lossless, semi transparency, gradients, no animation, 32bit BMP lossless, as container for JPEG or PNG, 32bit
- 8. A.D. Vector Graphic: why vector?
- 9. Contemporary era: <canvas> <script> function draw() { var canvas = document.getElementById('canvas').getContext ("2d"); canvas .beginPath(); canvas .arc(200, 200, 100, 0, Math.PI*2, true); canvas .closePath(); canvas .fill(); } </script> <body onload="draw()"> <canvas id="canvas" width="300" height="300"></canvas> </body>
- 10. Contemporary era: CSS3 prefixes background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to (#aa1317)); background: -webkit-linear-gradient(top, #ed1c24, #aa1317); background: -moz-linear-gradient(top, #ed1c24, #aa1317); background: -o-linear-gradient(top, #ed1c24, #aa1317); background: -ms-linear-gradient(top, #ed1c24, #aa1317); background: linear-gradient(top, #ed1c24, #aa1317); -pie-background: linear-gradient(#ed1c24, #ac1317);
- 11. Contemporary era: Javascript libs: - Raphael (http://raphaeljs.com/) - GreenShock (http://www.greensock.com/get-started-js/)
- 12. Contemporary era drawing using pure css Every pixel as linear-gradient (http://bolknote.ru/2011/11/12/~3478/#00)