JSBIT.CH

I’ve been making an effort to learn more about design. Actually, ‘making an effort’ is pushing it a fair bit, but I have done some reading up on typography and grids. During my trepidatious foray into this brave new world, I was amazed to find that the old BBC logo was ~~Helvetica~~ (see edit 2 below) - apparently along with everything else on the planet.

So: this is just a quick homage off the top of my head to the old logo, purely for nostalgic enjoyment, and a little bit to test out some CSS3 features.

I used text-shadow and its chain-able properties to create that “90s VHS” look, around the text.

I also used the experimental -webkit-filter: blur in chrome to blur the whole thing, in order to look even VHS-ier.

I used transform: skew instead of font-style italic, as I believe the boxes were skewed in the original, and skewing an italicised font looks ridiculous.

That’s about it really!

I’d love it if anyone would fork and improve this on CSS Deck.

http://cssdeck.com/labs/7s8rwkoybm

Cheers!

JS x

EDIT: I awoke to find this has been viewed 1400 times in 5 hours, so I dug the original logo out of wikipedia, and fixed the colouring of the boxes.

EDIT 2: Turns out Wikipedia is wrong, so that let be a lesson to you! According to this more thorough inspection, it appears to be some form of Univers, http://www2.tv-ark.org.uk/bbcother/corporate_logo.html. I’m going to leave it as Helvetica/Arial, as it was only a quick bit of fun in pure CSS, and thus use widely available web fonts.

Screenshot included for non-webkit/mobile users:

Check out other CSS logos here