Tips & Insight into HTML5 & CSS3
There are many new exciting functions and features that come with HTML5 & CSS3. Unfortunately for now some of these lovely things are only implemented in a few browsers Firefox, Safari/Webkit and Opera. In this post, I’m hoping to give you some tips and insight into HTML5 & CSS3, Enjoy!
#1: New Structural Elements
HMTL5 introduces new structural elements, which will give you a better, simpler and more precise way of describing data in your markup. Search engines will accurately determine which content on a web page is important by recognizing the new elements such as the header, nav, footer.
#2: Webkit-transform property
Objects can be scaled, rotated, skewed and translated. This will allow you to add subtle animation to objects to interact with the user to promote yourself or a product.
-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#3: New CSS3 Properties
Three great CSS3 properties are Border-radius, Multiple Backgrounds, Text-shadow and Box-shadow.
Border-radius lets you apply rounded corners to a panel or a tab. There are four individual properties, one for each corner of a box element and one shorthand property.
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px
Multiple Backgrounds allows for multiple background images to be applied to one element. To do this, you can separate backgrounds with commas.
background: url(body-top.gif) top left no-repeat,
url(banner_1.jpg) top 11px no-repeat,
url(body-2.gif) bottom left no-repeat,
url(body-3.gif) left repeat-y;
Box-shadow and Text-shadow generates drop shadows on a element such as a product image or a h1. This eliminates the need for Photoshop.
-moz-box-shadow:2px 3px 5px rgba(0, 0, 0, 0.3);
Using CSS3′s border-radius, text-shadow, and box-shadow you can create pretty little site buttons. For an example see here
#4: Pixels for Font-size
Use pixels instead of ems or % to size fonts . When all major browsers have completely finished implementing HTML5 and CSS3 we will all have access to page zooming instead of just text resizing.
#5: Drag & Drop
I think it would be cool to drag and drop products in to the basket. HTML5 has the ability to create drag and drop events. This functionality has been recently added to Gmail.
#6: Web Forms 2.0
Forms are used all across the web, you encounter them when submitting a comment on a blog, registering for a user account, or purchasing a DVD on TheHut.com. Currently, I would use JavaScript code to validate forms but HTML 5 gives us additional element attributes, such as required and email attributes, which automatically check that the username and email fields are not left blank and that the email address’ format is valid.
A Coolest Slideshow about HTML5
HTML 5 & The Future Of The Web
HTML5 & CSS3 The Techniques You’ll Soon Be Using
What are you most excited about? If I have missed anything else new with HTML5 & CSS3, share it with us in the comments.
Wow this is a great resource.. I’m enjoying it.. good article
Facebook Marketing…
Thanks for all the wonderful information it was great !…
Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!
Wow this is a great resource.. I’m enjoying it.. good article
Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!
Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!
+1
Great, I never knew this, thanks.
I are actually surfing online a lot more than three hours nowadays, nonetheless I never observed any intriguing content like yours. It’s quite worth sufficient for me. In my opinion, if all webmasters and bloggers produced excellent material as you did, the internet will likely be a lot more helpful than truly previous to.
…
Cheers for the information. Greatly appreciated….
Hey this is a great post. I’m going to email this to my buddies. I stumbled on this while googling for some music lyrics, I’ll be sure to come back. thanks for sharing.hair growth tips
Hi, I wish to let all of you bloggers / internet users recognize about a fresh Search Engine called Braxea. Its pretty dam cool… It combines Google, Bing and Yahoo into one and also lets you search for videos on YouTube and News all over the net. Maybe this can end up being the new Google ?
I use Digg to find stories all the time. It’s great when you don’t have anything else to write about. Nice list.
Great info! I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. health weight loss
Thank you so much for sharing this awesome content! I am looking forward to seeintg more!
Thank you so much for writing this good info! Looking forward to reading more!
Usually I do not write-up on blogs, but I would like to say that this write-up really forced me to complete so! Thanks, incredibly nice article.
Pretty cool post! It was so interesting with lots of cool tidbit. Thanks for sharing the info.
I don’t usually agree with the information that are shown on sites but in this case I agree.
I observed your site via search engine several moment ago, and luckily, this can be the only info I was seeking the last hours
Thanks very much for sharing all of the good info! Looking forward to seeintg more.
This nice article encouraged me a lot! Saved the blog, very excellent topics everywhere that I read here! I appreciate the information, thank you.
I just taken a look at your page here and noticed that the header area on the top is showing as a black square. Is it supposed to be like that? Good post also.education degree
Great blog, saved your blog in hopes to read more information!
Please can you tell me the browser you are using, thankyou