Team:CityU HK/notebook/lablog css
From 2014.igem.org
(Difference between revisions)
Line 15: | Line 15: | ||
} | } | ||
#cssmenu { | #cssmenu { | ||
- | width: | + | width: 150px; |
font-family: Helvetica, Arial, sans-serif; | font-family: Helvetica, Arial, sans-serif; | ||
font-size: 5px; | font-size: 5px; |
Latest revision as of 01:45, 13 October 2014
- cssmenu,
- cssmenu ul,
- cssmenu ul li,
- cssmenu ul li a {
margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
- cssmenu {
width: 150px; font-family: Helvetica, Arial, sans-serif; font-size: 5px; color: #ffffff; margin-top: 160px; position: fixed;
}
- cssmenu.align-right {
float: right;
}
- cssmenu:after,
- cssmenu ul:after {
content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;
}
- cssmenu ul li {
display: block; z-index: 1; background: #222222; /* Old browsers */
background: -moz-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%); background: -webkit-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%); background: -o-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%); background: -ms-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%); background: linear-gradient(to top, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
}
- cssmenu ul li::after {
content: ""; width: 100%; height: 8px; position: absolute; border-top-left-radius: 50% 4px; border-top-right-radius: 50% 4px; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%); background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%); background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%); background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); z-index: 2; bottom: 10px;
}
- cssmenu ul li a {
display: block; padding: 10px 30px; text-decoration: none; font-size: 12px; text-transform: uppercase; color: #ffffff; z-index: 3;
}
- cssmenu ul li a:hover,
- cssmenu ul li.active a {
color: #ffffff;
}
- cssmenu ul li:hover,
- cssmenu ul li.active {
background: #16bd8c; background: -moz-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%); background: -webkit-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%); background: -o-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%); background: -ms-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%); background: linear-gradient(to top, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
}
- cssmenu ul li:hover::after,
- cssmenu ul li.active::after {
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%); background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%); background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%); background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}