Banderas del mundo realizadas con HTML

Publicado por: ★★★★★ Oliver ★★★★★ en: -

Hoy es un gusto poder presentarte un experimento realizado con HTML. Tal vez no sea de gran importancia pero la verdad es muy bonito descubrir cosas con el HTML.
Y una de esas cosas descubiertas son estas banderas de algunos países del mundo.

Banderas realizadas con HTML

Las banderas son armadas con bordes e imágenes (escudos).
Aquí un ejemplo con la bandera mexicana: 


<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 140px; border-left:105px solid #009900; border-right:105px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding: 15px; margin-top: 15px;" src="URL-de-imagen-del-escudo" /></div>
</div>

0
Color del lado izquierdo
0
Color del centro
0
Color del lado derecho
0
Alto de la bandera
0
Ancho de la bandera
0
Alineación del escudo

Al colocar la URL de la imagen del escudo procura variar su tamaño de la siguiente forma:

URL con tamaño original:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VZsim16_R_khYNccFozSw32giWAqBU3nN1Gmscc4pNU5qpAbWlDbMUTQQQyr73zoK0fm_7EVqllzzieWRq9Eymd4khg1R1TMAj6fsOBqeOibQKja-x553lfysnsiprHTCizb8MbWoto/1600/Esc%2BNac%2BMex.png

URL con tamaño variado:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VZsim16_R_khYNccFozSw32giWAqBU3nN1Gmscc4pNU5qpAbWlDbMUTQQQyr73zoK0fm_7EVqllzzieWRq9Eymd4khg1R1TMAj6fsOBqeOibQKja-x553lfysnsiprHTCizb8MbWoto/110/Esc%2BNac%2BMex.png

Las 31 banderas realizadas son de:

Afganistán


Alemania


Argentina


Bélgica


Bolivia


Brasil


Bulgaria


Camerún


Canadá


China


Colombia


Corea del sur


Egipto


El Salvador


España


Francia


Guatemala


Holanda


Irlanda


Italia


Japón


Nicaragua


Paraguay


Perú


Polonia


República checa


Rusia


Ucrania


Venezuela


Vietnam


Códigos: 

<!-- Afganistán -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FF0000; height: 180px; width: 140px; border-left:105px solid #000000; border-right:105px solid #009900; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding: 15px; margin-top: 25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDgM60anoiuYmc8nAeT85-PIICqJuzjP9iMyx3NBHiUDHu6w4E9yFPftvwHnns9Pd4gVC0g5x3otbTTE-tKeTH96Ot88fOm9oxCSjvoKEUEH0H0W7mKvlCU5K1688e5ZE3hV8ZeO34Raw/s110/Esc+Nac+Afg.png" /></div>
</div>

<!-- Alemania -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FF0000; height: 60px; width: 350px; border-top:60px solid #000000; border-bottom:60px solid #FFCC00; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Argentina -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 70px; width: 350px; border-top:55px solid #008FFF; border-bottom:55px solid #008FFF; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 150px; margin-top: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih7cL-9242uLBxeiPUrhjqf5x-DmNrJeNVxWYiceitv3jvswcR0lKoifC1pvVEEME3v6C5htDC81CUrDlY40fP7hmvCpp_IT1IftKFOg4m8IXkRV3kEN97v1QkYCuhzk7GeRvio6FNjMo/s60/Esc+Nac+Arg.png" /></div>
</div>

<!-- Bélgica -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFEE00; height: 180px; width: 140px; border-left:105px solid #000000; border-right:105px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Bolivia -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFEE00; height: 70px; width: 350px; border-top:55px solid #FF2222; border-bottom:55px solid #229900; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 150px; margin-top: 8px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBYkw8OB9YzT1PU6r0P8DiYgzALEvKUTB9drH1jpyNOFXQDHYd7MBTxBwP-i5SJp4tJ2yMk4MnKgxY8BfPQRpXaP48XsbwhHF3PiXJf2BsyHX2_7SoyLXnou7sZcHEq4DppNCKWd9gWpU/s60/Esc+Nac+Bol.png" /></div>
</div>

<!-- Brasil -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #009900; height: 180px; width: 350px; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img width="250" height="160" style="padding-left: 50px; margin-top: 13px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipPbqUukf0E0uKHnyYM4Vw04P7KG3Mev02WAgBnlVMH3JJdtTM0AnoVGQ04w2Jszewndy8mB6zYy1qTJx1PRZBWsvHK969DgpxmqGj4hIvKYWsyjVx8z1_eyBqoHOSONGgxsxlKhdFdW4/s230/Es+Nac+Bra.png" /></div>
</div>

<!-- Bulgaria -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #007733; height: 70px; width: 350px; border-top:55px solid #FFFFFF; border-bottom:55px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Camerún -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FF0000; height: 180px; width: 140px; border-left:105px solid #007755; border-right:105px solid #FFDD00; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding: 40px; margin-top: 20px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi2uTQWmFZ5RrDXMoyhF1nPk2DLfWzuDm2c64fyybOj-leb5hYiSO-vPy8f8zvaB4P9ayNOlYr2xN4yRroWUuHAOKUk2eqfDJdLRHqPl6gv2m54h_-JrGE7f1-d__oAqv5nl_5CjpDtWg/s60/Esc+Nac+Cam.png" /></div>
</div>

<!-- Canadá -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 140px; border-left:105px solid #FF0000; border-right:105px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding: 18px; margin-top: 15px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJdXR76Zc5j-_gH3XJ7SdRsm2rNZ6IXGS2dVLumxe1tkDG1DQlRdeNO_5nUSrggrZw7C5ZSSH3hUs_zjSIVAZYm2Tuim-FtkR6UqQO1zVWwIICKLTvxnCoybO7V1eziGQCBskAiP8ID0/s110/Esc+Nac+Can.png" /></div>
</div>

<!-- China -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FF0000; height: 180px; width: 350px; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding: 10px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_mZ9qBTsKp81QZOtE_kn-3aZX8uJYxlADik7FbPYKY3MDk-_z_4jAJAeS-87_cw0NxoW4Lf3ibm2xfwXE_CDz4C5sBIZLiiRXW_8i3Z0dW4U89pTb9w-hBoZokW-5uke_AeNPUfRuJx8/s100/Esc+Nac+Chi.png" /></div>
</div>

<!-- Colombia -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #0000FF; height: 50px; width: 350px; border-top:80px solid #FFEE00; border-bottom:50px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;
"></div>
</div>

<!-- Corea del sur -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 350px; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 75px; margin-top: 13px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibe91HQMfe7wzJZtodTEzs8A6nN373Ml26S0hkgP3EZ0w5pOZUlrectcNgJaKAiYUI29EjVbPO0XkPO3ZTdNYD7dvxCnllBz9jBElB_3DMssPr4i60MTG3w07G9MZF_8zmXcsd4Y3ofts/s200/Esc+Nac+C+S.png" /></div>
</div>

<!-- Egipto -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 70px; width: 350px; border-top:55px solid #DD2222; border-bottom:55px solid #000000; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 155px; margin-top: 3px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBnx76Klk-XpQnyQCMfBZZWYWqNvV_fy_CrTK5IPGo4Cw4WkURBPfUM6wAYgoAqLRORFpOcykkIFSuIkTrflI6tSZ0JWjvOSl7T-n-R7yHUC7kScg4OZNlBM8COrCSb0JY8xcFNBmle2E/s65/Esc+Nac+Egi.png" /></div>
</div>

<!-- El Salvador -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 70px; width: 350px; border-top:55px solid #0044DD; border-bottom:55px solid #0044DD; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 145px; margin-top: 8px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf-qwHGKXyEqttUdG-rdAAN6j3KnsAIL-7ndzLhbkwc0ZziQvNQ2Cats6AK88fb3Sh85xTrSCnl6bNm16swIzyMOCG0FLtbuiRSlXT2MmspI06Aq57SuUW4t2kZG8U-rZK58LlHJUFy74/s60/Esc+Nac+E+S.png" /></div>
</div>

<!-- España -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFCC00; height: 75px; width: 350px; border-top:50px solid #FF0000; border-bottom:50px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 60px; margin-top: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq52N8pRTG7ryDI8oPe_QOJLON7eO1p6r-FiUfxaFBzf0x65DHydQzV2KF64isbp2J_Yz4-1AHj3BwW7DkTeFaUyyIelZwJcjI3jaxvON-T71gaR10ZUaZhNGU4HBw5Oho_UeTHdd-CYU/s65/Esc+Nac+Esp.png" /></div>
</div>

<!-- Francia -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 140px; border-left:105px solid #0000FF; border-right:105px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;
"></div>
</div>

<!-- Guatemala -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 140px; border-left:105px solid #44AFFF; border-right:105px solid #44AFFF; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding: 20px; margin-top: 28px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKv-78BJcRP1Mp6CesfsZeyYIMJQb5UqL3wZMxUSS25SHZ_Bi4JscZAmYorzwMx_a9TzR39jlRVlUS3FdTb1Ww1e3dkmmlmHYQ3rMlq4rK8F7X4G_MfuQ0RspQ8QhouN-Bylc1cUyHkq4/s100/Esc+Nac+Gua.png" /></div>
</div>

<!-- Holanda -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 70px; width: 350px; border-top:55px solid #FF2222; border-bottom:55px solid #0000FF; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Irlanda -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 140px; border-left:105px solid #449900; border-right:105px solid #FF8222; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Italia -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 140px; border-left:105px solid #009900; border-right:105px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Japón -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 350px; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 115px; margin-top: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivseiqrEgj3rDXG_yirynSYcC0yruG7rHGhzKYB03rzUPp23dHCQ9eWtB6Vskn7gye-3wUjVI0U69uZg18cH_fz4pQugufjqIIRFP3s8Q6xhCnz63bhJJsSzatr1nAK3hUKE6-DxfZNwQ/s120/Esc+Nac+Jap.png" /></div>
</div>

<!-- Nicaragua -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 70px; width: 350px; border-top:55px solid #0055DD; border-bottom:55px solid #0055DD; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 145px; margin-top: 3px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirMgSEf4bchCs8nbcyKP14aHJkMyWINjTu7epgYQteMph3t6GHfJX0MgPh0krSVZe7ZFAJ1i2QrLS6i_2V_iiv7HrugmIeorKSph4HOFrncUzqbvxJ_zHNLHps_R7VcHoKKsVxzHZB9W8/s65/Esc+Nac+Nic.png" /></div>
</div>

<!-- Paraguay -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 70px; width: 350px; border-top:55px solid #FF0000; border-bottom:55px solid #0000FF; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 145px; margin-top: 6px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV-PDLkdOmTwPv3ZFFB1o1FAZSj4jkZI9JdmB3PWZ-6bK5v_AdaN9LIjpsRtHH_Z_cHGf1JjiO49X7E8ocSJurm-nVE5zFdPrTz96cCkB_3PJtPbQarIFg8Y8W84MKvVHbblziw1FTo6E/s60/Esc+Nac+Par.png" /></div>
</div>

<!-- Perú -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 180px; width: 140px; border-left:105px solid #FF0000; border-right:105px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding: 15px; margin-top: 20px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMAY1QMsNxZJKsSpv2VnJHn717ZpSUn9vo0O3JgvIX2LqUwO7s6YlAT4zkbjIdU1ozAbgJL7GsMu2zT8bsmcKqmMHGFHia76AOTcaRmqHfkDkohL8I2VPa-nVfOPo6RV660WSfZto9hPI/s110/Esc+Nac+Per.png" /></div>
</div>

<!-- Polonia -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="height: 0px; width: 350px; border-top:90px solid #FFFFFF; border-bottom:90px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- República checa -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FFFFFF; height: 0px; width: 200px; border-left:150px solid #0055BB; border-right:0px solid transparent; border-top:90px solid #FFFFFF; border-bottom:90px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Rusia -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #0000FF; height: 60px; width: 350px; border-top:60px solid #FFFFFF; border-bottom:60px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Ucrania -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="height: 0px; width: 350px; border-top:90px solid #0077BB; border-bottom:90px solid #FFEE00; border-radius: 10px; box-shadow: 0 0 20px #000000;"></div>
</div>

<!-- Venezuela -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #2200FF; height: 70px; width: 350px; border-top:55px solid #FFEE00; border-bottom:55px solid #FF0000; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 110px; margin-top: 3px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIo5BJIwOsxcZfVd_NAWXaASiujAxudjyuFt6JjGu6kG9EWCsZRowtbTiBMY7uCG8__e8jtDGvCu3rnGE2lawhhA1yj6WoTr2qUNeqZ4-Al8R0E8D-KH7iv1RIILHGwKHmQfWEA6CuHTA/s140/Esc+Nac+Ven.png" /></div>
</div>

<!-- Vietnam -->
<div style="border:1px solid #000000; width: 350px; border-radius: 10px;">
<div style="background-color: #FF0000; height: 180px; width: 350px; border-radius: 10px; box-shadow: 0 0 20px #000000;"><img style="padding-left: 120px; margin-top: 40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQBCJTiDXGCDU9OPpLaWnfIKi1oZfNURQn5QcZwcHRCurKpsySWO4YBplgq0LLxOCqPUWCE0E1vPM39LvIBE790YpYbTOupyaaAfBipZWGCbs4NwjU5kNhtVYyiozTgptKBiceLVsHXj8/s110/Esc+Nac+Vie.png" /></div>
</div>

Si probaste los ejemplos te diste cuenta que tienen incluidas sus URL las banderas que poseen escudo, si embargo para mayor seguridad es mejor que las alojes tu mismo(a) en blogger.
No olvides hacer tus propias banderas…hasta la próxima!

2 Respuestas hasta el momento

  1. Anónimo Dice:
    17 de marzo de 2012, 21:07

    Oh, qué bonito!! ^^ ahi veo mi bandera :D Perú. Gran tutorial, gracias por compartirlo =)

  2. ★★★★★ Oliver ★★★★★ Dice:
    18 de marzo de 2012, 18:00

    Si, muy bonito descubrir cosas nuevas y nuestras banderas son muy bonitas también... gracias por tu visita!...espero verte pronto!

Deja un comentario

                                                                                                                                                                                                                                                                                                                                                       
Ciudad Blogger

Hola, Bienvenido a Blog 2000!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Blog 2000 Blog 2000 Blog 2000 Blog 2000

Categorías ........... Posts recientes

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Blog 2000