Andy Budd
Border radius
-webkit-border-radius: 30px;
Safari, Chrome, Webkit suppot it. Gecko does as well, but the syntax a bit different. IE 9 to support border-radius as well.
- Currently not supported in Internet Explorer
- Problems with images overlapping corners
Border image
border-image: url(border.png 25% 12% 30% 20%;
-webkit-border-image
-moz-border-image
An ad-hoc discussion of why vendor-specific extensions exist:
- Useful for testing out features, instead of a general release and then breaking general release codes.
- To become a proper standard, must exist with two different implementations.
Multiple background images
Example Silverback app
background-image: url(path), url(path);
background-position: 150% 0, 40% 0;
Older browsers get no background a'tall.
Borders and backgrounds are coming soon (general release).
Gradients and reflections
Buttons are generally bitmap images. Can now create a beautiful button using gradient and reflection purely in CSS.
-webkit-gradient(linear, left top, left bottom, from(#abe143), to(#cccccc));
-webkit-box-reflect: below 2px;
[Will need to do some demos of these things]
box-shadow
Box shadow property attaches one or more shadows to box. Offset, size, blur and spread. Can also do inset box shadows. Exactly the same as working with box shadows in Photoshop.
Example: http://2010.uxlondon.com/
Transforms
Can scale, rotate, flip, skew, etc. Can use translate to create animations/move over time
Demos: http://remysharp.com/demo/rubiks/
http://webkit.org/blog-files/leaves/
Questions
Q: Box-shadow has recently been removed from the spec, even though it has been implemented. Should we use it or not?
A: When younger, Andy Budd would have said, "If it's not in the spec, don't use it." Now, he's more tolerant. Not as impressed with the W3C as he once was. Doesn't always give designers what they need.
Molly: It has been difficult to get designers involved with the creation of the spec. As a volunteer, tech spec heavy group, difficult to keep designers active.
Q: Regarding animations, between JavaScript, Canvas, SVG and CSS, what do you think the best technology to bet on is?
A: Easiest is best, why Andy favors CSS.
Q: For individuals, CSS might be easy, but not so for large organizations where designers/developers have a large codebase to absorb. And what about object-oriented CSS? And mixins, variables, etc? (Nicole Sullivan's work)
A: Andy is opposed, because CSS is used more often by designers than programmers. Thinks it's an interesting concept, but not necessarily the answer.
Having gone from table-based design to CSS-based layouts, works well with 5-6 page templates, but with very large sites, doesn't necessarily scale. This is where an object-oriented CSS approach comes in use.
Andy thinks the framework is not useful. There is no one size fits all framework. He develops site-specific frameworks. A lot of libraries and components that are re-usuable, but specific to site.. Hates Blueprint, 960.
Q: Tips/techniques on testing?
A: Creates a central page that uses all components. Creates a type of regression testing. If change anything, can scan that page to see if anything is broken. Testing does not occur at the end of the process; testing should be occurring throughout the process. This includes cross-browser. Use VMware.