Auto tools

474 views

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
474
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Auto tools

  1. 1. 2010-10-11 AUTO TOOLS You Xiao zhouqicf@gmail.com http://www.zhouqicf.com
  2. 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. 3. GENERATE -- STYLE PHOTOSHOP 样式 CSS ( css_style(“water”) class=“style_water” )
  4. 4. GENERATE -- MODULE
  5. 5. VISUAL TOOLS – COLORFULL border background color Box-shadow gradient 2d-transform 3d-transform Text-stroke box-reflectList-style Masks outline
  6. 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. 7. VISUAL TOOLS – REALITY Editor is backward
  8. 8. VISUAL TOOLS – COLOR PICKER HSB 0~100%
  9. 9. VISUAL TOOLS – COLOR PICKER
  10. 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. 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. 12. VISUAL TOOLS – COLOR PICKER http://raphaeljs.com/picker/
  13. 13. VISUAL TOOLS – HISTORY http://mugtug.com/sketchpad/
  14. 14. VISUAL TOOLS – CANCEL http://mugtug.com/darkroom/
  15. 15. VISUAL TOOLS -- GRADIENT http://westciv.com/tools/gradients/index.html
  16. 16. VISUAL TOOLS -- GRADIENT
  17. 17. VISUAL TOOLS -- GRADIENT http://mugtug.com/sketchpad/
  18. 18. VISUAL TOOLS – SHADOW http://westciv.com/tools/shadows/ box-shadow:7px 7px 10px #333333;
  19. 19. VISUAL TOOLS – SHADOW
  20. 20. VISUAL TOOLS – SHADOW box-shadow: 7px 7px 10px 10px #333333 ; ?
  21. 21. VISUAL TOOLS – SHADOW
  22. 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. 23. VISUAL TOOLS – TRANSFORM http://westciv.com/tools/3Dtransforms/index.html
  24. 24. VISUAL TOOLS – MARK http://www.bounceapp.com http://markup.io/
  25. 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. 26. VISUAL TOOLS – FORM
  27. 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. 28. VISUAL TOOLS 习惯 统一直观 高效 简单
  29. 29. END ENDTHINKS!

×