The document provides information on various visual tools including tools for working with colors, shadows, transforms, gradients, forms, and more. URLs are provided for online tools that allow manipulating colors, gradients, shadows, transforms, and creating wireframes and prototypes. The last section expresses that visual tools should be intuitive, unified, efficient, and simple to use.

1. AUTO TOOLS
由校 2010-10-11

2. NEWS – IE9’S CV LIST
Different from IE8, before adding a site to the IE9 CV List we verify
that it is incompatible with IE9. We also verify what Document Mode it
works best in. This will help us make sure that we ship with the
smallest CV List possible at Beta, RC and RTM.

3. NEWS – NEW TWITTER

4. NEWS – GMAP
新的公交系统中包含了发车时间以及发车频率。

5. NEWS – GOOGLE’S BIRTHDAY
1998年9月27，Google正式上线。
http://www.guao.hk/posts/a-look-back-for-google-12th-birthday.html

6. GENERATE -- CSS3
<?php include_once “css_generate.php”?>
function css3_props($property, $value) {
$css3 = "-webkit-".$property.": ".$value.";n“
." -moz-".$property.": ".$value.";n“
." -o-".$property.": ".$value.";n“
." -khtml-".$property.": ".$value.";n“
." ".$property.": ".$value.";n";
echo $css3;
}
<link rel="stylesheet" href="styles/style.php"/>
<?php header('Content-type: text/css');?>
#box-shadow {
width: 200px;
height: 200px;
padding: 20px;
<?php css3_props("box-shadow", "#ccc 5px 5px 10px"); ?>
}

7. GENERATE -- STYLE
css_style(“water”) class=“style_water”

8. GENERATE -- MODULE

9. VISUAL TOOLS – COLORFULL

10. VISUAL TOOLS – REALITY
CSS3 is complex
{
transform:
scale(0.55)
rotateX(-42deg)
rotateY(9deg)
translate(368px,324px)
skew(11deg, 11deg)
scaleZ(2.6)
rotateZ(64deg)
translateZ(-176px);
transform-origin: 0% 0%;
}

11. VISUAL TOOLS – REALITY
Editor is backward

12. VISUAL TOOLS – COLOR PICKER
HSB
0~100%

13. VISUAL TOOLS – COLOR PICKER

14. VISUAL TOOLS – COLOR PICKER
H Color. hsbToRgb( hsb ) R Color. rgbToHex( rgb ) H
S Color. rgbToHsb( rgb )
G Color. hexToRgb( hex )
E
B B X
http://www.zhouqicf.com/demo/js/2010/color.js

15. VISUAL TOOLS – COLOR PICKER
http://www.eyecon.ro/colorpicker/
http://zh-cn.colourlovers.com/blog/2008/01/16/free-advanced-dhtml-color-picker

16. VISUAL TOOLS – COLOR PICKER
http://raphaeljs.com/picker/

17. VISUAL TOOLS – HISTORY
http://mugtug.com/sketchpad/

18. VISUAL TOOLS – CANCEL
http://mugtug.com/darkroom/

19. VISUAL TOOLS -- GRADIENT
http://westciv.com/tools/gradients/index.html

20. VISUAL TOOLS -- GRADIENT

21. VISUAL TOOLS -- GRADIENT
http://mugtug.com/sketchpad/

22. VISUAL TOOLS – SHADOW
text-shadow:7px 7px 10px #333333;
http://westciv.com/tools/shadows/

23. VISUAL TOOLS – SHADOW

24. VISUAL TOOLS – SHADOW
text-shadow:
7px
7px
10px
#333333
;

25. VISUAL TOOLS – SHADOW

26. VISUAL TOOLS – SHADOW
y
10*cos(45 ) ≈ 7px
Math.round(10*Math.cos(45*0.017453293))
135。 x
10*sin(45 ) ≈ 7px
Math.round(10*Math.sin(45*0.017453293))

27. VISUAL TOOLS – TRANSFORM
http://westciv.com/tools/3Dtransforms/index.html

28. VISUAL TOOLS – MARK
http://www.flickr.com/photos/zhouqicf/4885373060/in/set-72157624491456532/
http://www.bounceapp.com
http://markup.io/

29. VISUAL TOOLS – FORM
 Text  Search
 Checkbox  Phone
 Select  Url
 Radio  Email
 Textarea
 DataTime
 Button(buttonsubmi
treset…)  Date
 …  Month
 Week
 Time
 Range
 Number
 Range
 Color
 …

30. VISUAL TOOLS – FORM

31. VISUAL TOOLS – FORM
http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
http://demo.zhouqicf.com/js/2010/form_amount.html

32. VISUAL TOOLS
直观 统一
习惯
高效 简单

33. END
END THINKS!