CSS3 Rounded Corners: Avoiding Image Clipping Problems

Published on April 25, 2011 in Chrome, CSS, Firefox, HTML, Internet Explorer and Standards. 4 Comments

The Scenario

Consider the following HTML+CSS setup: an img element wrapped in a div container with rounded corners (and optionally, a drop shadow); the div is sized to match the image’s dimensions, like so:

<!-- HTML -->

<div class="rounded">
    <img src="…" height="50" width="100" />
</div>
/* CSS */

div.rounded {
    border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
    height: 50px;
    width: 100px; }

The Problem

If you’ve been playing around with CSS3 long enough, chances are you’ve already encountered this common problem: the corners of the image don’t get clipped by the container, although the container’s corners are rounded. A perfectly logical outcome, considering the box model behavior and element hierarchy, but in most cases, it’s not what we want for our layout. Continue reading ‘CSS3 Rounded Corners: Avoiding Image Clipping Problems’

Fireworks Goodness: Qrayg’s Fw PNG Week Project (+ a Tip on Filename Conventions)

Published on February 2, 2011 in Adobe, Design and Fireworks. 2 Comments

Craig Erskine's Fw PNG Week Project

In March of 2010, Craig Erskine (a.k.a., qrayg.com) set out to create PNG vector files and offer them for free download to the Adobe Fireworks community. Ten months later, his Fw PNG Week project has consistently grown into a solid collection of 48 52 Fireworks vector resources, ideal for designers of application interfaces, websites, logos and icons.

Continue reading ‘Fireworks Goodness: Qrayg’s Fw PNG Week Project (+ a Tip on Filename Conventions)’

Graphika Manila 2010

Published on July 7, 2010 in Design. Closed

Graphika Manila 2010

Graphika Manila 2010 is the fifth installment of the Philippines’ premier multimedia design conference. Creative professionals and passionates will once again gather on August 7, 2010 at the SM Mall of Asia to be treated to a whole day of design wisdom and inspiration from both local and foreign talents. If you’re into art and design (and happen to be in the Philippines), you’d be a fool to skip this. (Last couple of times I did, I missed out on Pixar and ILM. Crap.)

For more information, go to http://www.graphikamanila.com/, or http://www.facebook.com/graphikamanila.

Who The Hell is Samuel Garcia?: The Facebook Redirect Problem

Published on November 18, 2009 in Chrome, Facebook, Fail, Firefox, MySpace, Twitter, Web and Windows. 126 Comments

In a nutshell: The problem has to do with particular models of Linksys Routers (WRT160N v3 and WRT310N). Want the fix already?: manually set the DNS servers on your computer, instead of the router. I recommend Google Public DNS or OpenDNS. If you’re still interested in the details, continue with the rest of the article, as well as the valuable comments.

Update (07 January 2011): For users of Linksys WRT160N v3, a new firmware has been available for quite a while now. It is suggested that you upgrade to the the newest version (3.03) (and let us know in the comments if this works for you). Thanks to Bill Creswell for the tip!

Last night, I started experiencing this weird thing with Facebook: it was redirecting to MySpace for a few minutes at a time. Specifically, to a custom URL for one Samuel Garcia (aka SR388, whose status reads, “faceebook transition. in progress”).
Continue reading ‘Who The Hell is Samuel Garcia?: The Facebook Redirect Problem’

Fireworks Zone: Wallpaper Contest

Published on October 21, 2009 in General. Closed

Fire up Fireworks and get creative! Fireworks Zone is holding a contest for the best Adobe® Fireworks®-created wallpapers. All Fireworks enthusiasts are invited to join the open theme contest, which runs until December 1, 2009. The most awesome wallpaper wins a copy of Adobe® Creative Suite® 4 Web Premium and an invitation to write an article for the Fireworks Developer Center. There are cash prizes, books, and tees to be won, too!

Go to Fireworks Zone’s contest page for more details. Good luck, and show them all what Fireworks is really capable of!