Archive for the ‘Interactive’ Category

Fishing for lte IE8 CSS3 goodness

Wednesday, April 7th, 2010

So I’m working on getting a button with a gradient background and a background image to work on a project. Happily, Firefox, Safari, et. al are playing nicely. Sadly, IE isn’t. What’s new right? I’m looking for a work-around so I don’t lose my gradient in IE. I’d like to keep the icon, but right now I don’t see anyway to avoid losing it and just using text.

Anyone have an idea? Code snippet below (Yeah, I know it’s not fully semantic and the snippet blows my layout. I’m working on it, the layout that is.):

.button,
input[type="button"] {
	color: #474747;
	border: 1px solid #bfbdb7;
	border-color: #c9c9c9 #b3b3b3 #9a9a9a;
	border-color: rgba(150,150,150,0.4) rgba(128,128,128,0.4) rgba(77,77,77,0.4);
	font-family: "Helvetia Neue", Helvetica, Arial, sans-serif;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 -1px 0 #8c8a7e;
	-webkit-box-shadow: 0 -1px 0 #8c8a7e;
	box-shadow: 0 -1px 0 #8c8a7e;
	box-shadow: 0 -1px 0 rgba(64,63,57,0.6);
	background: #e8e5de;
	background: -moz-linear-gradient(top, #eae8dd 45%, #c9c7bb 55%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, #eae8dd), color-stop(55%, #c9c7bb));
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorstr=#eae8dd, endColorstr=#c9c7bb)
			progid:DXImageTransform.Microsoft.Shadow(color=#8c8a7e,direction=0,strength=0);
}
.print-button {
	background: #e8e5de url(../images/icon-16-print.png) no-repeat 6px 3px;
	background: url(../images/icon-16-print.png) no-repeat 6px 3px, -moz-linear-gradient(top, #eae8dd 45%, #c9c7bb 55%);
	background: url(../images/icon-16-print.png) no-repeat 6px 3px, -webkit-gradient(linear, left top, left bottom, color-stop(45%, #eae8dd), color-stop(55%, #c9c7bb));
	padding-left: 28px;
}
.button:hover,
input[type="button"]:hover {
	color: #4c7204;
	border-bottom-color: rgba(77,77,77,0.5);
	border-top-color: rgba(150,150,150,0.5);
}

Acid 3 and Mobile browsers

Wednesday, February 17th, 2010

The other day as I was watching the new Blackberry browser demo from the World Mobile Congress, I saw something that astounded me: The Acid 3 test. I hadn’t thought of how mobile browsers did with this test before. Never even crossed my mind. But now it had, and my curiosity was piqued.

So I tested out the browsers on my wimpy TreoPro. Surprisingly, my default (the excellent Iris Browser, aka the new Blackberry browser) had a perfect score! Then came Skyfire (52/100) and IE (I couldn’t tell if the test even started.) I have also downloaded Opera 10 Mobile beta and it scored a respectable 97/100.

Unfortunately my resources are limited, so I don’t have results for other devices and their browsers, except for a friend who ran Mobile Chrome on his Droid on Verzion (93/100). If you could test your mobile browser with the Acid 3 test and drop them in the comments, I’ll put together something that we can all use for reference. I’m not just looking for smartphone browsers like Mobile Safari. I want feature phone browser results too.

WebKit achieves Acid3 100/100 in public build

Thursday, March 27th, 2008

Congrats to the WebKit team.

CSS Reference

Monday, February 11th, 2008

SitePoint has launched a rather handy reference section on their site full of CSS Reference goodness.

Speaking Mango

Thursday, December 27th, 2007

Going through my growing list of “put-off-til-later” feeds, I discovered Mango Language. It’s an e-learning site for language learning that is Flash-based and very easy and intuitive to learn. I’ve only gone through part of lesson 1 for Japanese, but I think I might be able to understand some of the Manga I get from Netflix now.

KASHIWASATO.com

Wednesday, December 12th, 2007

Amazing. (Via Coudal)

Transparent PNG support in IE6

Friday, December 7th, 2007

One of the easiest ways I’ve ever seen to get nearly native transparent PNG support in IE6.