The One with the Thoughts of Frans

Cutting Corners With Linear Gradients

Presumably unnoticed by all, back in December 2012 I replaced the image-based cut corners in post headings with pure CSS. Border-radius removed the need for images to round corners, but you don’t need images anymore to cut them either.

Edited down to only the cutting of corners, this is what it looks like now:

.posttitle a {background:#0b0; background:linear-gradient(225deg, transparent 8px, #0b0 8px)}
.posttitle a:hover, .posttitle a:active {background:#6c0; background:linear-gradient(225deg, transparent 8px, #6c0 8px)}

And this is how it used to be:

.posttitle a {background:#0b0 url(images/posttitle.gif) no-repeat top right;overflow:hidden;}/*overflow:hidden for Webkit which insists on adding some kind of margin*/
.posttitle a:hover, .posttitle a:active {background:#6c0 url(images/posttitle.gif) no-repeat 100% -91px;}

Size-wise the difference is small: the GIF was only 107 bytes. You’d pretty much make up the difference by adding prefixed versions of linear-gradient if desired, albeit you do still save an HTTP request and you avoid one of Webkit/Blink’s bugs.

For scaling it matters only very little. But not having to open up an image editor for simple things like this? Fantastic.

Leave a Comment

You must be logged in to post a comment.