While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look at them.
HTML5
HTML5 is the latest version of HTML or Hypertext Markup Language. It is currently only fully supported by a handful of browsers but the next year should see a large increase in usage. It isn’t expected to be completed until 2014, but the features that are available now are a great way to become acquainted with HTML5 and add some cool elements to your website.
Steve Jobs famously refuses to allow Flash on the iOS due to the many bugs and crashes it experiences, therefore, learning how to use the more intricate features of HTML5 is going to be a must for those who want to develop apps and iOS-friendly websites. With Google rolling out an HTML5-friendly version of YouTube, many developers are starting to see how important this system will become in the near future. However, with Firefox resisting some of the advent of HTML5, developers and designers are still feeling the need to cover all of their bases when implementing new features on a website.
The idea behind HTML5 is that it’s not one large entity, but rather made up of smaller parts that work together to create something innovative and advanced. Each browser may support different features of HTML5, which makes it important for those interested in coding to figure out which features they need and which will be supported by different browsers.
HTML5 simply builds upon the widespread success of HTML4. That means a coder doesn’t have to throw away the existing markup, but rather build upon and improve the old one. For example, forms can be updated to allow for new features such as a better email input for those using a mobile device. However, viewers stuck in IE6 will simply see it as a text field and still be able to use it.
Here are some examples of HTML5 in use:
Features
- Any HTML5 syntax requires a doctype to be specified so that the browser can render the page in standards mode. The good news though is that the doctype declaration has also been simplified from previous HTML. It is now just:
<!DOCTYPE html> - The audio and visual support in HTML5 is outstanding. As soon as it’s fully running and all browsers support HTML5, you will find it easy to add audio and video to websites without the need for outside plugins.
- Editing the content of your website is simplified with HTML5. Using the contenteditable attribute, you can quickly and painlessly change your text by adding contenteditable=“true” to any element.
- The canvas element makes it possible for you to bypass Photoshop to make your 2D images and directly place them in your code.
- The application cache enables you to navigate web applications while you are offline.
Why Use It
- HTML5 will load much quicker than its older brother because it implements WebSockets.
- Mobile phone applications will be much more accessible if written in HTML5 because you will not have to write applications for a specific brand of phone but rather can create universal applications for all phones.
- You have more flexibility in creating your website.
- Video, audio and images are all easily written right into the code, eliminating the need for any third party software.
- This language is growing and will only result in more, new, better and faster features that will leave old websites looking outdated.
- HTML5 simply builds on HTML4, so the old markup can stay in place as you develop the new features.
- HTML5 and CSS3 together will give you some serious designer credibility.
CSS 3
Cascading Style Sheets (CSS) offer increased flexibility in the presentation of website content. In essence, it just makes everything prettier. Although CSS3 isn’t supported by all browsers yet, it’s becoming increasingly popular because it makes these changes so much easier than trying to get the same effect using something like a Javascript plugin or creating slightly different versions of the exact same image.
One drawback to using CSS is the requirement to implement filters to change how something will appear onscreen using different browsers. Although Internet Explorer is known for bugs, CSS can still be incorrectly interpreted by Firefox or Chrome. As such, some web designers have created different CSS codes to be sent to different browsers, or use filters to cut off CSS delivery completely.
CSS3 offers some exciting new features to enhance the appearance of a website. Although these features might not be absolutely necessary to the functionality of a website, users are coming to expect a website to look awesome as well as operate cleanly. CSS3 makes it easier for designs that will make visitors “ooh and aah” over them to be implemented.
Some features, such as menus, are necessary in almost any website. But with CSS3, the functionality and aesthetic appeal increases exponentially. Submenus upon hovering, horizontal menus, menus with rounded edges, submenus with tabs, submenus with descriptions, and menus with submenus with rounded edges with descriptions on hover are now all possible with some tweaking. Users will appreciate the ability to see a little more of what that page is about before potentially wasting loading time.
Cool New Tricks
Box-shadows – This could allow the main content to slide beneath another area, such as a footer, or cause the area to look as if it’s coming out of or sinking into the website. CSS3 makes this happen without requiring the coder to create a new image or use a Javascript plugin. Another technique is to cause the shadow to appear upon hover.
Text shadows – Sounds exactly like what it is: provide a drop shadow underneath HTML text elements.
h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}
Easier font additions – To add a new font, simply upload the file to your server, link to the CSS file and create a font family.
Multiple backgrounds – Overlaying multiple backgrounds to a page is possible with this code:
body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}
Border images – Rather than simply using a stodgy old plain border, CSS3 allows you to upload an image to use as a border.
Opacity levels – Before, you had to create a new image or use a CSS filter. Now, simply input “opacity: 0.5;” or another desired number to get the effect.
RGBA coloring – Rather than using hex colors and memorizing them or referring to a cheat sheet, this technique allows you to choose the amount of red, green, blue and opacity in your design and doesn’t require any browser extensions.
Transform – This code allows you to choose how big you want an area to become during hover.
Rounded corners – Prior to CSS3, these used to be tricky, but now you can get rid of those sharp corners without using images..
div {
border: 2px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px;
}
Note: Moz stands for Mozilla, while webkit is for Safari and Chrome.
Resizing elements – This code works in Safari to provide a small resizing triangle that allows users to…resize.
div {
resize: both;
}
Loving the idea of having rounded corners in your web designs. Always placed a image for rounded corners. Will most definitely be using the code to create rounded corners now.
Thanks for sharing
There is no perfect solution for getting IE to understand HTML5 and CSS3 but there are a number of ways to make IE play ball. Search for html5.js and IE9.js in Google Code. Both of these together go a long way in helping poor old IE realise the web has evolved a lot over the last decade.
It’s great to be able to have rounded corners for my designs. Also being able to upload an image to use as a border is a great new feature and with these new tricks there should be some interesting designs out there.
I’ve been using CSS3 for a bit now and starting to use HTML5. Your article made me want to use it more in my work. Fine job
Dear aspiring Rumpetroll.
Mother frog says you’re using a rather old school browser and that it doesn’t mix well with our pond. We recommend installing one of the following browsers:
* Google Chrome
* Safari 4
* Firefox 4 Beta
* Opera 10.70
So cool!, that´s what I call usability!
wonderful collections. but most of them are not working in firefox too 🙁
I’ve been trying to do research and get a feel for both HTML5 and CSS3. You’ve explained the in a clear manner. It makes diving into the specifics that much easier. Thanks
Nice article! I haven’t really looked at HTML5 as of yet, but CSS3 is proving very useful! :o)
Great post, I should really make more of an effort to move away from XHTML to HTML5. Thanks for the information
What latest Web design ‘read’ do you advise for a graphic/ Web designer?
I attended AIP online, did well in HTML and then got lost in transition to CSS.
Knowing technology/ Web DESIGN (v. development) waits for no one, where is best place to start to get caught up/ fluent in HTML 5/ CSS 3?
Thanx.
~ Rick
while i was making my own portfolio site, some gradients and shadows weren’t visible in chrome as they were in firefox untill i discovered this article and saw ‘moz’ and ‘webkit’ which fixed it.
thanks.
I just love the video and sound capabilities. For many years we have been trying to create applications that display fluid animations, stream videos and play music. For this reason only HTML5 is a godsend for web developers everywhere.