I just got started in web design and currently building my very first website to start showcasing examples of my UI work. I already designed my wireframes for the 5 pages. Now I'm diving in to the HTML/CSS coding process. I been trying to get my navigation links on the top of my site do a smooth transition effect.
The transition property when hovering my cursor over the link doesn't fade to the color I want it to. When tested on dreamweaver, it instantly changes to the color what I want but doesn't give it the fading effect. However, when I test it on my mozilla browser, it doesn't do ANYTHING AT ALL. It changes the color of the text, but doesn't change the color of the box.
Here's what I wrote on my stylesheet. If anyone can help identify the problem and/or walk me through it, I would greatly appreciate it.
ul.menu li {
list-style: none;
float: right;
float: top;
margin-top: 0 px
height: 100px;
text-align: center;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(33,40,41)), to(rgb(28,31,32)));
background : -moz-linear-gradient(top, rgb(28,47,64), rgb(17,30,41));
}
ul li a {
display: block;
padding: 0 20px;
color: #c6c7bb;
text-align: center;
text-decoration:inherit;
text-decoration: none;
font-style: inherit;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
line-height: 100px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(28,47,64)), to(rgb(17,30,41)));
background : -moz-linear-gradient(top, rgb(28,47,64), rgb(17,30,41));
}
ul li a:hover {
background: transparent none;
color: #FFF;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
If I need to be more specific, please let me know. Not very experienced demonstrating my web design process
The transition property when hovering my cursor over the link doesn't fade to the color I want it to. When tested on dreamweaver, it instantly changes to the color what I want but doesn't give it the fading effect. However, when I test it on my mozilla browser, it doesn't do ANYTHING AT ALL. It changes the color of the text, but doesn't change the color of the box.
Here's what I wrote on my stylesheet. If anyone can help identify the problem and/or walk me through it, I would greatly appreciate it.
ul.menu li {
list-style: none;
float: right;
float: top;
margin-top: 0 px
height: 100px;
text-align: center;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(33,40,41)), to(rgb(28,31,32)));
background : -moz-linear-gradient(top, rgb(28,47,64), rgb(17,30,41));
}
ul li a {
display: block;
padding: 0 20px;
color: #c6c7bb;
text-align: center;
text-decoration:inherit;
text-decoration: none;
font-style: inherit;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
line-height: 100px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(28,47,64)), to(rgb(17,30,41)));
background : -moz-linear-gradient(top, rgb(28,47,64), rgb(17,30,41));
}
ul li a:hover {
background: transparent none;
color: #FFF;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
If I need to be more specific, please let me know. Not very experienced demonstrating my web design process