nfg_Day5

Day 5
<< main | course director notes


 * [|4. Ways to display an image]**

code <!doctype html>
 * 3. position and z-index review**

 body{ background:#aaaaaa; }

.box{ width:150px; height:150px; position:absolute; -moz-border-radius:75px; -webkit-border-radius:75px; opacity:0.9; }

left:100px; top:100px; background:red; /*z-index is 0 by default*/ }
 * 1) boxred{

left:150px; top:150px; background:blue; z-index:1; }
 * 1) boxblue{

left:125px; top:125px; background:green; z-index:2; }
 * 1) boxgreen{

code

code .example{ -webkit-animation:mymove 0.2s infinite; -moz-animation:mymove 0.2s infinite; }
 * 2. CSS transforms**

@-webkit-keyframes mymove { from { left:210px; } to { left:253px; } }

@-moz-keyframes mymove { from { left:210px; } to { left:253px; } } code

1. PSD original master file 2. PNG transparency ("alpha channel") 3. JPG photos, complex colour images 4. GIF animation, simple images
 * 1. image types**
 * highest quality, lowest compression
 * lowest quality, highest compression