Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
614
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. AUTO TOOLS 由校 2010-10-11
  • 2. NEWS – IE9’S CV LISTDifferent from IE8, before adding a site to the IE9 CV List we verifythat it is incompatible with IE9. We also verify what Document Mode itworks best in. This will help us make sure that we ship with thesmallest 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 – REALITYCSS3 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 – REALITYEditor is backward
  • 12. VISUAL TOOLS – COLOR PICKER HSB 0~100%
  • 13. VISUAL TOOLS – COLOR PICKER
  • 14. VISUAL TOOLS – COLOR PICKERH Color. hsbToRgb( hsb ) R Color. rgbToHex( rgb ) HS Color. rgbToHsb( rgb ) G Color. hexToRgb( hex ) EB B X http://www.zhouqicf.com/demo/js/2010/color.js
  • 15. VISUAL TOOLS – COLOR PICKERhttp://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 – HISTORYhttp://mugtug.com/sketchpad/
  • 18. VISUAL TOOLS – CANCELhttp://mugtug.com/darkroom/
  • 19. VISUAL TOOLS -- GRADIENThttp://westciv.com/tools/gradients/index.html
  • 20. VISUAL TOOLS -- GRADIENT
  • 21. VISUAL TOOLS -- GRADIENThttp://mugtug.com/sketchpad/
  • 22. VISUAL TOOLS – SHADOWtext-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 – SHADOWy 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 – TRANSFORMhttp://westciv.com/tools/3Dtransforms/index.html
  • 28. VISUAL TOOLS – MARKhttp://www.flickr.com/photos/zhouqicf/4885373060/in/set-72157624491456532/http://www.bounceapp.comhttp://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 – FORMhttp://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. ENDEND THINKS!