November | 2009 | Ryan Joy (atxryan) 2009 November | Web developer living and playing in Austin, Texas. Microsoft Developer Evangelist.
RSS Feed

  1. atxryan: Like Radiohead? Let me recommend Amplive’s Rainydayz remix http://is.gd/58yLz. Download link 404; grab from me: http://ryanjoy.com/download/

    Comments Off

    November 30, 2009 by atxryan

    atxryan: Like Radiohead? Let me recommend Amplive’s Rainydayz remix http://is.gd/58yLz. Download link 404; grab from me: http://ryanjoy.com/download/


  2. atxryan: @skeltoac I didn’t know that! Too bad the shortened redirect must start from the beginning of the slug.

    Comments Off

    November 30, 2009 by atxryan

    atxryan: @skeltoac I didn’t know that! Too bad the shortened redirect must start from the beginning of the slug.


  3. Saffron Shrimp Crab Cakes

    Comments Off

    November 30, 2009 by atxryan

    For sauce 1 cup crème fraîche 1 tablespoon chopped canned chipotle chiles in adobo 1/2 teaspoon salt 1/4 teaspoon black …
    keep reading


  4. atxryan: Wow. The new TweetDeck is great. Twitter Lists support AND ability to send new-style or traditional retweets. Take that, @Twitter!

    Comments Off

    November 30, 2009 by atxryan

    atxryan: Wow. The new TweetDeck is great. Twitter Lists support AND ability to send new-style or traditional retweets. Take that, @Twitter!


  5. Collar Fund investment strategy

    Comments Off

    November 30, 2009 by atxryan

    A collar puts a limit on the amount you can gain or lose on a stock. In order to create …
    keep reading


  6. Working With RGBA Colour

    Comments Off

    November 30, 2009 by atxryan

    When Tim and I were discussing the redesign of this site last year, one of the clear goals was to have a graphical style without making the pages heavy with a lot of images. When we launched, a lot of people were surprised that the design wasn’t built with PNGs. Instead we’d used RGBA colour values, which is part of the CSS3 specification.

    What is RGBA Colour?

    We’re all familiar with specifying colours in CSS using by defining the mix of red, green and blue light required to achieve our tone. This is fine and dandy, but whatever values we specify have one thing in common — the colours are all solid, flat, and well, a bit boring.

    Flat RGA coloursFlat RGB colours

    CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

    Don’t We Have Opacity Already?

    The ability to set the opacity on a colour differs subtly from setting the opacity on an element using the CSS opacity property. Let’s look at an example.

    Here we have an H1 with foreground and background colours set against a page with a patterned background.

    Heading with no transparencyHeading with no transparency applied

    1. h1 {
    2. color: rgb(0, 0, 0);
    3. background-color: rgb(255, 255, 255);
    4. }

    By setting the CSS opacity property, we can adjust the transparency of the entire element and its contents:

    Heading with 50% opacityHeading with 50% opacity on the element

    1. h1 {
    2. color: rgb(0, 0, 0);
    3. background-color: rgb(255, 255, 255);
    4. opacity: 0.5;
    5. }

    RGBA colour gives us something different – the ability to control the opacity of the individual colours rather than the entire element. So we can set the opacity on just the background:

    Heading with 50% opacity on just the background50% opacity on just the background colour

    1. h1 {
    2. color: rgb(0, 0, 0);
    3. background-color: rgba(255, 255, 255, 0.5);
    4. }

    Or leave the background solid and change the opacity on just the text:

    Heading with 50% opacity on just the foreground50% opacity on just the foreground colour

    1. h1 {
    2. color: rgba(0, 0, 0, 0.5);
    3. background-color: rgb(255, 255, 255);
    4. }

    The How-To

    You’ll notice that above I’ve been using the rgb() syntax for specifying colours. This is a bit less common than the usual hex codes (like #FFF) but it makes sense when starting to use RGBA. As there’s no way to specify opacity with hex codes, we use rgba() like so:

    1. color: rgba(255, 255, 255, 0.5);

    Just like rgb() the first three values are red, green and blue. You can specify these 0-255 or 0%-100%. The fourth value is the opacity level from 0 (completely transparent) to 1 (completely opaque).

    You can use this anywhere you’d normally set a colour in CSS — so it’s good for foregrounds and background, borders, outlines and so on. All the transparency effects on this site’s current design are achieved this way.

    Supporting All Browsers

    Like a lot of the features we’ll be looking at in this year’s 24 ways, RGBA colour is supported by a lot of the newest browsers, but not the rest. Firefox, Safari, Chrome and Opera browsers all support RGBA, but Internet Explorer does not.

    Fortunately, due to the robust design of CSS as a language, we can specify RGBA colours for browsers that support it and an alternative for browsers that do not.

    Falling back to solid colour

    The simplest technique is to allow the browser to fall back to using a solid colour when opacity isn’t available. The CSS parsing rules specify that any unrecognised value should be ignored. We can make use of this because a browser without RGBA support will treat a colour value specified with rgba() as unrecognised and discard it.

    So if we specify the colour first using rgb() for all browsers, we can then overwrite it with an rgba() colour for browsers that understand RGBA.

    1. h1 {
    2. color: rgb(127, 127, 127);
    3. color: rgba(0, 0, 0, 0.5);
    4. }

    Falling back to a PNG

    In cases where you’re using transparency on a background-color (although not on borders or text) it’s possible to fall back to using a PNG with alpha channel to get the same effect. This is less flexible than using CSS as you’ll need to create a new PNG for each level of transparency required, but it can be a useful solution.

    Using the same principal as before, we can specify the background in a style that all browsers will understand, and then overwrite it in a way that browsers without RGBA support will ignore.

    1. h1 {
    2. background: transparent url(black50.png);
    3. background: rgba(0, 0, 0, 0.5) none;
    4. }

    It’s important to note that this works because we’re using the background shorthand property, enabling us to set both the background colour and background image in a single declaration. It’s this that enables us to rely on the browser ignoring the second declaration when it encounters the unknown rgba() value.

    Next Steps

    The really great thing about RGBA colour is that it gives us the ability to create far more graphically rich designs without the need to use images. Not only does that make for faster and lighter pages, but sites which are easier and quicker to build and maintain. CSS values can also be changed in response to user interaction or even manipulated with JavaScript in a way that’s just not so easy using images.

    Opacity being changed on :hoverOpacity can be changed on :hover or manipulated with JavaScript

    1. div {
    2. color: rgba(255, 255, 255, 0.8);
    3. background-color: rgba(142, 213, 87, 0.3);
    4. }
    5.  
    6. div:hover {
    7. color: rgba(255, 255, 255, 1);
    8. background-color: rgba(142, 213, 87, 0.6);
    9. }

    Clever use of transparency in border colours can help ease the transition between overlay items and the page behind.

    An example of border opacityBorders can receive the RGBA treatment, too

    1. div {
    2. color: rgb(0, 0, 0);
    3. background-color: rgb(255, 255, 255);
    4. border: 10px solid rgba(255, 255, 255, 0.3);
    5. }

    In Conclusion

    That’s a brief insight into RGBA colour, what it’s good for and how it can be used whilst providing support for older browsers. With the current lack of support in Internet Explorer, it’s probably not a technique that commercial designs will want to heavily rely on right away – simply because of the overhead of needing to think about fallback all the time.

    It is, however, a useful tool to have for those smaller, less critical touches that can really help to finesse a design. As browser support becomes more mainstream, you’ll already be familiar and practised with RGBA and ready to go.


  7. Working With RGBA Colour

    Comments Off

    November 30, 2009 by atxryan

    When Tim and I were discussing the redesign of this site last year, one of the clear goals was to have a graphical style without making the pages heavy with a lot of images. When we launched, a lot of people were surprised that the design wasn’t buil…


  8. Obama faces risk of a wartime presidency – CNN.com

    Comments Off

    November 30, 2009 by atxryan

    “President Lyndon Johnson was on the verge of becoming a transformative president in the winter of 1965. Since taking office, …
    keep reading


  9. Krugman: Deficit Hawks Trying To Scare People With Big, Out-Of-Context Numbers

    Comments Off

    November 30, 2009 by atxryan

    Krugman's argument ignores the fact that very large numbers like this will always serve as a 'debt scare' (and for good reason!) in our democracy.


  10. WordPress Google Calendar plugin – wpng-calendar

    Comments Off

    November 30, 2009 by atxryan