1. 2010-10-11
AUTO TOOLS
You Xiao
zhouqicf@gmail.com
http://www.zhouqicf.com

2. 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"); ?>
}

3. GENERATE -- STYLE
PHOTOSHOP 样式
CSS
( css_style(“water”) class=“style_water” )

4. GENERATE -- MODULE

5. VISUAL TOOLS – COLORFULL
border
background
color Box-shadow
gradient
2d-transform
3d-transform
Text-stroke
box-reflectList-style
Masks
outline

6. VISUAL TOOLS – REALITY
{
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%;
}
CSS3 is complex

7. VISUAL TOOLS – REALITY
Editor is backward

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

9. VISUAL TOOLS – COLOR PICKER

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

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

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

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

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

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

16. VISUAL TOOLS -- GRADIENT

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

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

19. VISUAL TOOLS – SHADOW

20. VISUAL TOOLS – SHADOW
box-shadow:
7px
7px
10px
10px
#333333
;
?

21. VISUAL TOOLS – SHADOW

22. VISUAL TOOLS – SHADOW
135。
x
y
水平偏移量：
10*cos(45°) ≈ 7px
Math.round(10*Math.cos(45*0.017453293))
垂直偏移量：
10*sin(45°) ≈ 7px
Math.round(10*Math.sin(45*0.017453293))

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

24. VISUAL TOOLS – MARK
http://www.bounceapp.com
http://markup.io/

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

26. VISUAL TOOLS – FORM

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

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

29. END
ENDTHINKS!