Wednesday, March 7, 2012

.HTM or .HTML File Extension?

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

Thursday, March 1, 2012

Learn Css Tips from...

http://www.loriswebs.com/css-tips.html

Content through CSS

#footer:after{

content: "copyright 2010 @";
}

Hello

Wednesday, November 2, 2011

How do I make a favicon appear for my site in IE7?

There are two ways. The first is to put a file in the root of your domain called favicon.ico. The second is to use a tag with the rel="shortcut icon" value and the href value set to the URL for the Icon you wish to display.

Browser Compatibility Information on the Internet

It is the prime source for browser compatibility information on the Internet


http://quirksmode.org

Tuesday, November 1, 2011

Animated Sliding Menu With Pseudo Selectors and CSS3

HTML


<div id="menu">
<ul>
<li><a href="#" class=Home</a><a href="#">See Us</a></li>
<li><a href="#" class=About</a><a href="#">Meet Us</a></li>
<li><a href="#" class=Contact</a><a href="#">Email Us</a></li>
</ul>
</div>


CSS


*{ margin:0px; padding:0px;}
#menu {
height: 100px; width: 670px;
overflow: hidden;
margin: 50px auto;
text-align: center;
}

#menu ul li {
float: left;
margin: 0 5px;
list-style-type: none;
}

#menu ul a:nth-of-type(even) {
background: #000;
color: white;
}

#menu ul li:hover :first-child {
margin-top: -100px;
}

#menu ul a {
display: block;
background: #e70f23; color: #fff;
height: 100px; width: 200px;
font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
}

The Subtleties of CSS3 Transitions

It’s very simple. You hover over the link, and the font-size animates (or transitions) from 40px to 100px. You hover off the link, and it transitions from 100px down to 40px.

Now let’s try it like this:

a:link, a:visited {
font-size: 40px;
}

a:hover {
font-size: 100px;
-webkit-transition: font-size 1s ease;
-moz-transition: font-size 1s ease;
-ms-transition: font-size 1s ease;
o-transition: font-size 1s ease;
transition: font-size 1s ease;
}