dummy links
3:35 AM
No comments
The internet, and the use of the internet, has changed a lot since 1999, when HTML 4.01 became a standard.
Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5.
To better handle today's internet needs, HTML5 has also included new elements for drawing graphics, displaying media content, for better page structure and better form handling, and several new APIs, such as drag and drop, get the geographical position of a user, store local data, and more.
Below is a list of the new HTML elements, introduced by HTML5, and a description of what they are used for.
Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5.
To better handle today's internet needs, HTML5 has also included new elements for drawing graphics, displaying media content, for better page structure and better form handling, and several new APIs, such as drag and drop, get the geographical position of a user, store local data, and more.
Below is a list of the new HTML elements, introduced by HTML5, and a description of what they are used for.
The New <canvas> Element
| Tag | Description |
|---|---|
| <canvas> | Defines graphic drawing using JavaScript |
New Media Elements
| Tag | Description |
|---|---|
| <audio> | Defines sound or music content |
| <embed> | Defines containers for external applications (like plug-ins) |
| <source> | Defines sources for <video> and <audio> |
| <track> | Defines tracks for <video> and <audio> |
| <video> | Defines video or movie content |
New Form Elements
| Tag | Description |
|---|---|
| <datalist> | Defines pre-defined options for input controls |
| <keygen> | Defines a key-pair generator field (for forms) |
| <output> | Defines the result of a calculation |
New Semantic/Structural Elements
HTML5 offers new elements for better structure:| Tag | Description |
|---|---|
| <article> | Defines an article in the document |
| <aside> | Defines content aside from the page content |
| <bdi> | Defines a part of text that might be formatted in a different direction from other text outside it |
| <details> | Defines additional details that the user can view or hide |
| <dialog> | Defines a dialog box or window |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Defines self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for the document or a section |
| <header> | Defines a header for the document or a section |
| <main> | Defines the main content of a document |
| <mark> | Defines marked or highlighted text |
| <menuitem> | Defines a command/menu item that the user can invoke from a popup menu |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links in the document |
| <progress> | Defines the progress of a task |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <section> | Defines a section in the document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
| <wbr> | Defines a possible line-break |
3:42 AM
1 comment
Pttrns is a curated library of iPhone and iPad user interface patterns. All patterns has been carefully chosen before they were added to maintain excellent content quality. There is currently 2764 patterns in our library. I started this project in Prague, February '11. The site is currently doing almost 2 millions page views per month.
In the beginning, it was just meant to be a personal and private tool for my own inspiration. I was always measuring dimensions between various objects in the native iOS interface and didn't want to make screenshots everytime I needed it and so the idea for Pttrns came along.
11:26 PM
No comments
Below code need to place in HTML Body Tag
----------------------------------------------->
<div class="container bootshape">
<form class="simple-login" role="form">
<h1>Simple Login</h1>
<input type="username" autofocus required placeholder="Username" class="form-control">
<input type="password" required placeholder="Password" class="form-control">
<button type="submit" class="btn btn-lg btn-primary btn-block">Login</button>
<p class="forgot-password"><a href="">Forgot password?</a></p>
</form>
<p class="footer">© All Rights Reserved. <a href="http://www.pix2apps.com" title="Login Form">pix2apps.com</a></p>
</div>
Below code need to place in header tag or in separate external CSS
-----------------------------------------------------------------
.bootshape {
font-family: 'Alef', sans-serif;
background-color: #FFF;
text-align: center;
color: #333;
}
.bootshape a,
.bootshape a:hover,
.bootshape a:focus {
color: #dd745c;
}
.bootshape h1 {
color: #dd745c;
font-family: 'Alef', sans-serif;
padding-bottom: 20px;
font-weight: bold;
}
.bootshape .form-control {
background-color: #f1f0f0;
border-radius: 0;
border: none;
margin: 0 0 10px 0;
color: #333;
box-shadow: none;
height: 62px;
font-family: 'Alef', sans-serif;
text-align: center;
font-size: 22px;
}
.bootshape .form-control:focus {
border-color: #e4e0e0;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
}
.bootshape .btn-lg {
font-size: 22px;
height: 62px;
border-radius: 0;
background-color: #dd745c;
border: 0;
text-transform: uppercase;
}
.bootshape .btn-primary:hover,
.bootshape .btn-primary:focus {
background-color: #ba523a;
}
.bootshape .forgot-password {
padding-top: 20px;
text-decoration: underline;
color: #333;
font-size: 18px;
}
.bootshape .forgot-password a {
color: #333;
}
.bootshape .footer {
padding: 20px 0;
}
.bootshape .simple-login {
margin: 0 auto;
max-width: 500px;
padding: 100px 15px 15px 15px;
}
----------------------------------------------->
<div class="container bootshape">
<form class="simple-login" role="form">
<h1>Simple Login</h1>
<input type="username" autofocus required placeholder="Username" class="form-control">
<input type="password" required placeholder="Password" class="form-control">
<button type="submit" class="btn btn-lg btn-primary btn-block">Login</button>
<p class="forgot-password"><a href="">Forgot password?</a></p>
</form>
<p class="footer">© All Rights Reserved. <a href="http://www.pix2apps.com" title="Login Form">pix2apps.com</a></p>
</div>
Below code need to place in header tag or in separate external CSS
-----------------------------------------------------------------
.bootshape {
font-family: 'Alef', sans-serif;
background-color: #FFF;
text-align: center;
color: #333;
}
.bootshape a,
.bootshape a:hover,
.bootshape a:focus {
color: #dd745c;
}
.bootshape h1 {
color: #dd745c;
font-family: 'Alef', sans-serif;
padding-bottom: 20px;
font-weight: bold;
}
.bootshape .form-control {
background-color: #f1f0f0;
border-radius: 0;
border: none;
margin: 0 0 10px 0;
color: #333;
box-shadow: none;
height: 62px;
font-family: 'Alef', sans-serif;
text-align: center;
font-size: 22px;
}
.bootshape .form-control:focus {
border-color: #e4e0e0;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
}
.bootshape .btn-lg {
font-size: 22px;
height: 62px;
border-radius: 0;
background-color: #dd745c;
border: 0;
text-transform: uppercase;
}
.bootshape .btn-primary:hover,
.bootshape .btn-primary:focus {
background-color: #ba523a;
}
.bootshape .forgot-password {
padding-top: 20px;
text-decoration: underline;
color: #333;
font-size: 18px;
}
.bootshape .forgot-password a {
color: #333;
}
.bootshape .footer {
padding: 20px 0;
}
.bootshape .simple-login {
margin: 0 auto;
max-width: 500px;
padding: 100px 15px 15px 15px;
}
6:33 AM
No comments
<div></div>
div
{
background:red;
border-radius:50px;
height:100px;
left: 150px;
position: absolute;
top: 100px;
transition: width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
-moz-transition: width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
-ms-transition: width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
-o-transition: width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
-webkit-transition: width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
width:100px;
}
div:hover
{
border-radius:100px;
height:200px;
left: 100px;
top: 50px;
width:200px;
}
3:19 AM
No comments
HTML
------------------------------------
<!-- Ignore this <div>, it just displays the information about the turorial. If you find it distracting, feel free to delete it. -->
<div id="info"></div>
<div class="page-header">
<h3>Expanding <div> <small>With <code>clear: left;</code></small></h3>
</div>
<!-- The code for the tutorial starts here -->
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
<div style="clear: left;"></div>
<p>Remember that it is important to add <code>clear: left;</code> to the <code><div></code> after the expanding content or your content will wrap strangly as in the demo below:</p>
<div class="page-header">
<h3>Expanding <div> <small>Without <code>clear: left;</code></small></h3>
</div>
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
<p>This is some text that will float strangly because there is no clear: left applied. Try to mouseover one of the boxes above.</p>
CSS
---------------------------------------------------------
.grow {
height: 100px; /* Origional height */
width: 22%; /* Origional width */
margin: 5px 1% 5px 1%; /* Just for presentation (Not required) */
float: left; /* Just for presentation (Not required) */
position: relative; /* Just for presentation (Not required) */
transition:height 0.5s; /* Animation time */
-webkit-transition:height 0.5s; /* For Safari */
}
.grow:hover {
height: 115px; /* This is the height on hover */
}
JAVASCRIPT
--------------------------------------------------------
// Ignore everything below this, this is just the code that formats the message box above the tutorial resources. You do not need any of this. In fact, if you find it distracting you can delete all of it.
var tutorialName = "Expanding <div> Smoothly on Hover with CSS";
var tutorialURL = "http://www.justcode.us/2013/05/expanding-smoothly-on-hover-with-css";
var tutorialAuthor = "Benedict Lewis";
var authorURL = "http://justcode.us";
$('#info').html("<div class=\"well\" style=\"margin-top:20px;\"><h4>"+ tutorialName +"</h4><h5>Resources for a tutorial by <a href=\""+ authorURL + "\">"+ tutorialAuthor +"</a></h5><div class=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">×</button><strong>Warning:</strong> These are just resources for a tutorial. To find out how to use this code please read <a href=\""+ tutorialURL +"\" target=\"_blank\">my tutorial</a> over at <a href=\"http://justcode.us\" target=\"_blank\">The Dev Blog</a>.</div></div>");
------------------------------------
<!-- Ignore this <div>, it just displays the information about the turorial. If you find it distracting, feel free to delete it. -->
<div id="info"></div>
<div class="page-header">
<h3>Expanding <div> <small>With <code>clear: left;</code></small></h3>
</div>
<!-- The code for the tutorial starts here -->
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
<div style="clear: left;"></div>
<p>Remember that it is important to add <code>clear: left;</code> to the <code><div></code> after the expanding content or your content will wrap strangly as in the demo below:</p>
<div class="page-header">
<h3>Expanding <div> <small>Without <code>clear: left;</code></small></h3>
</div>
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
<p>This is some text that will float strangly because there is no clear: left applied. Try to mouseover one of the boxes above.</p>
CSS
---------------------------------------------------------
.grow {
height: 100px; /* Origional height */
width: 22%; /* Origional width */
margin: 5px 1% 5px 1%; /* Just for presentation (Not required) */
float: left; /* Just for presentation (Not required) */
position: relative; /* Just for presentation (Not required) */
transition:height 0.5s; /* Animation time */
-webkit-transition:height 0.5s; /* For Safari */
}
.grow:hover {
height: 115px; /* This is the height on hover */
}
JAVASCRIPT
--------------------------------------------------------
// Ignore everything below this, this is just the code that formats the message box above the tutorial resources. You do not need any of this. In fact, if you find it distracting you can delete all of it.
var tutorialName = "Expanding <div> Smoothly on Hover with CSS";
var tutorialURL = "http://www.justcode.us/2013/05/expanding-smoothly-on-hover-with-css";
var tutorialAuthor = "Benedict Lewis";
var authorURL = "http://justcode.us";
$('#info').html("<div class=\"well\" style=\"margin-top:20px;\"><h4>"+ tutorialName +"</h4><h5>Resources for a tutorial by <a href=\""+ authorURL + "\">"+ tutorialAuthor +"</a></h5><div class=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">×</button><strong>Warning:</strong> These are just resources for a tutorial. To find out how to use this code please read <a href=\""+ tutorialURL +"\" target=\"_blank\">my tutorial</a> over at <a href=\"http://justcode.us\" target=\"_blank\">The Dev Blog</a>.</div></div>");
9:44 PM
2 comments
PHtheme is your zone to download quality and professionally designed Android themes, apps, wallpaper, Games, ringtone for free at phtheme. you can preview wallpaper in your android phone , watch android play video and the lastest android news, Tutorials.
You can free download all kind of android phone resources, include android themes, android apps, android wallpaper, android Ringtone, android game! Please check out this link Best Android Themes
Subscribe to:
Posts (Atom)
