background preloader

Design

Facebook Twitter

Perfect Full Page Background Image. Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised.

Perfect Full Page Background Image

Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version.

Galleries

Fonts. Icones. A Guide To Design High Quality Infographics. Infographics have become quite a popular way to present information.

A Guide To Design High Quality Infographics

And it’s a good thing that they have. 90 percent of all information that we perceive and that gets transmitted to our brains is visual. Especially on the Web, where effective communication is essential, infographics can be a good choice to inform, engage, or even entertain your website visitors. High quality infographics are 30 times more likely to be read than written content. – Customer Magnetism This sounds reasonable, but what exactly is a high quality infographic? Let’s have a look at different infographics and what you can do to design one that is effective, but also appropriate for both your content and your target group. Complex vs. simple Infographics help us to present a topic in a way that makes it easier for people to both understand and remember information.

Complex information Discovered by usabilla Simple information Discovered by ogiogi This infographic on the other hand is very simple and straightforward. How to Choose Colours Procedurally (Algorithms) » devmag.org.za. Changing the colours of art can be a great way to increase the amount of content in your game, and add variety and richness.

How to Choose Colours Procedurally (Algorithms) » devmag.org.za

It is relatively easy to implement. What is not always as easy is to get a set of colours that looks nice. This article gives some ideas for choosing colour palettes that look nice. A few things about colour Colour is surprisingly complex. Although you don’t need to know all about the physics, biology, and psychology of colour vision, it is useful to have some background information (which you can find references to at the end of this article). For palette choosing, there are a few important points. Digital colour theory differs considerably from theories based on pigments (or chemicals, or metals in crystals). Vector distances in RGB and many other colour models don’t correspond to differences in perception.

Edit: Turns out I have fallen prey to the very thing I talk about. Brightness These greys are equally spaced. Hue differentiation. Colour harmony theory.