Team:CityU HK/notebook/lablog css
From 2014.igem.org
(Difference between revisions)
(8 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | #cssmenu | + | #cssmenu, |
- | + | #cssmenu ul, | |
- | + | #cssmenu ul li, | |
- | + | #cssmenu ul li a { | |
- | + | ||
- | + | ||
- | + | ||
- | #cssmenu li { | + | |
- | + | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
+ | border: 0; | ||
list-style: none; | 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 | + | #cssmenu { |
- | + | width: 150px; | |
- | + | font-family: Helvetica, Arial, sans-serif; | |
- | color: # | + | font-size: 5px; |
+ | color: #ffffff; | ||
+ | margin-top: 160px; | ||
+ | position: fixed; | ||
+ | } | ||
+ | #cssmenu.align-right { | ||
+ | float: right; | ||
+ | } | ||
+ | #cssmenu:after, | ||
+ | #cssmenu ul:after { | ||
+ | content: "."; | ||
display: block; | 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; | text-decoration: none; | ||
- | font- | + | 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 | + | #cssmenu ul li:hover::after, |
- | background: # | + | #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)); | ||
} | } |
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));
}