Ideas, thoughts and solutions

Today's Google doodle is featuring Martha Graham, an American modern dancer. The new doodle looks like a movie, but in fact it is only a CSS sprite. The sprite is this one:  You may be wondering how is the animation/movie appearance achieved if it only uses this static image?  The technique involves CSS sprites. A sprite is a composition of several images grouped together in order to reduce the number of required HTTP request to the server. This way a website with 50 images requires only one request for the large image composition. The entire doodle involves only one sprite, which speeds up loading a lot (compared to loading each frame separately). Google has used this technique to leverage data transfer from the servers and consequently make the animation load faster than a traditional video clip.  So how is this sprite converted to an animation? Pretend you are looking through pierced piece of paper, so that you can only look through th...

There are already many websites that have began using custom web fonts using @font-face to beautify their website. getfinch.com Bringing custom fonts to the web increases the range of possibilities for web designers, however it can also be a drawback, if the fonts aren't used carefully. Firstly, novice designer may try to use too many different typefaces on a single website, which can become distracting and disconnecting. It is important to realize when too much is too much. As a general rule, when designing a website I never use more than three fonts. Usually I select a font font the headlines and another for the content. If required I add a third font for lower level headlines, however I prefer to use different alternations of the same font. Secondly, by using too many custom fonts, the size of the website increases. Custom web fonts have the drawback of their size. Using three to five custom fonts on a website can increase its weight by about 0.5MB which is not negligib...

CSS3 is bringing many innovations to web design. One of these is the possibility of customizing the selection color of text, graphics and every other element of the markup. By default, on most browsers, the selection color is a blue and the color of text becomes white. It is now very easy to change this behavior and add a nice touch of color to your website. Changing the selection color can be achieved with the pseudo-element ::selection like this (a vendor prefix is still required for Firefox): ::selection {  background: rgb(131,209,222);       /* Webkit browres*/ color:#336; } ::-moz-selection { background: rgb(131,209,222);       /* Firefox */ color:#336; } This will change the default selection color to a greenish-blue and change the color of the text to a dark blue. The power of ::selection does not end there. It is of equal simplicity to define a different color for each element. In this example  the text of the first para...