PIE htc test

Browser info

Test 1: border-radius, box-shadow, gradient
Test 2: hover
I'm a link, as cute as a button
Test 4: multiple box-shadow
Test 4: multiple box-shadow
Source: https://developer.mozilla.org/en/CSS/-moz-box-shadow
Works with: Chrome 4+, Firefox 3+, Safari 3.1+ with PIE: IE6,7,8
Test 5: text-shadow (edit me!!)
Works with: Chrome 4+, Firefox 3+, Safari 3.1+ IE6,7,8,9
Test 6: border-image
Used image:
Source: benjamin-weigl.de
Works with: Chrome 4+, Firefox 3+, Safari 3.1+ IE6,7,8,9

Test 7: RGBA

Works with: Chrome 4+, Firefox 3+, Safari 3.1+ with PIE: IE6,7,8
Test 8: Position fixed
Chrome, Firefox, Safari, IE 7+ IE6

Test 9: background-patterns (CSS3 - no images)

Source: lea verou & S├ębastien Grosjean
Works with: Chrome, Firefox, Safari with PIE: IE6,7,8,9

Test 10: multiple bodere with boxshadow

I have rainbow borders with rounded corners!

Source: weston.ruter.net
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8

Test 11: background-origin

Source: w3schools.com
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8

Test 12

Lifted corners

Curled corners

Perspective

Raised box

Single vertical curve

Vertical curves

Single horizontal curve

Horizontal curves

Rotated box

Source: nicolasgallagher.com
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8

Matching mask shadow color blends to solid background.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Source: waytoocrowded.com
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8

Test 14: resize

I have lots of text in a small box which you can resize thanks to the CSS3 resize property.
horizontal
Source: robertnyman.com
Works with: Chrome, Firefox, Safari with PIE: IE6,7,8,9

Test 15: box-sizing

box-sizing: content-box (default)
box width: 300 pixels + 10 pixels padding and 1 pixel border on each side = 322 pixels

box-sizing: border-box
box width: 300 pixels, including padding and borders

box-sizing: padding-box
box width: 300 pixels, including padding

Source: robertnyman.com
Works with: Chrome, Firefox, Safari, IE8, 9 with PIE: IE6,7

Test 16: outline-offset

I have an offline offset
Source: robertnyman.com
Works with: Chrome, Firefox, Safari with PIE: IE6,7,8,9

Test 17: columns

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Source: w3schools.com
Works with: Chrome, Firefox, Safari with PIE: IE6,7,8,9

Test 18: display:table

display: table-cell;
width: 20%

Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
display: table-cell;
width: 30%

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.
display: table-cell;
without width

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Source: quirksmode.org
Works with: Chrome, Firefox, Safari, IE8, 9 with PIE: IE6,7

Test 19: content

.test19:after{
    content: "Hello World";
}

->

Source: evotech.net
Works with: Chrome, Firefox, Safari, IE8, 9 with PIE: IE6,7

Test 20: some selectors

Test 21: css shapes

Source: css-tricks.com
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8

Transparent PNG tests

with img tag
background
no-repeat
 
background
repeat
 
background
position -50px -50px
 
background png
on top of an other (position absolute)
 

jQuery test

click to load/unload the same test-content via ajax