Category Archives: CSS & HTML

HTML and CSS things

Removing bad images to reveal placeholder with html and css. No javascript

Load a placeholder image for say a profile picture without having to check if the actualy profile picture exists already.

The HTML

The CSS

That’s it.

The onerror attr on the image tag will hide the image when the href is bad meaning that bad broken image icon is no longer present, and as the image is not in the DOM the background image of the containing div is shown. Shhimplles 🙂

How the browser works.

This is great video for how the browser works, well worth a watch.

“This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals (see Resources) and spent a lot of time reading web browser source code.”

 

Visit this link for more: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Creating an on off slide toggle with only CSS

Creating an on off slide toggle with only CSS

The HTML:

The CSS:

And here is a jsfiddel: http://jsfiddle.net/f0y4xurz/

CSS Rotate fix for blurryness in Chrome and Safari

Apply the following std css rules to rotate an element:

The result is ok, before you start putting text in it. As soon as you put some text in the rotated element (or any of its children) things get a little blurry.

This little line fixes the beer goggles:

Colour Wheel HEX Codes for CSS

Colour wheels are brilliant, they remind you of colours you haven’t used in a while and which colours can in theory compliment others.

However one annoying thing most colours wheels seem to lack for web developers are the HEX codes.. so today I put one together to help me speed up the process. At some point I intend to make one to include all the HEX codes of all colours on the wheel but this will do for now.



Stage 1 colour wheel