auto tools
DESCRIPTION
TRANSCRIPT
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"); ?> }
GENERATE -- STYLE
PHOTOSHOP 样式 CSS ( css_style(“water”) \ class=“style_water” )
GENERATE -- MODULE
VISUAL TOOLS – COLORFULL
border
backgroundcolor Box-shadow
gradient
2d-transform
3d-transform
Text-stroke
box-reflectList-style
Masks
outline
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
VISUAL TOOLS – REALITY
Editor is backward
VISUAL TOOLS – COLOR PICKER
HS
B0~360度
0~100%
0~100%
VISUAL TOOLS – COLOR PICKER
VISUAL TOOLS – COLOR PICKER
HSB
RGB
Color. hsbToRgb( hsb )
Color. rgbToHsb( rgb )
http://www.zhouqicf.com/demo/js/2010/color.js
HEX
Color. rgbToHex( rgb )
Color. hexToRgb( hex )
VISUAL TOOLS – COLOR PICKER
http://www.eyecon.ro/colorpicker/
http://zh-cn.colourlovers.com/blog/2008/01/16/free-advanced-dhtml-color-picker
VISUAL TOOLS – COLOR PICKER
http://raphaeljs.com/picker/
VISUAL TOOLS – HISTORY
http://mugtug.com/sketchpad/
VISUAL TOOLS – CANCEL
http://mugtug.com/darkroom/
VISUAL TOOLS -- GRADIENT
http://westciv.com/tools/gradients/index.html
VISUAL TOOLS -- GRADIENT
VISUAL TOOLS -- GRADIENT
http://mugtug.com/sketchpad/
VISUAL TOOLS – SHADOW
http://westciv.com/tools/shadows/
box-shadow:7px 7px 10px #333333;
VISUAL TOOLS – SHADOW
VISUAL TOOLS – SHADOW
box-shadow: 7px 7px
10px 10px #333333 ;
?
VISUAL TOOLS – SHADOW
VISUAL TOOLS – SHADOW
135。10px
x
y
水平偏移量：10*cos(45°) ≈ 7pxMath.round(10*Math.cos(45*0.017453293))
垂直偏移量：10*sin(45°) ≈ 7pxMath.round(10*Math.sin(45*0.017453293))
VISUAL TOOLS – TRANSFORM
http://westciv.com/tools/3Dtransforms/index.html
VISUAL TOOLS – MARK
http://www.bounceapp.comhttp://markup.io/
Text
Checkbox
Select
Radio
Textarea
Button(button\submit\reset…)
…
VISUAL TOOLS – FORM
Search
Phone
Url
DataTime
Date
Month
Week
Time
Range
Number
Range
Color
…
VISUAL TOOLS – FORM
VISUAL TOOLS – FORM
http://demo.zhouqicf.com/js/2010/form_amount.htmlhttp://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
VISUAL TOOLS
习惯统一直观
高效 简单
END
END THINKS!