Build a Custom HTML5 Video Player: Free Premium Tutorial

Complete HTML5 video tutorial,Click n See friends,
 Source : http://click9.net/2010/09/04/html5-open-video-tutorial/

How To Make a CSS Based 3D Layout....ShYaM

How To Make a CSS Based 3D Layout

First of all we set up our files. We create a new folder with index.html and style.css.
We prepare the HTML document.
CSS Ribbon
Take a look at the following image to understand how we will realize the “structure” in our file.

3D CSS

Well, as you have just seen in the picture we need a main container (centered), a bubble for the contents, and three elements for the ribbon: a rectangle and two triangles.

3D CSS Ribbon



I Have Used Only CSS, friends!
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.

It doesn't work with IE!

The CSS code to style the basic elements (container, bubble and rectangle) is the following.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}

:focus {
 outline: 0;
}
/* // Reset */

body {
 background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
 font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
 font-size: 12px;
 color: #999;
}

h2 {
 font-style: italic;
 font-weight: normal;
 line-height: 1.2em;
}

div#container {
 margin: 50px auto 0px auto; /* centered */
 width: 400px;
}

.bubble {
 clear: both;
 margin: 0px auto;
 width: 350px;
 background: #fff;
 -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
 -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 position: relative;
 z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
 background: #7f9db9;
 height: 50px;
 width: 380px;
 position: relative;
 left:-15px;
 top: 30px;
 float: left;
 -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
 font-size: 30px;
 color: #fff;
 padding-top: 6px;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 text-align: center;
}

Below the result of these statements.

We add the two classes to make and place the triangles in style.css… and we also add the style for the content (class info).

3D CSS Ribbon







I Have Used Only CSS, friends!
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.

It doesn't work with IE!



Go to the tutorial!

We add the two classes to make and place the triangles in style.css… and the style for the content (class info).

.triangle-l {
 border-color: transparent #7d90a3 transparent transparent;
 border-style:solid;
 border-width:15px;
 height:0px;
 width:0px;
 position: relative;
 left: -30px;
 top: 65px;
 z-index: -1; /* displayed under bubble */
}

.triangle-r {
 border-color: transparent transparent transparent #7d90a3;
 border-style:solid;
 border-width:15px;
 height:0px;
 width:0px;
 position: relative;
 left: 350px;
 top: 35px;
 z-index: -1; /* displayed under bubble */
}

.info {
 padding: 60px 25px 35px 25px;
}

.info h2 {
 font-size: 20px;
}

.info p {
 padding-top: 10px;
 font-size: 14px;
 line-height: 22px;
}

.info p a {
 color: #c4591e;
 text-decoration: none;
}

.info p a:hover {
 text-decoration: underline;
}

Here the result.

We create a nice menu on the top. Below the markup.

CSS3
is really
powerful

by PV.M Garage



3D CSS Ribbon







I Have Used Only CSS, friends!
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.

It doesn't work with IE!



Go to the tutorial!

The style for our top-menu.

.menu {
 position: relative;
 top:3px;
 left: 50px;
 z-index: 80; /* the stack order: displayed under bubble (90) */
}

.menu ul li {
 -webkit-transform: rotate(-45deg); /* rotate the list item */
 -moz-transform: rotate(-45deg); /* rotate the list item */
 width: 50px;
 overflow: hidden;
 margin: 10px 0px;
 padding: 5px 5px 5px 18px;
 float: left;
 background: #7f9db9;
 text-align: right;
}

.menu ul li a {
 color: #fff;
 text-decoration: none;
 display:block;
}

.menu ul li.l1 {
 background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
 background: rgb(131,178,51);
}

.menu ul li.l2 {
 background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
 background: rgb(196,89,30);
}

.menu ul li.l3 {
 background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
 background: rgb(65,117,160);
}

.menu span {
 margin: 15px 80px 0px 0px;
 float:right;
}

Here you can se the simple menu.

Our 3D layout is ready. It’s so sexy, I hope you find the final result attractive and inspiring.

Conclusions

I think this kind of solution is useful to improve the performance of the website holding a great 3D effect. There is great question: Internet Explorer and Opera have some problems with CSS3. But this is not an impediment because we are looking to the future. So, if you are browsing the web with IE, please consider to install Mozilla Firefox or Google Chrome or Safari. Some screenshots from different browsers (Windows 7 OS).

Source  :  http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

We are going to build a blog page using next-generation techniques from the newer  HTML 5 and CSS 3.The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. 
Main Tutorial Page : http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

WordPress Cheat Sheet

The “WordPress Cheat Sheet” pdf available for free. If you’re still wrapping your head around the miscellaneous functions, be sure to download it from their site!

The WordPress Help Sheet includes the following:

• Basic Template Files
• PHP Snippets for the Header
• PHP Snippets for the Templates
• And Extra Stuff for WordPress

 Source : http://net.tutsplus.com/freebies/cheat-sheets/wordpress-cheat-sheet/
 Download : http://downloads.gosquared.com/help_sheets/07/WordPress-Help-Sheet.pdf

HTML5 Web Storage

Storing Data on the Client

 HTML5 offers two new methods for storing data on the client:

• localStorage - stores data with no time limit
• sessionStorage - stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.
The data is stored in different areas for different websites, and a website can only access data stored by itself.
HTML5 uses JavaScript to store and access the data.

 



Source:http://www.w3schools.com/

HTML5 New Form Attributes

New form attributes:

• autocomplete
• novalidate
  
  

New input attributes:

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height and width
• list
• min, max and step
• multiple
• pattern (regexp)
• placeholder
• required
 

Form Override Attributes
• The form override attributes allow you to override some of the attributes set for the form element.
  The form override attributes are:
• formaction - Overrides the form action attribute
• formenctype - Overrides the form enctype attribute
• formmethod - Overrides the form method attribute
• formnovalidate - Overrides the form novalidate attribute
• formtarget - Overrides the form target attribute
Source:http://www.w3schools.com/

HTML 5 and SEO....Shyam

At this point in 2010, web browsers are capable of supporting most HTML 5 code functions. 

The

tag

is how you can compartmentalize different segments of your HTML 5 page.  Each section should identify micro data vocabulary that you are using within the segment.


The new

tags

are where you will put the majority of the textual content on your page.  Again, a single page can contain multiple articles  and a single article can contain multiple

areas.  This nesting structure helps to further organize the content within a page.  If you are a blogger, you will want to use the

tabs to segment multiple articles on your pages.

The new tags when you convert your code from HTML 4 to HTML 5.At the end of a section, you can add a

tag. 

This tag contains any footer style text about the section such as the Author of the article and any links the article referenced.
The tag is where you place all of your internal navigation links.  Again, search engines will much more accurately be able to understand the structure of your site if you use this section.  In addition, you should place your "previous" and "next" internal links in this section if your site or blog contains them.
If you are familiar with HTML 4, you'll notice that the new HTML 5 tags I've discussed so far were previously handled by various tags in HTML 4.  The tags are add-on elements within HTML 4 that fail on many levels to properly describe the different sections of a web page. Finally, the new tag is very similar to the tag and will likely be used frequently on your site to make certain keywords stand out.

Source : http://technorati.com/