Banquet 43

790 views
717 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Banquet 43

  1. 1. AUTO TOOLS 由校 2010-10-11
  2. 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. 3. NEWS – NEW TWITTER
  4. 4. NEWS – GMAP新的公交系统中包含了发车时间以及发车频率。
  5. 5. NEWS – GOOGLE’S BIRTHDAY 1998年9月27,Google正式上线。http://www.guao.hk/posts/a-look-back-for-google-12th-birthday.html
  6. 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. 7. GENERATE -- STYLE css_style(“water”) class=“style_water”
  8. 8. GENERATE -- MODULE
  9. 9. VISUAL TOOLS – COLORFULL
  10. 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. 11. VISUAL TOOLS – REALITYEditor is backward
  12. 12. VISUAL TOOLS – COLOR PICKER HSB 0~100%
  13. 13. VISUAL TOOLS – COLOR PICKER
  14. 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. 15. VISUAL TOOLS – COLOR PICKERhttp://www.eyecon.ro/colorpicker/http://zh-cn.colourlovers.com/blog/2008/01/16/free-advanced-dhtml-color-picker
  16. 16. VISUAL TOOLS – COLOR PICKER http://raphaeljs.com/picker/
  17. 17. VISUAL TOOLS – HISTORYhttp://mugtug.com/sketchpad/
  18. 18. VISUAL TOOLS – CANCELhttp://mugtug.com/darkroom/
  19. 19. VISUAL TOOLS -- GRADIENThttp://westciv.com/tools/gradients/index.html
  20. 20. VISUAL TOOLS -- GRADIENT
  21. 21. VISUAL TOOLS -- GRADIENThttp://mugtug.com/sketchpad/
  22. 22. VISUAL TOOLS – SHADOWtext-shadow:7px 7px 10px #333333;http://westciv.com/tools/shadows/
  23. 23. VISUAL TOOLS – SHADOW
  24. 24. VISUAL TOOLS – SHADOW text-shadow: 7px 7px 10px #333333 ;
  25. 25. VISUAL TOOLS – SHADOW
  26. 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. 27. VISUAL TOOLS – TRANSFORMhttp://westciv.com/tools/3Dtransforms/index.html
  28. 28. VISUAL TOOLS – MARKhttp://www.flickr.com/photos/zhouqicf/4885373060/in/set-72157624491456532/http://www.bounceapp.comhttp://markup.io/
  29. 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. 30. VISUAL TOOLS – FORM
  31. 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. 32. VISUAL TOOLS直观 统一习惯高效 简单
  33. 33. ENDEND THINKS!

×