Your SlideShare is downloading. ×
Banquet 43
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Banquet 43

642
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
642
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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!

×