css
snippets

Has everyone forget about inherit?

On my voyages through the web I have come across many demos made by designers who seem to have no knowledge (or choose to ignore) the inherit property. Even I am guilty of occasionally not using inherit where it would be more fitting, but hopefully this quick snippet will help put all of us right. By default most properties in…

snippets

Changing Border Width Without Moving Element

This is just a quick little tip I’ve came across that might be useful to you! Ever want to change the border of an item when you hover or click on it, but have to resort to position: relative;? Well do not fret, because there is a much simpler way to accomplish what you want! You can use a transparent…

snippets

The Form Method: CSS Click States without Javascript

There are countless moments in CSS development when you wish there was a :click psuedo class, similar to :hover. For now, that doesn’t exist, but this little hack will let you get around that.

snippets

Using Box Shadows as Gradients

Why would I? box-shadow is smaller and much easier to remember than the quite complex gradient syntax that we have at the moment. Plus, box-shadow boasts more support than the gradient properties. You can’t apply a gradient to a box-shadow either. If you take a look at these buttons posted a while ago, you’ll notice that there’s a slight gradient…

snippets

Clicking Through an HTML Element With Pointer Events

Can’t Click! This is a problem I’ve ran into quite a lot. Sometimes a semi transparent or transparent element will be on top of a link or button, something I want to be able to click on. Unfortunately, normally you can’t click on something if its below something else. Unless you add this to the CSS for the transparent element:…

snippets

Stop jQuery Repeating on Multiple Instances

I’ll often run into this problem in jQuery where if you hover on and off something too many times it’ll repeat the action over and over again. Here’s some example code for an image that you can only partially see, and then which slides down on hover. If you were to leave it like this then if the user hovered…

okay