Home » Posts filed under HTML5
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Friday, January 11, 2013

Removed Elements From Old HTML 4.01





Unknown | 1:36 AM | In | 0 Comments

As you Know that html5 has been arrived a new and better from old where new tags are added on the other hand some old html 4.01 are being removed from the new html5 which are listed below

The following HTML 4.01 elements are removed from HTML 5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>
Read more ...
0 comments

Thursday, January 10, 2013

CSS3 Pure Animated Drop Down Menu - No Images





Unknown | 7:42 AM | In | 0 Comments

Animated drop down menu by Alex Penny. it have improved the code a lot from the original version for the better and more cross browser compatibility.


Coding:

  1. In the HTML box, you just need to write the code that belongs to your <body>
  2. If you want to put something that must go inside <head> then you can simply write full HTML that starts either with a doctype or with <html>.
  3. You can use tools like Prefixfree, Normalize, and other Preprocessors like Jade, HAML, Stylus, Less, SASS, Coffeescript and much more!
  4. Just take a look at the Preferences Pane on the left.
  5. Zen Coding in HTML and CSS is also supported
  6. Code font-size can be adjusted! Code box alignment can also be changed to horizontal or vertical positions.
  7. Need more JS resources ? Try cdnjs.com

THE CSS3:



/*---------- Wrapper --------------------*/

nav {
 width: 100%;
 height: 80px;
 background: #222;
}

ul {
 text-align: center;
}

ul li {
 font: 13px Verdana, 'Lucida Grande';
 cursor: pointer;
 -webkit-transition: padding .05s linear;
 -moz-transition: padding .05s linear;
 -ms-transition: padding .05s linear;
 -o-transition: padding .05s linear;
 transition: padding .05s linear;
}
ul li.drop {
 position: relative;
}
ul > li {
 display: inline-block;
}
ul li a {
 line-height: 80px;
 padding: 0 20px;
 height: 80px;
 color: #777;
 -webkit-transition: all .1s ease-out;
 -moz-transition: all .1s ease-out;
 -ms-transition: all .1s ease-out;
 -o-transition: all .1s ease-out;
 transition: all .1s ease-out;
}
ul li a:hover {
 color: #eee;
}

.dropOut .triangle {
 width: 0;
 height: 0;
 position: absolute;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-bottom: 8px solid white;
 top: -8px;
 left: 50%;
 margin-left: -8px;
}
.dropdownContain {
 width: 160px;
 position: absolute;
 z-index: 2;
 left: 50%;
 margin-left: -80px; /* half of width */
 top: -400px;
}
.dropOut {
 width: 160px;
 background: white;
 float: left;
 position: relative;
 margin-top: 0px;
 opacity: 0;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
 -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
 box-shadow: 0 1px 6px rgba(0,0,0,.15);
 -webkit-transition: all .1s ease-out;
 -moz-transition: all .1s ease-out;
 -ms-transition: all .1s ease-out;
 -o-transition: all .1s ease-out;
 transition: all .1s ease-out;
}

.dropOut ul {
 float: left;
 padding: 10px 0;
}
.dropOut ul li {
 text-align: left;
 float: left;
 width: 125px;
 padding: 12px 0 10px 15px;
 margin: 0px 10px;
 color: #777;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition: background .1s ease-out;
 -moz-transition: background .1s ease-out;
 -ms-transition: background .1s ease-out;
 -o-transition: background .1s ease-out;
 transition: background .1s ease-out;
}

.dropOut ul li:hover {
 background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
The HTML5
Read more ...
0 comments