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.
Tuesday, November 1, 2011
Animated Sliding Menu With Pseudo Selectors and CSS3
HTML
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;
}
<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;
}
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;
}
Subscribe to:
Comments (Atom)