I just made a new avatar, but I only used Photoshop to shave off the grey background to save it as a png with transparent background. A quick post to show you how ...

Here is the How

  • 1. I made a screenshot of part of the background image of Exploring the web
  • 2. I wanted to have BB (Bob Belderbos) on top of that so I set up a h1 element with a span wrapped inside (for the matter of this exercise any elements would do because I am about to style them with CSS)
  • 3. I gave h1 the background of the towers and all styles (span could inherit).
  • 4. I used the span (child) tag for some specific styles:

    a. BB to be transparent => opacity: .7; 

    b. tweak a bit the positioning => position: relative; top: 0px; right: 15px;

Why this exercise?

Usually this goes as quick with Photoshop but I wanted to use the Limelight Google font (font of the headers on this blog) and I was too lazy to import it into Photoshop.

I think the conclusion is: CSS(3) is very versatile to quickly apply styles to your designs. It's one of the easiest languages to learn, and I use it for mockups often (much more than Photoshop) due to its flexibility


Bob Belderbos

Software Developer, Pythonista, Data Geek, Student of Life. About me