Hi all, this is m first post, so please be gentle! I recently opened a design company and made a vow to utilize the new HTML5 and CCS3 requirements instead of javascript for changes. I’m rather pleased that I did. Firstly, it permits a search engine to determine the content of your media on a page. Instead of hiding media in javascript, which spiders don’t look at, you keep them inside simple HTML tags and these are crawlable. And in my opinion, anything that adds to your website’s exposure and online search engine position is an advantage. Second of all, it is a lot more simpler to maintain than javascript and flash. As I stated previously, it’s easy to learn CSS3 markup, so you can modify this in a text editor immediately. Last but not least, it includes an extremely nice look to your page, attractive hover effects and text results. It enables you to have an artistic, “attractive” appearance without the search ramifications.
Now that we’ve given the intro, lets dive a bit into the actually coding. Initially, in the CSS you have to establish a hover result on your div id. Right here is a sample to learn CSS3 transition effects;
position: absolute;
top: 35 %;.
left: 37.5 %;.
width: 25 %;.
height: 25 %;.
shift: left Ones, top 1s, width 2s, height Twos, box-shadow 2s;.
-moz-transition: left 1s, leading 1s, width 2s, height 2s, box-shadow 2s;/ * Firefox 4 */.
-webkit-transition: left 1s, top Ones, width Twos, height Twos, box-shadow 2s;/ * Safari and Chrome */.
-o-transition: left 1sts, leading 1sts, width Twos, height Twos, box-shadow Twos;/ * Opera */.
box-shadow: 10px 10px 5px # 000000;.
-webkit-box-shadow: 10px 10px 5px # 000000;/ * Safari */.
A lot of this is basic markup, however you may or may not recognize with the shifts qualities. Change is the conventional feature that tells the browser what attributes are going to be changed. Unfortunately, no major browser supports this, so you have to add the -moz, -o and -webkit to make it work with Firefox, Opera, Safari and Chrome. So now we have our base div, and here is our hover efficient div.
box-shadow: 15px 15px 10px # 180393;.
width: 27.5 %;.
height: 27.5 %;.
All this does is tell the browser to transition from the original, to the hover when the mouse hovers the div.
And that’s it, no modification to your HTML at all, simply the CSS3 and you’re good to go. You can change nearly all CSS attributes to varying degrees of success.
A quick word of caution, Internet Explorer does not support these transitions, and they have been a bit buggy in safari. Sadly, there isn’t really uniform support for the spec yet, however hang in there, there are a number of interesting aspects of the brand-new basic including the extremely prepare for audio and video tags, a canvas tag for posting your photo cds and other results to and more. Stay tuned, I will be covering all of it as time permits. Thank you very much and I hope you gained something from this.
