Web 2.0 Design

[Camaro']

I didn't know if this should go in graphics or here, so i just popped it here:)

I would really like to know on the style of Web 2.0

I know people on msn who knows the style of Web 2.0 , but cant explain for shit. (Nadeem echem :) <3)
:spot:

[rogeruk]

http://oreilly.com/web2/archive/what-is-web-20.html

Help any?

[MylesMadness]

Are you talking like the shiny designs or like what rogeruk posted

[TRiLeZ]

Are you talking like the shiny designs or like what rogeruk posted

Ya, the shiny, 3d looking images is Web 2.0.

[Camaro']

Ya, the shiny, 3d looking images is Web 2.0.

It's the shiny images, can any one care to give me some quick tips on making images with web 2.0

[NiCbaZ]

Web 2.0 is interacting with websites, not a design style.

Although many people class "Shiny" websites are web 2.0

[Kyle Undefined]

Web 2.0 is all about the look and feel of the site. Images pop out of the page, corners are rounded, use of saturation, image effects, easy navigation, link to social network sites, etc.

For images, what seems to be in on a web 2.0 site is the background turning to gray scale while the image has a nice size white border with rounded corners and the colors really "pop off the screen".

This is an alright example of web 2.0 http://www.circografico.com.ar/ and here is a very good explanation on web 2.0 and how to achieve it http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php

Also, they way the site behaves can be considered in a web 2.0 site. AJAX and jQuery calls help give sites that web 2.0 feel as well.

If you need any help with this you have my MSN or you can PM me.

~Camo

[Ranger135xp]

It's all relatively simple once you figure out the secrets. All rounded corners are images placed in the background of <div> or <table> tags. The 3D effect that Myspace possesses is just a simple div with a blue background that has a transparent gradient .png applied.

What that means is that the gradient part of the image is set from white to black either top to bottom or vise-versa. The opacity in the gradient is zero at white and between zero and 100 for black. Setting black's opacity to ~30-40% gives the color behind the image a shade effect. This shade is what causes that object in subject to have a 3D look to it.

This is web 2.0, as this is not possible with IE 6 or later. There are JavaScript fixes for IE 6 to make .png's transparent but it can bog IE down to where your site becomes unusable (trust me, I've tried). I'll post a tut on my website about it in-due-time. First I need to fix the login system.

Now in your CSS sheet (highly recommended to use a style sheet file), apply this:


background:url(/path/to/image/3D_BG.png) repeat-x scroll 0 bottom;
background-color: #00CC99;

This will give the bar specified a 3D appearing web 2.0 look. Only one image is needed as it supports any color! The image height should be equal or close to the height of the table cell or div it is applied too. Also, the image width should only be between 1-5 pixels since our code sates to repeat across the x-axis. So, if we have a 700px long by 26px high table cell or div, our image should be about 25-27 pixels high (or more based on desired effect) and 1-5px wide (based on preference, but not necessary to be any bigger). This will give us a 700px wide 3d bar!

Happy editing!

EDIT:\\ The "bottom" in the background parameter is the image alignment. Alternately you can choose "top". The alignment makes the image "cling", so-to-speak, to the direction you specify. If your dark shading is at the bottom of your image, choose bottom. If the shading is at the top, apply the alignment to the top.