Steve Fitzpatrick

Playing with HTML and CSS to create flags out of nothing has been great fun, especially when it leads me to discover tags and elements that I had never previously happened upon.

While putting together The Gambia flag, I was convinced that I could somehow draw five different stripes by using a single HTML div.  And I've found out how.

OUTLINE
I found the CSS "Outline" tag while using the excellent http://css3generator.com . It's a CSS2 tag, but I'd never really noticed it before, what with IE completely ignoring its existence since ever.

Layman-ly it allows you to put a second border around your element.  And I've used this to create a double-border effect and draw a North Korea flag.

HTML
    <div id="north-korea" class="flag" title="North Korea">
        <div class="stripes"></div>
    </div>

CSS
    #north-korea .stripes{
        top: 33px; /* The box doesn't start at the offset tag, but the old-style border. */

                height: 122px; width: 300px;  /* Red bit is 122px high */

        background: #ed1d25;  /* Red background */

        border-top: 6px solid #fff;  /* Top white border    */
        border-bottom: 6px solid #fff;  /* Bottom white border */

        outline: 33px solid #034da2;  /* Top and bottom blue bits.  Left and right do exist, but my main flag has an overflow: hidden (see below) */
    }

    .flag{
        display: block; position: relative;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        float: left;
        margin: 0 20px 20px 0;
        overflow: hidden;
        background: #fff;
    }

So, there you have it, a nice new CSS rule for me to abuse.

And here's the finished CSS/HTML-only North Korea flag. 

Love and beer.

All flags: http://stevefitzpatrick.co.uk/demos/flags/

To get this far, I've had to click here:

Ignore the "Change" button shouting for my attention

Fill out this:

And after all of that I now have to choose between three tightly-packed buttons, each with very different consequences:

Feel free to have a super-alpha play with my new toy

http://close.st/

You can search for things near you by adding in that thing at the end of the URL...

http://close.st/kebab
http://close.st/station
http://close.st//HMV 
http://close.st/Sainsburys 

It is untested. It will probably break.

And if you get London instead of where you are, then all attempts at finding your location failed.  Unless you are in London.

Feel free to leave any comments or suggestions

In the work-abyss between dropping my daughter off at nursery and picking her up again, I gave myself a geek-treat and put together three of my all-time favourite flags.

For new visitors, these aren't images, they have been created with only HTML and CSS. 

All my flags live on this page: CSS Flags: http://stevefitzpatrick.co.uk/demos/flags/. 

And super-thanks to @cootetom for Digging it http://digg.com/design/CSS3_World_Flags

Seychelles

The Gambia

Namibia (Needed a bit of CSS3 here)

And here's how IE7 renders Namibia.  Awww, bless.

Why are you still here?  Go make your own.

http://more.stevefitzpatrick.co.uk/building-a-japanese-then-south-korean-flag-wi

I managed to make a bit of time this evening to create a new flag, USSR.

As before, all of the colours and shapes on the page are pure HTML and CSS.  No images, no letters or numbers.

I don't have time right now to walk through the exact code needed to replicate it, but if you look at the last flag on my CSS3 flags page, I'm sure you'll be able to work it out - you're a clever chap.

CSS3 Flag Page: http://stevefitzpatrick.co.uk/demos/flags/

And as an aside, I'm starting to absolutely adore IE7's attempts at rendering these.

I parked a few spare domains with Sedo, just to see if I'd get any offers.  

Nothing has happened in a few months, so I decided to close my account.

As there was no obvious link or button, I trotted off to their Help Centre.

Click here to download:

video.mp4 (6546 KB)

Here's how it should be done.

Thanks to some Sugru (http://sugru.com), they are now child-proof, guaranteed*.

*Not a guarantee.

I've always wanted to find out how people create amazing things using the same CSS that (back in 1998) I believed was only for font colours. This post will go through the steps I took to make a Japanese, and then a South Korean flag in only CSS and HTML. No images, SVG or Canvas. Just common-garden HTML.

With triangles conquered, I wanted to attempt something else - circles.  And the ultimate circle flag is Japan's : http://en.wikipedia.org/wiki/File:Flag_of_Japan.svg

Read more …

Google Docs has an amazing automatic import HTML feature.

I run the office World Cup Fantasy Football tournament, and for the first week I was manually copy and pasting the player scores from The Sun website. 

I used to dabble a bit in Excel VBA, so decided to have a look at Google Scripts to see if I could do this automatically.

Unfortunately, before I got the chance to even crack open its script editor I found a bloody simple answer.

That forumla at the top is going to that DreamTeamFC website, and pulling in the data it finds in the 0th (i.e. the first one it finds) element TABLE. 

The table content in row 2 downward is automatic.  I didn't type it in. 

I can use it now in my spreadsheet, or even manipulate it and use it as a database for another application.

Eas-ies.