Canvas HTML 5

<canvas> is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas> implementations which we will see later in this tutorial.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari. Gecko 1.8-based browsers, such as Firefox 1.5, also support this new element. The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML 5.

Some interesting samples in this web: http://www.canvasdemos.com/

Floating panel always in the same position

To implement this behavior I call a javascript function in the onScroll event within the body tag. The function looks like this:

document.getElementById("FloatingDiv").style.top=document.body.scrollTop+100;

NOTE: If you are using Mozilla/Firefox, Safari 3 or Chrome you can see the round corners. This is a new CSS3 property (border-radius).

webkit (safari/chrome): -webkit-border-radius
gecko (mozilla/firefox): -moz-border-radius

click here and see how it works!

I am always in the same position!

close me!

Create a simple popup with JavaScript and CSS

To create this popup effect you should have a back div (the black one) with the following style:

position:absolute
z-index:50
top:0
left:0
height:100%
width:100%
background-color:black
opacity:0.7


This layer has a z-index between the page and the popup (z-index = 50)

The popup is another div with the following style:

position:absolute
z-index:100
top:45%
left:45%

This panel is over the back layer (z-index = 100)


Click the following link to see the sample!
Open popup!

This is a sample popup...
Close it!

CSS 3 - Opacity

CSS3 has a specific property that controls the transparency of an element, aptly named "opacity". It takes as its value a number from zero to one, representing the degree to which the element is opaque. A value of zero means completely transparent and one means completely solid.
This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.
Firefox/Opera/Safari uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Move the mouse over the thundercats image to see the opacity effect.

Current Browser Support:
FireFox (3.0.5)
Google Chrome (1.0.154.36)
Opera (9.6)
Safari (3.2.1, Windows)

Check your browser with Acid3

Acid3 is a test page from the Web Standards Project that checks how well a web browser follows certain selected elements from web standards, especially relating to the Document Object Model and JavaScript.

When successful, the Acid3 test displays a gradually increasing percentage counter with colored rectangles in the background. The percentage displayed is based on the number of subtests passed. It does not represent an actual percentage of conformance as the test does not keep track of how many of the subtests were actually started (100 is assumed). In addition to these the browser also has to render the page exactly as the reference page is rendered in the same browser. Like the text of the Acid2 test, the text of the Acid3 reference rendering is not a bitmap, in order to allow for certain differences in font rendering.

Acid3 was in development from April 2007, and released on 3 March 2008. The main developer was Ian Hickson, who also wrote the Acid2 test. Acid2 focused primarily on Cascading Style Sheets, but this third Acid test also focuses on technologies used on modern, highly interactive websites characteristic of Web 2.0, such as ECMAScript and DOM Level 2. A few subtests also concern Scalable Vector Graphics (SVG), XML, and data URIs. Controversially, it includes several elements from the CSS2 recommendation that were later removed in CSS2.1 but reintroduced in W3C CSS3 working drafts that have not made it to candidate recommendations yet.

Site: http://www.acidtests.org/

URL to check your browser: http://acid3.acidtests.org/

Original article: http://en.wikipedia.org/wiki/Acid3

Gecko

Gecko is a layout engine currently developed by Mozilla Corporation, known as the layout engine of the Firefox web browser, Mozilla Application Suite, Nvu, Mozilla Thunderbird and many more. It is designed to support open Internet standards, and is used by applications such as Mozilla Firefox, Camino, Flock, SeaMonkey, K-Meleon, Netscape 9, Lunascape to display web pages and, in some cases, an application's user interface itself (by rendering XUL). Gecko offers a rich programming API that makes it suitable for a wide variety of roles in Internet-enabled applications, such as web browsers, content presentation, and client/server. Development originated with Netscape Communications Corporation, but soon moved to the Mozilla Foundation for the Mozilla application suite, and now used in many applications developed by Mozilla Foundation and or the Mozilla Corporation, as well as many other open source software projects. It was also used in later Netscape Navigator releases.

Gecko is written in C++ and is cross-platform, and runs on various operating systems including BSDs, Linux, Mac OS X, Solaris, OS/2, AIX, OpenVMS, and Microsoft Windows. Its development is now overseen by the Mozilla Foundation. Licensed by a tri-license of the Mozilla Public License (MPL), GNU General Public License (GPL) and GNU Lesser General Public License (LGPL), Gecko is free and open source software.

Gecko is the second most-popular layout engine on the World Wide Web, after Trident (used by Internet Explorer for Windows since version 4), and followed by WebKit (used by Safari & Google Chrome) and Presto (used by Opera)

Original article: http://en.wikipedia.org/wiki/Gecko_(layout_engine)

CSS 3 rotation example

If you are using firefox you should see this mazinger rotated:
(Firefox (Gecko) 3.5 (1.9.1) -moz-transform)

If you are using safari/chrome you should see this mazinger rotated:
Safari (WebKit) 3.1 (525) -webkit-transform

If you are using IE...