Archive for CSS

Nifty inset effect for divs

Just messing about with my stylesheets as usual. Always loved the CSS3 box-shadows and was looking for something to replace the lame blue borders I have on my divs. So I came up with a qickie universal box-shadow inset effect that can be applied to any div (indeed, any block-level element). It does not use inset so you won’t have to adjust your inner content, but it will take up more space around the div so you might want to watch your crowding. Anyway, here’s the code:

box-shadow: -4px 0px 4px 2px rgba(0, 0, 0, 0.25),4px 0px 4px 2px rgba(255, 255, 255, 0.25),0px -4px 4px 2px rgba(0, 0, 0, 0.25),0px 4px 4px 2px rgba(255, 255, 255, 0.25);

Since it uses only 25% black and 25% white as colours, it will go with pretty much anything. Of course play with the parameters and your background colours to suit your taste.

When a discovery pushes you forward

Wow, I just love when this happens. I make one tiny discovery (usually while trawling google for help on some problem I’m having) and it pushes me into a completely new way of doing things.

In this case, it was the discovery of special CSS selectors. This will sound pretty dry and mundane to those who aren’t interested in playing with CSS for fun (and profit!) but to me, its a god send that opens up a whole new world of possibilities as well as solving some of the more nagging and annoying issues I’ve had over the years.

Since a picture is worth a thousand words, lets take the example of the table for the recipe in the previous post. So tired of dry, dull ugly tables, I went off on a tangent to try and improve it a bit. Here it is again:

Ingredient Volume/5mL Percentage
Base (24mg/mL, 50/50) 2.5mL 50.00%
Vegetable Glycerine 1.10mL 22.00%
Propylene Glycol 0.50mL 10.00%
TPA Absinthe Flavour 0.75mL 15.00%
Liquid Menthol 0.05mL 1.00% (1 drop)
Liquid Stevia 0.10mL 2.00% (2 drops)

I wanted a header row that would match the look of my site, rounded corners for that sleek look, and to colour every second row. Now the old way was putting in-line css into every other friggin td and forget about border-radius working properly on <thead> elements. Why? I haven’t a clue.

This is the breakthrough moment for me: special CSS selectors. I found that I could target the children of of the table elements (th, tr, td, etc) by their sequence.

For example, lets take the header row. There are three th’s in it. If I applied border radius to the top right and left corners, i would be left with two dips between the first and second, and the second and third th.  But check this out:

th {background-colour:rgba(255,255,255,0.05);}
th:first-child {border-top-left-radius:12px;}
th:last-child {border-top-right-radius: 12px;}

Note that I can target the first child (left th) and last child (right th) while leaving the centre one alone. All, of course, share the same background colour. Fantastic!

Why stop there though? I still want every second row to be coloured for ease of reading (tables of data make me blind too). In addition to being able to target the first and last child, i can also target the nth child by number which would be in the form:

tr:nth-child(2) {some parameters}

Meh. Useful, but not so much in this case. I suppose I could do something messy like:

tr:nth-child(2), tr:nth-child(4) ... etc

What a mess that would be. Well here’s what made my day: you can select every nth child!  Like-a-dis:

tr:nth-child(2n)

Voilà. Every second instance of tr now has a background colour.

The fun doesn’t stop there. Check out this link I dredged up. It has a whole host of special CSS selectors to make your stylesheet-hacking life a helluva lot easier:

The 30 CSS Selectors you Must Memorize