Presentation for an HTML5 website..ShYaM..

HTML5

Web Development to the next level 

*Including other next generation technologies of the Web Development stack

  http://slides.html5rocks.com/#slide1

Source : http://slides.html5rocks.com
ShYaM D Man U Love...

Random header image on page refresh (applicable to Drupal theme)..ShYaM

Some time back, we needed to get a random header image on every page refresh for a client. So I devised a simple way to select a header image from any 5 given images and show it on a page. How did I do it with PHP and CSS is explained below:

The Template File
First you need to find out the div where the random header image is going to be displayed, as its the header image then its obivious that we need to add a class to the header div. Problem is how is the single class going to have 5 different images as its background and that also changed in every page refresh.
For this just add a class called header-x, x is replaced with a random number between 1 and 5 by using PHP's rand() function. This will require your template to be a PHP file, if you are using a CMS like Drupal then in Drupal edit the header div's code in page.tpl.php file as below:

The CSS Code

After the template is fixed, now you have to apply a different background image to the classes 1-5. So header-1 will have header1.jpg,.... till header-5 will have header5.jpg as its background image. The code can be seen below 

Enjoy....ShYaM d man u love.....

CSS3 Rounded Image With jQuery..ShYaM

The CSS Trick

The trick is very simple: wrap a span tag around the image element. Specify the original image as background-image. To hide the original image, specify opacity:0 or display:none. I find using the opacity method is a better approach because the image will remain available for copy or download.

Final Solution With jQuery

To make things easier, we can use jQuery to automatically wrap a span tag around the image.
The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) and wrap it with a span tag. The script finds the src, width, height, and CSS class attribute of the original image and apply them as inline styling in the span tag. Then it specifies the opacity of the image to 0 to hide it.
It works with any image dimension (with or without the width and height attribute). It can also be combined with other CSS classes. No additional markup is required.

<script type="text/javascript" src="jquery-1.4.2.min.js">script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') +

 '" style="background:url(' + $(this).attr('src') + ')

 no-repeat center center; width: ' + $(this).width() +

 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
script>

Source:http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/ 

47 Amazing CSS3 Animation Demos...ShYaM

47 jaw-dropping CSS3 animation demos. 
They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!

Source:http://www.webdesignerwall.com/

CSS3 Multiple Background..ShYaM

Here is a very simple example showing the use of multiple background images in one div. Is this the end of nested elements with tons of CSS to create a layered effect? Hope so.
#multipleBG {

border: 5px solid #cccccc;
background:url(img1) top left no-repeat, url(img2) bottom left no-repeat, url(img3) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;

}

Browser Support:
FireFox 3.6 and later, Google Chrome 1.0, Opera 9.6, Safari 3.2.1

Source:http://www.css3.com

YouTube Video Player Uses HTML5..ShYaM

Youtube introduced a video player which uses the HTML5 video tags. If your browser can support this video tag and the YouTube video you want to use doesn’t include captions, annotations and doesn’t show ads, you’ll be able to watch this video in YouTube’s HTML5 player. Here are some highlights of the player.
HTML5 is a new web standard and is gaining rapid popularity. It enables features which enhances your web experience and supports video and audio playback.

 This means that users with an HTML5 compatible browser and the appropriate codecs don’t need to download separate browser plugins.
It should be noted that for now, the browsers which are compatible with this video player include the following:
· Firefox 4 (WebM,)
· Google Chrome
· Opera 10.6+ (WebM)
· Apple Safari (h.264, version 4+)
· Microsoft Internet Explorer 9 (h.264)
· Microsoft Internet Explorer 6, 7, or 8 with Google Chrome Frame installed
Keep in mind that this player is still in the experimental phase and there are limited videos produced for this format. However as the bugs get worked out and HTML5 gets more mainstream, you are sure to se this player pick up in popularity.
It’s an open platform so there are a lot of people working on it and enhancing it. There are a few other things to note as listed in the YouTube support page for HTML5.
· Fullscreen support is partially implemented. Pressing the fullscreen button will expand the player to fill your browser. If your browser supports a fullscreen option, you can then use that to truly fill the screen
· The HTML5 player has a badge in the control bar. If you don’t see the “HTML5″ icon in the control bar, you’ve been directed to the Flash player (due to restrictions listed below)
· The HTML5 player also has a badge to indicate the video is using the WebM format. If you don’t see the “WebM” icon, the video is encoded using h.264
· If you want to find videos with WebM formats available, you can use the Advanced Search options to look for them (or just add &webm=1 to any search URL)
And for those of you who really aren’t sure what the big deal is about this player and HTML5 in the first place, it is designed to replace the Flash player/plugin. This player hogs a lot of computing resources so migration to a video player which operates under HTML5 will enable a much more efficient and faster process. So those high def movies won’t slow down the rest of your system..

Source : http://html5tutorial.net/

Taggify Photo Tips For HTML5

Taggify is a web widget which allows bloggers and publishers enhance their sites by adding visual tags to any site’s images. Visual tag is a clickable image region tagged with some title, description and link. When vistor moves mouse over such region Taggify shows popup tooltip with interesting content provided by the publisher.

Source : http://net.tutsplus.com/freebies/tooltips/taggify-photo-tips/
Source : http://www.taggify.net/