Introduction

This is a simple application for beginners that shows how to create an image gallery using HTML 5 and CSS 3 tools. We know that CSS is the acronym for Cascading Style Sheet that helps to design a form in a web application. CSS has three levels; they are level 1, level 2 and level 3. CSS level 3 is always used to develop an animated application with the help of HTML 5 tools. CSS 3 provides an advanced module used in web applications that include selectors, box models, 2D, and 3D transformation, animation and user interface. Now in this article, we have created an image gallery using CSS3 and HTML 5.
Step 1: First Open an HTML editor such as Notepad.
notepad.gif
Step 2: Add a Folder on Desktop.
folder.gif
Step 3: Open Visual Studio.
new application.gif
openapplication.gif
Step 4: Add an HTML file to your web application.
html.gif
Step 5 : Set the image in a <div> tag.
Code
  1. <div class="gallery">
  2. <a tabindex="1">
  3. <img src="images/IM1.gif" />
  4. </a>
  5. <a tabindex="1">
  6. <img src="images/IM10.gif" />
  7. </a>
  8. <a tabindex="1">
  9. <img src="images/DSC03240 - Copy.JPG"/ >
  10. </a>
  11. <a tabindex="1">
  12. <img src="images/DSC03240.JPG" />
  13. </a>
  14. <a tabindex="1">
  15. <img src="images/DSC03241 - Copy.JPG"/ >
  16. </a>
  17. <a tabindex="1">
  18. <img src="images/DSC03241.JPG" />
  19. </a>
  20. <a tabindex="1">
  21. <img src="images/DSC03243 - Copy.JPG" / >
  22. </a>
  23. <a tabindex="1">
  24. <img src="images/DSC03243.JPG" / >
  25. </a>
  26. <a tabindex="1">
  27. <img src="images/DSC03262 - Copy.JPG" / >
  28. </a>
  29. <a tabindex="1">
  30. <img src="images/DSC03262.JPG" />
  31. </a>
  32. <a tabindex="1">
  33. <img src="images/DSC03262.JPG" />
  34. </a>
  35. <a tabindex="1">
  36. <img src="images/DSC03267.JPG"/>
  37. </a>
  38. <a tabindex="1">
  39. <img src="images/DSC03282.JPG" />
  40. </a>
  41. <a tabindex="1">
  42. <img src="images/avatar.jpg" />
  43. </a>
  44. <a tabindex="1">
  45. <img src="images/c7e8afa53ad15d62ebbb636ff860d604.jpg" />
  46. </a>
  47. <a tabindex="1">
  48. <img src="images/SamTomato.jpg" />
  49. </a>
  50. <span class="closed">+</span>
  51. </div>
Step 6: Show all the resources used in the application.
jquery.gif
Step 7: The complete code of an image gallery application is given below.
Code
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="StyleSheet1.css" type="text/css"/>
  4. <title>manish</title>
  5. </head>
  6. <body>
  7. <div class="gallery">
  8. <a tabindex="1">
  9. <img src="images/IM1.gif" />
  10. </a>
  11. <a tabindex="1">
  12. <img src="images/IM10.gif" />
  13. </a>
  14. <a tabindex="1">
  15. <img src="images/DSC03240 - Copy.JPG"/ >
  16. </a>
  17. <a tabindex="1">
  18. <img src="images/DSC03240.JPG" />
  19. </a>
  20. <a tabindex="1">
  21. <img src="images/DSC03241 - Copy.JPG"/ >
  22. </a>
  23. <a tabindex="1">
  24. <img src="images/DSC03241.JPG" />
  25. </a>
  26. <a tabindex="1">
  27. <img src="images/DSC03243 - Copy.JPG" / >
  28. </a>
  29. <a tabindex="1">
  30. <img src="images/DSC03243.JPG" / >
  31. </a>
  32. <a tabindex="1">
  33. <img src="images/DSC03262 - Copy.JPG" / >
  34. </a>
  35. <a tabindex="1">
  36. <img src="images/DSC03262.JPG" />
  37. </a>
  38. <a tabindex="1">
  39. <img src="images/DSC03262.JPG" />
  40. </a>
  41. <a tabindex="1">
  42. <img src="images/DSC03267.JPG"/>
  43. </a>
  44. <a tabindex="1">
  45. <img src="images/DSC03282.JPG" />
  46. </a>
  47. <a tabindex="1">
  48. <img src="images/avatar.jpg" />
  49. </a>
  50. <a tabindex="1">
  51. <img src="images/c7e8afa53ad15d62ebbb636ff860d604.jpg" />
  52. </a>
  53. <a tabindex="1">
  54. <img src="images/SamTomato.jpg" />
  55. </a>
  56. <span class="closed">+</span>
  57. </div>
  58. <div style="display:none;">
  59. <script type="text/javascript">
  60. (function (w, c) {
  61. (w[c] = w[c] || []).push(function () {
  62. try {
  63. w.yaCounter1378189 = new Ya.Metrika({ id: 1378189,
  64. clickmap: true
  65. });
  66. }
  67. catch (e) { }
  68. });
  69. })(window, 'manish application');
  70. </script>
  71. </div>
  72. <script src="Scripts/watch.js" type="text/javascript" defer="defer"></script>
  73. </body>
  74. </html>
Step 8: Run an application on a browser.
out1.gif
ouuuu.gif
outut2.gif
Resources