Internet Explorer, Transparent PNGs, and jQuery Animation: The Black Background Issue Solved
This is an issue I ran into a few months ago. I couldn't find much documentation around this on the interwebs, so I thought I'd post my findings here. Hope this helps a few people out.
I was working on a project where I was animating the opacity and position of transparent 24-bit PNGs with jQuery. Everything was going great until I fired up IE (big surprise). I hadn't thought it would be a problem, since both IE 7 and IE 8 both support PNGs with alpha, but as it turns out, like most things in IE, it's a little buggy.
Everything displayed properly at first, but the second I animated the opacity, this nasty black background/border/fringe junk showed up.
After much googling, one semi-solution I found was to give the image the same background color as your page with CSS. That's all well and good if your image is on a solid background. If you give the image a background color or image, the PNG displays properly on top of it, BUT that background is still opaque, and that pretty much defeats the purpose.
THEN I remembered a RGBa to IE filter converter I had come across (thanks, Michael Bester). So I wondered what would happen if I gave my problem PNGs a transparent background using an -ms-filter background converted from rgba(255,255,255,0). Fully expecting it not to work, I used the converter and tried this:
.item img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE 6 & 7 */
zoom: 1;
}
Kazaam!! Goodbye black, and hello working, animatable transparent PNGs in IE 7 and 8.
You can now use jQuery's fadeIn(), fadeOut(), and animate() on your transparent PNGs in IE 7 and 8 to your heart's content. Hope this saves you some time and frustration down the road.
A Quick Pair of Random JavaScript Tips
I recently came across Jed Schmidt’s 140bytes project on GitHub. Jed describes the project as, “a tweet-sized, fork-to-play, community-curated collection of JavaScript.” There’s a ton of interesting (and interestingly coded) script examples from a variety of people, but my favorite part of the project so far has been the Byte-saving Techniques page on the wiki.
Here are two quick tips gleaned from the wiki.
39 Ridiculous Things To Do With CSS3 Box Shadows
Box-shadow is a pretty powerful property in modern browsers. With just six little values, you can make some really neat stuff. How much neat stuff, you ask? To find out, I set a little time aside each day to play with it. The result is 39 ridiculous little experiments that, due to whatever issues, can only be viewed in Chrome 11 or better.
39 Box Shadow Experiments (Chrome only!)
You can navigate with the arrow keys, and I’ve moved the CSS for each object into the object HTML, which should make it easier to look at particular effects. A little about what's going on here:
The Basics
Box-shadow has six properties: inset, left, top, blur, size, and color. Most should be familiar, but there might be a few new ones for some users: Size shrinks or grows a shadow, while inset allows you to wrap the inside of an element with a shadow (but careful — it can slow down draw time significantly).
Continue reading "39 Ridiculous Things To Do With CSS3 Box Shadows"
Wireframes – Worth Their Weight In Gold
I will never start from scratch in Photoshop again. Seriously.*
(*Okay, maybe that's hyperbole, but I bet I'll do it less frequently).
Like a lot of folks, my standard web design workflow started by opening a new file in Photoshop (or your design program of choice) and getting a basic guide structure put into place. I generally started by designing the header region of the site because of its obvious importance in laying the groundwork for the visual direction. I then would fill in the primary navigation items and start resolving details like the feature area and the rest of the homepage content. By the time I had hit the footer I was ready to at least start thinking about how I was going to build out the page.
All that's changed now.
Seven Typography Shortcuts for Photoshop
I've recently picked up a few new Photoshop shortcuts related to typography so I figured that I'd share them. If you spend a lot of time in the program, you probably have seen most of these, but hopefully there's a new one in here for you. I know I always like finding ways to be more efficient and everyone likes to learn a new trick, right?
Paragraph Size
(with type tool selected) Option + Click. If you know you need a column of text that is a specific number of pixels wide (or tall), this can be a faster solution than using your guides and rulers.
Highlight Text in Layer
Double Click Text Layer Icon. This is one I haven't yet incorporated into my workflow but seems helpful. Double-click the "T" in the layer palette and all the text on that layer will highlight, then make desired changes.
My New Best Friend: CSS Generated Content
I’ve become obsessed with generated content lately. In an effort to use fewer and fewer images, I’ve started to use generated content more since more browsers support it (IE8+, FF3+, Safari 4+, Chrome 4+). The following are a couple of examples I have built for a project to streamline my pages.
Continue reading "My New Best Friend: CSS Generated Content"
Dummy Text Panel for Photoshop
I’m a Photoshop fan, but with every release I find myself saying things like, “If only Adobe added _________, then Photoshop would be perfect!” Beginning with CS4, Adobe introduced SWF based panels. Along with scripting, the ability to create SWF panels gives users the power to extend Photoshop in a lot of interesting ways.
For someone like me with intermediate development skills, getting started with basic panel development is easy thanks to a free Adobe Air application called Configurator 2.0. Configurator does have limitations, but I've found it to be a great place to start. For more advanced panels, Flash and Flash Builder 4 (formerly Adobe Flex), seem to be the way to go.
2011