whiii.com

net me net you

Yellow and welcome to whiii.com.
Learn: | Css3 | Html 5 |

Friends: | Google |

Current best friend: | PageSpeed Insights |

Site up n running fully within a few weeks. Google Insights Speedtest result: 100/100 on all! Whiii runs on WP.

Design

Whiii has made this: Theme for WordPress.

Twist it, CSS3 & HTML5

Style / add stuff to links via the link rel -tag with css

Are your hands tied when your using a plugin from WordPress or you simply can´t use id´s or classes on your links, images or div´s? Why not test something totally out of the box?

Here’s an example of how to add a hover image via css, that displays over an existing image that´s inserted in html (< img >).

a[rel~=”1″] img {position:relative;}
a[rel~=”1″] {position:relative;}
a[rel~=”1″]:hover::before {content: url(../img/image.png);display: block;z-index:45;position:absolute;}

This line of code outputs an image background that covers the existing html image on the href link that has an rel=”1″ -tag in it like:
(< a href="#" rel="1" > < img > < / a >).

Works fine in IE, Firefox and Chrome. Using only : in :before cases problems in Chrome, so make shore to use ::before.

Why not optimize site speed by using fonts instead of logos? I’m currently creating a pretty big page, with over 50 logos where my mission is to create each logotype only using fonts.
Lets say the Coca Cola logo in red and white, compressed png -format roundish 240 000 bits (30kb) vs 9 letters (blank space included) 9 bits + woff font script making it around 200 bits. That’s a saving of 99,9%! Of course this is only one logotype, the page size will be bigger when using multiple fonts, witch effects the http requests getting the woff etcetera.