{"id":160,"date":"2008-07-01T07:00:17","date_gmt":"2008-07-01T12:00:17","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=160"},"modified":"2008-07-01T07:00:17","modified_gmt":"2008-07-01T12:00:17","slug":"css-american-flag","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-american-flag\/","title":{"rendered":"Build an American Flag out of XHTML and CSS"},"content":{"rendered":"<p><a href='http:\/\/cssnewbie.com\/example\/us-flag'><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/06\/us-flag.gif\" alt=\"\" title=\"Click to see this flag in action.\" width=\"400\" height=\"250\" class=\"alignnone size-full wp-image-161\" \/><\/a><\/p>\n<p>I\u2019d like to wish a very happy 4th of July in advance to all the loyal, lovely, learning readers of CSSnewbie. To celebrate our upcoming Independence Day (because I am a Yankee), I took a bit of time and created the CSS and XHTML USA flag you see above. Visage above is but an image, but here it is again in an iframe so you can see it in action:<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/cssnewbie.com\/example\/us-flag\/\" width=\"400\" height=\"250\" style=\"overflow: hidden;\"><\/iframe><\/p>\n<p>And you can click here to see how it\u2019s done (just view the source):<\/p>\n<p><a href=\"http:\/\/cssnewbie.com\/example\/us-flag\/\" class=\"example\">View Example<\/a><\/p>\n<p>If you like this flag, feel free to copy the source onto your own websites to display your own CSS-based American flag to wow your friends and impress the ladies (or gents, as you prefer). And for a nice extra touch, highlight the flag. You\u2019ll find a hidden message along the right-hand side.<\/p>\n<p>So how is it all done? Read on!<\/p>\n<h3>Building the American Flag out of XHTML and CSS<\/h3>\n<p>As always, we start with the XHTML. The basic structure is this:<\/p>\n<pre lang=\"html4strict\" escaped=\"true\" line=\"1\">&lt;div id=&quot;flag&quot;&gt;\n\t&lt;div class=&quot;blue&quot;&gt;\n\t\t...stars go here...\n\t&lt;\/div&gt;\n\t...stripes go here...\n&lt;\/div&gt;<\/pre>\n<p>Pretty basic, really. And the stars and stripes themselves are pretty darn easy, too:<\/p>\n<pre lang=\"html4strict\" escaped=\"true\" line=\"1\">&lt;p&gt;&amp;#9733;&amp;#9733;&amp;#9733;&amp;#9733;&amp;#9733;&amp;#9733;&lt;\/p&gt;\n&lt;p&gt;&amp;#9733;&amp;#9733;&amp;#9733;&amp;#9733;&amp;#9733;&lt;\/p&gt;\n...9 alternating rows of 6 and 5 characters...<\/pre>\n<p>Those funny characters in the paragraphs are ANSI character entities. It\u2019s a way of calling on characters that exist in typefaces, but not on your keyboard. The character code above is for a five-pointed star. It should work in nearly every browser on nearly every computer, but I\u2019ve noticed that some (but not all!) installations of Internet Explorer have problems finding the star. If you\u2019d prefer, you could always just use asterisks instead.<\/p>\n<pre lang=\"html4strict\" escaped=\"true\" line=\"1\">&lt;p class=&quot;red stripe&quot;&gt;Your hidden message&lt;\/p&gt;\n&lt;p class=&quot;white stripe&quot;&gt;would go in here.&lt;\/p&gt;\n...13 alternating rows of &quot;red&quot; and &quot;white&quot; classed paragraphs...<\/pre>\n<p>The stripes are equally simple. Each stripe is a paragraph with a \u201cstripe\u201d class and either a \u201cred\u201d or \u201cwhite\u201d class, depending on which you want it to be.  You\u2019ll need thirteen of them in all, starting and ending on red. And I know I\u2019ve mentioned before that <a href=\"http:\/\/cssnewbie.com\/combating-classitis\/\" title=\"Combating Classitis\">it\u2019s bad practice to name classes according to what they look like instead of what they are,<\/a> but since this is a purely <em>visual<\/em> exercise, I think we can let that slide. :)<\/p>\n<p>So let\u2019s move on to the CSS. We\u2019ll start by defining the area around the flag contents:<\/p>\n<pre lang=\"css\" escaped=\"true\" line=\"1\">#flag {\n\tfont-family: \"Lucida Sans Regular\", sans-serif;\n\twidth: 398px;\n\tborder: 1px solid #ddd;\n\tmargin: 0 auto;\n\tposition: relative; }<\/pre>\n<p>I\u2019ve given the flag an overall width of 400 pixels (398 plus two 1 pixel borders on either side) so that it would fit nicely on most websites, but you could really make it any size you wanted. The margin is just centering the flag: you could remove it if you wanted, and everything would function just fine. The \u201cposition: relative\u201d rule is important here, because it allows us to <a href=\"http:\/\/cssnewbie.com\/harnessing-positioning-1\/\" title=\"Harnessing CSS Positioning\">absolutely position elements within our relatively positioned box.<\/a> And I\u2019ve specified the font-family that I have because it\u2019s one that I know has the star specified in its font file, and I\u2019m hoping that will help Internet Explorer find it more easily. More modern browsers like Firefox and Safari, so far as I can see, tend to find the star character even without this help.<\/p>\n<p>So now that we have an outline, let\u2019s build the blue field and white stars:<\/p>\n<pre lang=\"css\" escaped=\"true\" line=\"1\">.blue {\n\tposition: absolute; \n\ttop: 0;\n\tleft: 0;\n\twidth: auto !important;\n\twidth: 180px;\n\tbackground-color: #00348c;\n\tcolor: #fff;\n\ttext-align: center;\n\tpadding: 2px 0 5px 8px !important;\n\tpadding: 2px 0 5px 0; }\n.blue p {\n\tletter-spacing: 12px;\n\theight: 14px;\n\tfont-size: 20px;\n\tline-height: 14px;\n\tmargin: 0; }<\/pre>\n<p>To start, we\u2019re absolutely positioning the area to the top-left corner of our flag. Next, we\u2019re specifying two widths: a width of \u201cauto\u201d that most browsers read, and a specific width for Internet Explorer (which doesn\u2019t understand the !important rule). Without these two rules, most browsers will work just fine, but in IE6 the blue field will take up the entire top 2\/3 of our flag. Which, incidentally, creates a pretty cool flag&#8230; just not the American one. :)<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/06\/ie6-flag.gif\" alt=\"\" title=\"The American flag in Internet Explorer 6 without the width rule.\" width=\"400\" height=\"300\" class=\"alignnone size-full wp-image-162\" \/><\/p>\n<p>Next up, we\u2019re specifying a nice deep blue background color, and setting our font color to white. We\u2019re also center aligning the text: this is what allows our alternating-sized rows to align just like the real US flag does. And we\u2019re also applying some padding. Unfortunately, the padding looked a little wonky in IE6 (go figure), so I used the !important rule again to add a unique padding rule for that browser.<\/p>\n<p>In the paragraphs containing the stars, we\u2019ve specified a letter-spacing: this lets us get much more accurate spacing results than if we\u2019d relied on regular spaces or non-breaking spaces (&amp;nbsp;) between our stars. Then we specify a height, font-size, and line-height for each of the paragraphs. The height and font-size are the same, to center the star within the paragraph. The font-size is actually <em>larger<\/em>, however, which allows us to overlay our paragraphs slightly. The result is much more like the star pattern on the real American flag. I\u2019m also setting the margin to zero, because otherwise the default paragraph margin would wreak havoc with our spacing.<\/p>\n<p>Next up, let\u2019s CSS-ify the stripes:<\/p>\n<pre lang=\"css\" escaped=\"true\" line=\"1\">p.stripe {\n\theight: 19px;\n\tfont-weight: bold;\n\ttext-align: right;\n\tpadding: 0 5px;\n\tmargin: 0; }\n.red {\n\tcolor: #f70029;\n\tbackground-color: #f70029; }\n.white {\n\tcolor: #fff;\n\tbackground-color: #fff; }<\/pre>\n<p>Each of the stripes in my example is 19 pixels tall. This is the result of some pretty irregular math that I won\u2019t go into detail about: suffice it to say, the goal is to get the bottom of the blue field to line up with the bottom of the 9th stripe. I\u2019m also applying a boldface, aligning the text to the right, and applying margins and padding. This is all for the \u201csecret\u201d hidden messages inside the stripes. If  you\u2019re not including a message in your flag, those rules aren\u2019t necessary and can be trimmed.<\/p>\n<p>After that, we\u2019re styling the red and blue stripes. It\u2019s a simple thing: we\u2019re just setting both the foreground (text) and background colors to the same shade, so that the text is invisible until it\u2019s highlighted.<\/p>\n<p>And finally, I added a few special rules just for the highlighted text:<\/p>\n<pre lang=\"css\" escaped=\"true\" line=\"1\">.red::-moz-selection {\n\tcolor: #fff;\n\tbackground-color: #f70029; }\n.red::selection {\n\tcolor: #fff;\n\tbackground-color: #f70029; }\n.white::-moz-selection {\n\tcolor: #000;\n\tbackground-color: #fff; }\n.white::selection {\n\tcolor: #000;\n\tbackground-color: #fff; }<\/pre>\n<p>These are advanced selectors that don\u2019t work on every browser, but I think it\u2019s a nice effect for those that do (like Firefox and Safari). What we\u2019re doing is modifying the color of the selected text from the browser defaults to new variables. On the red stripes, we\u2019re setting the background color to the same red shade as the stripes themselves and turning the text white. On the white stripes, we\u2019re going with a white highlight and black text. The result is that the viewer never actually sees the \u201chighlighted\u201d background color: they just see the text magically appear when they select the flag.<\/p>\n<p>And voila! You\u2019ve built an American flag out of  XHTML and CSS. That should be good for at least one free beer at your friend\u2019s barbeque this weekend. You can click here to see it in action again:<\/p>\n<p><a href=\"http:\/\/cssnewbie.com\/example\/us-flag\/\" class=\"example\">View Example<\/a><\/p>\n<p>If you do use this anywhere, drop me a line in the comments. I\u2019d love to see it in action!<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>I\u2019d like to wish a very happy 4th of July in advance! To celebrate our upcoming Independence Day, I took a bit of time and created an American flag built out of CSS and XHTML. [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/css-american-flag\/\" title=\"Click to read 'Build an American Flag out of XHTML and CSS'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,182,192],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/160"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}