February 2012
10 posts
2 tags
Show/Hide advert
Aren’t CSS transitions lovely? They make changing something simple like position values on hover into some thing really pretty. This site does it really nicely…
On github…
2 tags
Mmm stampy
So, decided to have a go with border-image after this turned up in my RSS feed, and I think it turned out ok, but what the heck’s going on with border-image-slice?
Yes, I should have read the spec and examples a little more carefully before setting out on this, but I can’t think of anywhere else in the CSS spec where putting units after your pixels breaks the thing (not that...
2 tags
Cute bookmark ribbons
Aren’t these cute? The PSD came from 365psd and I’ve marked it up in HTML/CSS. Think they’d make sweet little step markers in a multi-page form maybe…
On github…
2 tags
Old Fashioned Album Heading style
Saw something similar pop up in the design inspiration RSS feed, and thought it would be fun to have a go in CSS. Again, no images in this - just box-shadows on :before and :after.
Github…
2 tags
Pointy banner heading style
Keep seeing this kind of heading style in use, so have recreated in CSS. No images in use, just :before and :after absolutely positioned with borders to create the triangular end.
Github…
2 tags
Ribbon effect headings in CSS
Quick and pretty effect for a heading tag. The only image in use is the stitch effect at the top and bottom of the ribbon.
The pointy bits use :before and :after to position a thick border over the ends, with a coloured border and two transparent ones creating a triangle.
Because of the fudge for the ends, this won’t work on highly patterned backgrounds, but still useful in some cases no...
2 tags
Polaroid images
Not quite there. It still requires an extra element to wrap the image as an inset box-shadow is applied under the image content rather than over.
Tried using img:after, but again not working in the way I would expect…
Still its pretty close to what I set out to achieve - github
2 tags
Rotating Background Colour
This site popped up in my RSS reader, and I love the rotating background and funky fonts that they’ve got going on.
They’re using a JQuery plugin to animate the colour changes, but I thought that this should be possible using just CSS if you’re not too bothered about Internet Explorer.
Check it out on github…
2 tags
Apple command symbol in CSS
Look ma, no images!
3 tags
IE8 and case sensitive selectors
Experienced a really odd bug in some legacy code today and can’t really see anything on Google, so here goes…
As part of a bug fix, we had to switch the doctype of a page, to trigger standards mode in Internet Explorer 8. When we did that though, IE8 promptly ignored a whole section of our stylesheet.
It was picking up on styles before the problem block, and picking up on those...