Article Summary
This article shows how to create and American Flag usinng only HTML and CSS
EarnWrite
HTML CSS American Flag
Rate This Article:
?
Log in for more options.
This article describes how I created an American Flag using HTML and CSS. This demonstration confirms that detailed images can be created by only using HTML and CSS.
Creating an American Flag using CSS and HTML
The CSS code is used to set pixel widths and color for the HTML elements. There are only three tags used to create the flag, one tag for each of the three colors. The three tags are <a>, <b> and <span>. The flag is mostly correct in that it has 50 stars and 13 stripes, seven of which are in the same rows as the blue star field. The rows of stars are also correctly staggered in alternating rosw of 6 and 5 stars each. Any incorrectnes would most likely be a matter of size proportions of the starts in relation to the stripes
Click here to view the HTML CSS American Flag
Additional Tags required for Cross Browser Compatibility
In order to get both Internet Explorer and Firefox to display the flag correctly a few additional commands had to be incorporated into the flags code. A non breaking blank space ( ) was required to be inside of each of the tags in order for the flag to appear when using Firefox, Internet Explorer would display the flag without the additional character. The CSS line-height and display:inline-block commands were required to make firefox display the elements as intended. Additionally a transitional doctype tag was employed to force the American flag to display similarly in the different browsers.
This is primarily intended to be an example of what can be done with CSS - It is true that by using this technique a variety of artistic and appealing web images could be created pixel by pixel, however it is unlikely to be used since other easier methods of image creation are readily available.
Article Tags
Related Articles
No related articles were found.
More Articles By amazing
HTML CSS American Flag
by amazing | in Internet | 1042 Views
This article shows how to create and American Flag usinng only HTML and CSS
Add a Comment
You must Login to enter comments.
Most Published Authors
Categories
- Arts, Crafts and Hobbies
- Automotive
- Business and Profession
- Computers
- Education
- Events and Holidays
- Family
- Fashion
- Food
- Games and Entertainment
- Health and Nutrition
- Home
- Internet
- Law and Government
- Media
- Money
- People, Places and Culture
- Plants and Animals
- Relationships
- Religion
- Science
- Sports and Recreation
- Earnwrite Help
Recent Comments
nice thoughts
by rehanawazir on 18 May 2012
in Master your mind
tried to change negative thinking
by rehanawazir on 18 May 2012
in Master your mind
Thank you.:-)
by TyperFinder2012 on 03 May 2012
in My LIttle home poems
Thank you, I enjoyed your poems.
by AndriyR on 03 May 2012
in My LIttle home poems
I suggest changing the name to Rounds 60 :) you have the same strategy as me!! :D Maybe we can become good friends. do you have facebook, or anything like that? oh and plz change RPD to RPK XD its bothering the heck outa me. you are very smart with this strategy, and you might want to include that after round 50 you want to use the Skullcrusher, TheM16Upgraded. its powerful, fast, and when running the train, you can buy ammo! :D plz comment on one of my strategies so iknow what to Fix:)
by dakotawalton on 03 May 2012
in Kino Der Toten Guide
Good job please check mine http://www.earnwrite.com/articles/Family/Grandparents/997/
by Rabz on 16 Apr 2012
in Why is my computer so slow ?
excellent good job.read mine http://www.earnwrite.com/articles/Education/Why Education Is Important/996/
by Rabz on 14 Apr 2012
in Meaning of SUCCESS.
sorry you think you know the Love i show my children Next time i need lotto numbers i'll write an article on that
by johnwojtan on 13 Apr 2012
in The Internet Monitoring Software That Can Save Your Child
John,What will save your son is your love and respect and communication and the examples you show him with *your* behavior. Do you truly want to demonstrate that his father is one secretly spying on him? The message--spoken or not--you are sending to your son is this: his own father does not trust him, his own father cannot sit down and tell his son his own feelings and fears, but instead spies secretly upon him. Learn to talk from your heart to his or you will have make much grief.
by Observer on 11 Apr 2012
in The Internet Monitoring Software That Can Save Your Child
You cannot describe love as "a problem teenagers fall into". This completely downrates the meaning of love itself, not to meantion any teens (like myself) reading this. You act as if only adults will read this, and give absolutely no helpful imformation directly towards a teen or teenagers themself.I recommend adding a section to this that describes what love REALLY is, and how to deal with it, how it passes, how it stablizes, it's structure over time and how it grows, and many types of love.
by dakotawalton on 29 Mar 2012
in EMOTIONS AND TEENS--- THE HIDDEN LIFE OF TEENAGERS