HTML5 can be fun and challenging when you begin to learn how to use it to create your websites. You have new tags and selectors to learn. The way you build your website changes when you use tags like header, footer and aside. You have to build a few sites before you are comfortable with HTML5. Developers like to learn by doing and by reviewing what others have done. Design Modo wrote an article showing you 20+ Professional Examples of Websites Using HTML5. Use these examples to be inspired and to learn how you can use HTML 5 to build better websites and web apps.
Category: CSS Page 9 of 10
What is vintage design? Vintage Design uses design elements that are “old-fashioned” or vintage. It focuses on design elements that were popular during the 1950s to 1980s or even older. You can create an old-fashioned motif by incorporating specific fonts, colors and graphics from a selected era. By using these specific design elements on your website, you can achieve a look that won’t be considered boring.
While researching Vintage Design for a client, I found the following articles:
- Retro and Vintage In Modern Web Design Smashing Magazine defines what retro and vintage design is. They show you the specific design elements that make up the look and provide examples so that you can create websites using Vintage Design.
- Vintage Design may use aged or Old-fashioned photos. You can achieve the Old fashioned Photo Effect with modern photos. Change your photos using Photoshop to look like vintage photographs.
- Another aspect of Vintage Design is how the backgrounds look. The backgrounds look aged, dark or stained. You can find some Vintage Retro Backgrounds to incorporate your designs.
- WebDesignShock has a collection of 175 Vintage and Retro Design Elements. Their collection includes icons, patterns, backgrounds, fonts and more. You can download them in PSD format for including in your websites.
- Vintage Design is not complete without fonts that help transport you to the past. WebDesignLedger has collected 30 Fonts Perfect for Vintage and Retro Style Design. Use these fonts to complete the old-fashioned look that you want.
For additional inspiration, check out 50 Retro and Vintage Web Designs to Inspire You.
Crearegroup created a video that demonstrates Multiple Backgrounds using CSS3. This technique makes it easier to use background images that grow as your text expands. In CSS2, you needed to use multiple divs to create this effect. This video shows you how to use Multiple Background images using only one div. They also explain that this technique is not bullet proof or usable in multiple browsers. Only modern browsers seem to be able to render this technique. If you would like to use this technique, consider what browsers your visitors use before implementing it on your website.
You can use standard web friendly fonts like Helvetica, Arial, Georgia in your web designs. Sometimes your design calls for a more decorative font. With CSS3, you can use a more decorative font without restoring to using images. Web Designer Wall shows you in CSS3 @font-face Design Guide how to use these decorative fonts and provide tips on how to make your designs look good when a browser doesn’t support @font-face. The follow up post @font-face Solutions & Suggestions explains the three main options for implementing @font-face and the pros and cons of each option. If you want to implement more decorative fonts in your web designs, use these two article to help make your designs bulletproof.
What to learn how to use HTML5 tags in your projects? I found three resources that can help you learn how to apply an HTML5 tag quickly.
- The html5 tutorials has a sidebar list that allows you to open the tag description that you are interested in. It defines the tag, shows you an example and describes each attribute if any.
- HTML5 Tag Reference also has a sidebar list that allows you to open the tag that you are interested in. The home page shows you the new tags and tags not supported in HTML5. It defines the tag, shows you an example and describes each attribute if any. They also tell you the differences between HTML4 and HTML5. Plus W3Schools provides you with tips and notes on using the selected tag.
- Structural Tags in HTML5 defines the new structure tags in HTML5 that can replace the div. It provides a simple example that demonstrates the use of these tags. You also learn how to get JavaScript to get IE to recognize HTML5 elements.
Until you have create a few HTML5 websites, you can use these resources to help you learn it quickly.