A corner ad should be triangular, and so should its clickable area. CSS3 now makes that possible.
At some point, you may have a situation where you want to center multiple elements (maybe
<div>elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add
margin: autoand a fixed width to the element you want to center, and the margins will force the element to center.
There really should be a similar simple way to center multiple elements evenly spaced.
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.
The whole idea is to use a combination of subtle effects to create a three dimensional object. Mike Rundle covers some of the ideas used here in his post about subtlety in interfaces. I’m hoping to expand a bit more on that. The idea is that:
- The button is set into the canvas.
- The texture of the button is different from the canvas and the surface is slightly raised.
- And the text of the button is pressed into it.
This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.
Admit it, even though rounded corners are widely seen as overused, you love playing with
border-radius. A common complaint is that you can’t use that CSS3 property on images. Define any value, and the images will still display as nature intended: straight corners. For a project I’m working on, it would’ve been really nice having certain images displayed with rounded corners, so I started looking at the options…
This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers.
While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone.