Information
This has been inspired by Maurício Samy Silva ~ UK Flag
I was a little disappointed that Maurício's flag was not available to IE users (stopping a high percentage of visitors from seeing our beautiful flag) so set about rectifying this.
The above is an accurate 1:2 representation of the Union Jack with it's offset diagonal red cross (so that you know which way up it goes). See Union Jack Contruction.
As with Maurício's flag, this has all been done using 'border art' but with my version there is no need for border transparencies.
Works in IE5.5, IE6, FF, Mozilla and Opera.
This example shows how to break simple images into easily constructed blocks and triangles and use layering to get the desired results.
28th April 2005
To clarify the correct way to fly the union flag (the word "jack" should only be used when the flag is flown from a "Jackstaff" ie onboard a ship):
Note that it is NOT symmetrical! Look at the white diagonals. You fly the flag the right way up with the wider white diagonal on top, next to the pole. As usual, the pole is assumed to be on the left here.
Flying the flag upside down is "lese Majeste" (which means: insulting the Crown), and is theoretically still a crime in the UK and its commonwealth! It can, however, be flown upside down as a distress signal.
How its is done
THE INDIVIDUAL BITS
The .flag container:
The .top_blue inverted pyramid:
The .bottom_blue pyramid:
The .left_blue left pyramid:
The .right_blue right pyramid:
The .horiz horizontal red/white bar:
The .top_vert top vertical red/white bar:
The .bot_vert bottom vertical red/white bar:
The .bka series of diagonal containers:
The .lrtb_left diagonal left/right/top/bottom ~ left end:
The .lrtb_right diagonal left/right/top/bottom ~ right end:
The .lrbt_left diagonal left/right/bottom/top ~ left end:
The .lrbt_right diagonal left/right/bottom/top ~ right end:
Putting it all together
Putting the ends into the diagonal containers:
top/left to bottom/right:
and bottom/left to top/right:
Position the top blue pyramid:
Position the bottom blue pyramid:
Position the left blue pyramid:
Position the right blue pyramid:
Position the horizontal red/white bar (on top of the left/right pyramids):
Position the top vertical red/white bar (on top of the top blue pyramid):
Position the bottom vertical red/white bar (on top of the bottom blue pyramid):
Stagger the diagonal boxes from top/left to bottom/right using absolute positions. Increasing x values by 16px and y values by 8px and skipping the horizontal bar:
And finally stagger the diagonal boxes from bottom/left to top/right using absolute positions. Increasing x values by 16px and decreasing y values by 8px and again skipping the horizontal bar:
Copyright
Please ask permission before using or copying this example to your own web site.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
- Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
- We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London
- Register Domain Name
- web designers company providing number 1 services for website design and SEO
- IT Support Bristol
- Web Design
- Website Designers - Compare quotes from local website designers
- Top Website Design Company CWD.
Get the Perfect Website! - Web Design Birmingham - Expert web design, marketing and support
- UK's white label Web Design specialist
- Affordable Web Design from EU Design Studio
CSS play Testimonial
"The 
web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth