Auto tools
- 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” )
- 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/
- 29. END ENDTHINKS!