Wood in Modern Web Design – CSS Tips, Free Wood Textures and Wood Showcases

Wood in Modern Web Design - CSS Tips, Free Wood Textures and Wood Showcases

Oggi parliamo di uno dei Trend del Webdesign maggiormente in voga in questo periodo ovvero l'uso del Legno all'interno dei siti. Il legno è indiscutibilmente uno di quegli elementi che piacciono a tutti! Tutte le persone si sentono ad agio in un ambiente in cui sia presente il legno. E' difficile che una tipica casa di montagna realizzata in legno non sia accogliente per chiunque vi entri! Questo concetto è stato trasportato nel webdesign rendendo "accoglienti" i siti web.

Con questo articolo vogliamo darvi alcuni consigli relativi ai CSS che vi permetteranno di usare il legno all'interno dei vostri design, inoltre potrete scaricare un pack contenente 25 Texture in tema Legno e osservare 24 esempi di siti in cui è stato usato egregiamente il legno come elemento di design.

Today we talk about one of the most popular Web Design Trend of this period, that is the use of wood into the websites. Wood is unquestionably one of the elements like that at all! All people feel at ease in an environment where there is wood. It 'difficult for a typical mountain home realized in wood, don't be comfortable for anyone who enters! This was conveyed in Web Design making "friendly" websites.

With this article we want to give you some CSS tips that will allow you to use the wood in your designs, you can also download a pack containing 25 Wood Textures and see 24 examples of websites where it was used very well the wood as element of design.

Follow us on Twitter for Extra News and Updates!

CSS to use the wood in the best way!

Many people are already familiar with these tips but are useful for those who are enjoying the CSS for the first time.

To set the wood background of your website:

body {
background: #FFFFFF url('wood.jpg') no-repeat fixed left top;
}

To optimize the CSS we use just one line for all the background declarations.

Repeat or not Repeat?

Dont's repeat it if the image that you use it's large (for ex: 1920x1200 or more).

Repeat it if it's a pattern (for ex: 100x100px)

other repeat options:

repeat-x (Horizontal repeat)

repeat-y (Vertical repeat)

The position of the background

In the example we set "left top"

left > aligns it to the left of the page margin

top > aligns it to the top of the page margin

To position the blocks of your page (news, gallery, etc...), you can get a cool effect using a 1x1px image created with Photoshop and with opacity minor of 100%. Follow the example:

body {
background: url('block-background.png');
}

In this way you get an impressive result using a repeated background. If IE don't show it, try to creatre a 2x2px image instead 1x1px.

Remember: CSS opacity it's not a standard for the browsers yet! To use it you have 2 solutions:

use images created with a default opacity in Photoshop.
use CSS Sprite technique to obtain images with different opacities in different situations (mouse hover, jQuery or others AJAX effects...).