Create Web 2.0 Button without background image

web2.0button

We can create cool web 2.0 buttons with pure css code instead of background image now, and it’s very easy to do. The main 2 properties used for this demo are background-color and box-shadow,  and have to set box-shadow as inset so that it can cover the part of background-color with deep color.

code:

 

 

 

Posted in CSS3 Tagged with:

Rendering a Christmas Tree by one DIV

flynax-xmas-tree

This is a Christmas tee picture, but we can render it in browser with css and only one div element.

html code as below:

for css code, click the DEMO and check source code.

Posted in CSS3 Tagged with: ,

FULL MARATHON,I did it !

logo

 

 

Posted in Uncategorized Tagged with: ,

Paint flash neon light in dark by CSS3 & jQuery

csslight

box-shadow in CSS3 is a very useful and important property, we can do very nice UI effect on webpage. In this demo that I did you can click anywhere to create a flashing neon light, more and more neon lights in the dark like bustling street in camera lens which lost focus.

DEMO

First, create a empty simple html page with empty body and set it’s  background as black by css code.

In order to create blur neon light, we can add an element which height and width in same size like below:

set it’s position as absolute in css code and to make it not visible by setting top & left as minus.

Now let’s us to use javascript with jQuery to make the light blinked and add onclick event on body for handling user’s click to create new neon light.

Remove that “light” and add jQuery library from google:

Below is the javascript added into body

Posted in CSS3, Javascript Tagged with: , ,

Show my run in 3D video by google map

google_maps_3d_logo

This is a 13.95 km Run in Singapore. The Run has a total ascent of 45.0 m and has a maximum elevation of 41.0 m. This map was created by wangweiqiang on 11/05/2012

Posted in Uncategorized

Build simple game interaction by HTML5 base on KineticJS JavaScript Library

html5-logo-parody

DEMO

HTML5 is powerful on web game, in this article we will create a page include simple interaction which is controlling the catoon man to walk up,down,right and left by arrow key.

First, we need to load a javascript library named “KineticJS”, it’s very strong framework for HTML5 canvas interaction. You can get it from  http://www.kineticjs.com/

Code as below:

You also need to prepare a catton man image include every  motion like below:

and a map background:

Add some css code for the canvas:

Now we can focus on javascript coding.

Posted in HTML5, Javascript Tagged with: ,

Hello world, hello new technology

lakerainbow_1920x1200

Welcome, this is my tech blog about web development technology includes HTML5, CSS3, Javascript, ASP.Net, C#, SQL …

Posted in Uncategorized