CSSPLAY
Doing it with style
Doing it with style
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.
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 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:
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
