Upload
trukhin-roman
View
139
Download
1
Embed Size (px)
DESCRIPTION
Vision of using images in the web
Citation preview
The future of images in the web
Agenda
B.C. - bitmap, gif, jpeg, <img>A.D. - vector, svgContemporary - HTML5/CSS3Questions
B.Cthe first ever image in the web
B.Cinventing of <img> tag
B.Cformats
JPEG color and brightness gradients, 32bitGIF full transparency, animation, lossless, 8bitPNG lossless, semi transparency, gradients, no animation, 32bitBMP lossless, as container for JPEG or PNG, 32bit
B.Ccolor depth
A.D.Vector Graphic
SVG
A.D.Vector Graphic: why vector?
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>
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);
Contemporary era:Javascript libs:
- Raphael (http://raphaeljs.com/)- GreenShock (http://www.greensock.com/get-started-js/)
Contemporary eradrawing using pure css
Every pixel as linear-gradient(http://bolknote.ru/2011/11/12/~3478/#00)