CSS3 Backgrounds and Borders Tests
(of course, this is posterous, so it won't look right, but this demo was well-hidden, so it's better than nothing)
Simple border-radius
p.test { background: #ccc; border: 15px solid #999; color #000; padding: 10px; } p.mirror-4-ways { border-radius: 25px; } p.mirror-2-ways { border-radius: 25px 50px; } p.mirror-1-way { border-radius: 25px 50px 75px; } p.no-mirror { border-radius: 25px 50px 75px 100px; }If your browser supports it, this paragraph should have rounded corners of equal size (25px). 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.
border-radius with 4-way mirroring. 
If your browser supports it, this paragraph should have rounded corners, with the top right and bottom left corners being 25px in diameter and the bottom right and top left being 50px in diameter. 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.
A reference rendering demonstrating border-radius with 2-way mirroring.
If your browser supports it, this paragraph should have rounded corners, with the top right corner being 25px in diameter, the bottom right and top left being 50px in diameter, and the bottom left being 75px in diameter. 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.
A reference rendering demonstrating border-radius with 1-way mirroring.
If your browser supports it, this paragraph should have rounded corners, with the top right corner being 25px in diameter, the bottom right being 50px in diameter, the bottom left being 75px in diameter, and the top left being 100px in diameter. 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.
A reference rendering demonstrating border-radius with no wirroring.
Compound border-radius
p.test { background: #ccc; border: 15px solid #999; border-radius: 25px / 50px; color #000; padding: 10px; }If your browser supports it, this paragraph should have irregularly rounded corners of equal size, with the first radius being 25px and the second being 50px in diameter. 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.
A reference rendering demonstrating border-radius with compound radii.
Simple box-shadow
p.test { background: #fff; box-shadow: 5px 5px 15px 1px #000; margin: 2em auto; padding: 10px; width: 90%; }If your browser supports it, this paragraph should have a drop shadow cast toward it’s lower left, 5px out in each direction. It should be blurred 15px and spread 1px (if supported).
A reference rendering demonstrating a simple box-shadow.
Compound box-shadow
p.test { background: #fff; box-shadow: 5px 5px 15px 1px #000, -5px -5px 15px 1px #000; margin: 2em auto; padding: 10px; width: 90%; }If your browser supports it, this paragraph should have two drop shadows cast: 1) a drop shadow cast toward it’s lower left, 5px out in each direction, blurred 15px, and spread 1px (if supported)); and 2) a drop shadow cast toward it’s lower left, -5px out in each direction, blurred 15px, and spread 1px (if supported).
A reference rendering demonstrating a compound box-shadow.
eCSStender.CSS3-backgrounds-and-borders.js
Current Version: 0.3.4
Demo: http://test.ecsstender.org/extensions/eCSStender.CSS3-backgrounds-and-borders.js/test/
This extension implements the CSS3 Backgrounds and Borders module back to IE6. Support is currently incomplete, but the following currently work:
border-radius(if the browser has some form of native implementation, i.e. not in IE currently)- basic (e.g.
border-radius: 25px 50px 75px 100px;) - compound (e.g.
border-radius: 25px / 50px;)
- basic (e.g.
box-shadow- basic (e.g.
box-shadow: 5px 5px 15px 1px #000;) - compound (e.g.
box-shadow: 5px 5px 15px 1px #000, -5px -5px 15px 1px #000;)
- basic (e.g.
- License: MIT
- Homepage
- Download (.zip)
- Repository: git://github.com/easy-designs/eCSStender.CSS3-backgrounds-and-borders.js.git
Copyright 2005–2010 Aaron Gustafson. All Rights Reserved. Colophon
eCSStender is licensed under the liberal MIT License.
Aaron Gustafson
Aaron’s Lifestream
-
@AaronGustafson was glad to finally meet & get to know @emilylewis. She’s a pretty awesome lady. #mix11
-
@AaronGustafson is heading to a super-secret shindig. #mix11
-
@AaronGustafson had a successful talk: 25 minutes presenting, 30 minutes answering questions. Excitement for @StandardsSherpa is building…
-
@AaronGustafson thanks @jenseninman, @jessica_martin1 & @LauraHelenWinn for the encouragement.
-
@AaronGustafson is getting ready to talk about @StandardsSherpa in :30 in Lagoon B. #mix11
-
@AaronGustafson stepped into @nickf’s session before heading to the green room. Good stuff. #mix11
-
Fab.com + Instagram
Includes one of Veerle's uploads featuring the dolls we had made for her and Geert (by Dolls for Friends)…
-
@AaronGustafson agrees, @kellyoxford. Celebrity and playing a savvy businessman on TV apparently trumps repeated bankruptcies and financial malfeasance.
-
@AaronGustafson suggests: EPB + Chattanooga + Alcatel-Lucent = Intelligent Community http://bit.ly/eZAnxr
-
-
-
-
Room at THEhotel
-
Room at THEhotel
-
Welcome to the desert
-
@AaronGustafson is looking forward to seeing you again, @jeffsand. #mix11
-
@AaronGustafson hopes to hook up with you tomorrow, @jcroft.
-
@AaronGustafson Thinks that sounds like a plan, @rainypixels. /cc @stefsull @jcroft @snookca @emilylewis @allenjs @andrewdupont
-
@AaronGustafson is still recovering from @Retreats4Geeks, so staying in might be good too. Hard to resist the pull of In-N-Out though. #animalstylewithdrawl
-
@AaronGustafson has checked in at THEhotel and thinking about dinner. Have @stefsull, @jcroft, @snookca, @emilylewis, @rainypixels, and @allenjs eaten yet?
