CSS – Horizontally center a row of floated elements

Despite the boards being full of people insisting it’s impossible, you can center a row of floated elements even with fluid (unknown) width. The process is: 1. Wrap the container in an element with: float: right; position: relative; left: -50%; 2. On the main container, add the following: position: relative; left: 50%; That’s really all […]

CSS3 – using box-shadow to create double border effects

CSS3 box-shadow (and it’s vendor-specific subsets) can be used with 0 blur to create an additional inner or outer border along one side. This can be useful for creating inset or outset type effects. The standard CSS border-style declaration of ‘double’ produces a single line of the defined color and a single line that’s transparent […]

CSS Border Radius Syntax

when all corners are the same, it’s pretty straightforward: –border-radius: value; but standard CSS shorthand can be inconsistent, because the draft specifies two values for the property (one for each axis of the curve). * mozilla “opted out”, and doesn’t allow irregular curves, but does allow shorthand. when setting individually, again mozilla is the exception. […]

CSS – Font Face

The upshot of using CSS @font-face for custom fonts: First, grab your font in all possible formats. Font Squirrel has a generator: http://www.fontsquirrel.com/fontface/generator Put those files somewhere relative to your CSS file. For this example, I’ll use font/ in the same folder as the CSS. @font-face { font-family: ‘Font Name’; src: url(‘fonts/font-name.eot’); src: url(‘fonts/font-name.eot?#iefix’) format(’embedded-opentype’), […]

CSS Reset

there are several good css resets out there – here’s one that is a combination of a couple of the more modern versions (I can’t remember off the top of my head who the original authors were – feel free to comment if you know and i’ll update the credit accordingly), with a couple tweaks […]

CSS – cross-browser opacity with fallbacks

AFAICT, this should cover pretty much everything -khtml-opacity: .5; // old safari -moz-opacity: .5; // old firefox -ms-filter: alpha(opacity=50); // new ie -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); // new ie filter: alpha(opacity=50); // old ie opacity: 0.5; // modern gecko and webkit UPDATE: seems like not a lot of old Fx or pre-webkit safari browsers around anymore… And […]