Team:HIT-Harbin/header/menu
From 2011.igem.org
(Difference between revisions)
(Created page with "<html> <head> <style type="text/css"> .webwidget_menu_glide{ padding: 5px 200px; } .webwidget_menu_glide .webwidget_menu_glide_sprite{ width: 100px; ...") |
|||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | /* BonBon Buttons 1.1 by simurai.com | ||
- | + | 1.1 Added unprefixed attributes, :focus style, <button> support | |
+ | 1.0 Released | ||
+ | |||
+ | Usage: | ||
+ | |||
+ | Default button: <a href="" class="button">Label</a> | ||
+ | More fancy with icon: <a href="" class="button orange glossy" data-icon="★">Label</a> | ||
+ | |||
+ | Following additional class names are supported: | ||
+ | |||
+ | Color: orange, pink, blue, green, transparent | ||
+ | Font: serif | ||
+ | Material: glossy, glass | ||
+ | Size: xs, xl | ||
+ | Shape: round, oval, brackets, skew, back, knife, shield, drop, morph | ||
+ | Icon only: icon | ||
+ | Disabled: disabled | ||
+ | |||
+ | */ | ||
+ | |||
+ | |||
+ | @import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster); | ||
+ | @import url(http://fonts.googleapis.com/css?family=Lobster); | ||
+ | @import url(pictos/pictos.css); | ||
+ | |||
+ | |||
+ | /* -------------- THE button -------------- */ | ||
+ | .button { | ||
+ | |||
+ | /* text */ | ||
+ | text-decoration: none; | ||
+ | font: 24px/1em 'Droid Sans', sans-serif; | ||
+ | font-weight: bold; | ||
+ | text-shadow: rgba(255,255,255,.5) 0 1px 0; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | user-select: none; | ||
+ | |||
+ | |||
+ | /* layout */ | ||
+ | padding: .5em .6em .4em .6em; | ||
+ | margin: .5em; | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | |||
+ | -webkit-border-radius: 8px; | ||
+ | -moz-border-radius: 8px; | ||
+ | border-radius: 8px; | ||
+ | |||
+ | /* effects */ | ||
+ | border-top: 1px solid rgba(255,255,255,0.8); | ||
+ | border-bottom: 1px solid rgba(0,0,0,0.1); | ||
+ | |||
+ | background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png); | ||
+ | background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png); | ||
+ | background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png); | ||
+ | |||
+ | -webkit-transition: background .2s ease-in-out; | ||
+ | -moz-transition: background .2s ease-in-out; | ||
+ | transition: background .2s ease-in-out; | ||
+ | |||
+ | /* color */ | ||
+ | color: hsl(0, 0%, 40%) !important; | ||
+ | background-color: hsl(0, 0%, 75%); | ||
+ | |||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
} | } | ||
- | . | + | |
- | + | /* -------------- button (tag) -------------- */ | |
- | + | ||
- | + | button.button { | |
+ | border-left: none; | ||
+ | border-right: none; | ||
} | } | ||
- | . | + | button.button:hover { |
- | + | cursor: pointer; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
- | + | ||
- | + | /* -------------- icon -------------- */ | |
- | + | .button:before { | |
+ | font: 1.2em/0 'Pictos', sans-serif; | ||
+ | content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */ | ||
+ | margin-right: 0.4em; | ||
+ | |||
+ | |||
} | } | ||
- | . | + | /* icon only */ |
- | + | .icon { | |
- | + | font-weight: normal; | |
- | + | font-style: normal; | |
- | + | text-indent: -999em; | |
- | + | } | |
- | + | .icon:before { | |
- | + | margin-right: 0; | |
- | + | display: block; | |
- | + | height: 0; | |
+ | text-indent: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* -------------- colours -------------- */ | ||
+ | |||
+ | .button.orange { | ||
+ | color: hsl(39, 100%, 30%) !important; | ||
+ | background-color: hsl(39, 100%, 50%); | ||
- | + | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | |
- | + | hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ | |
- | + | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | |
- | + | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | |
+ | hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
} | } | ||
- | . | + | .button.orange:hover { background-color: hsl(39, 100%, 65%); } |
- | + | ||
- | + | ||
- | + | .button.blue { | |
- | + | color: hsl(208, 50%, 40%) !important; | |
- | + | background-color: hsl(208, 100%, 75%); | |
- | + | ||
- | + | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | |
- | + | hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ | |
- | + | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | |
- | + | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | |
- | + | hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ | |
- | + | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | |
- | + | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | |
+ | hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
} | } | ||
- | . | + | .button.blue:hover { background-color: hsl(208, 100%, 83%); } |
- | + | ||
- | + | .button.green { | |
- | + | color: hsl(88, 70%, 30%) !important; | |
+ | background-color: hsl(88, 70%, 60%); | ||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
} | } | ||
- | + | .button.green:hover { background-color: hsl(88, 70%, 75%); } | |
- | + | ||
- | + | .button.pink { | |
+ | color: hsl(340, 100%, 30%) !important; | ||
+ | background-color: hsl(340, 100%, 75%); | ||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ | ||
+ | hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ | ||
+ | rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ | ||
+ | } | ||
+ | .button.pink:hover { background-color: hsl(340, 100%, 83%); } | ||
+ | |||
+ | |||
+ | .button.transparent { | ||
+ | color: rgba(0,0,0,0.5) !important; | ||
+ | } | ||
+ | .button.transparent, .button.transparent:hover, .button.transparent:active { | ||
+ | background-color: transparent; | ||
+ | background-image: none; | ||
+ | } | ||
+ | .button.transparent:hover { | ||
+ | opacity: .9; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* -------------- States -------------- */ | ||
+ | |||
+ | .button:hover { | ||
+ | background-color: hsl(0, 0%, 83%); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .button:active { | ||
+ | background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); | ||
+ | background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); | ||
+ | background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); | ||
+ | |||
+ | -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.4) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.4) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.4) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | |||
+ | -webkit-transform: translateY(.2em); | ||
+ | -moz-transform: translateY(.2em); | ||
+ | transform: translateY(.2em); | ||
+ | } | ||
+ | |||
+ | .button:focus { | ||
+ | outline: none; | ||
+ | color: rgba(254,255,255,0.9) !important; | ||
+ | text-shadow: rgba(0,0,0,0.2) 0 1px 2px; | ||
+ | } | ||
+ | |||
+ | .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover { | ||
+ | opacity: .5; | ||
+ | cursor: default; | ||
+ | color: rgba(0,0,0,0.2) !important; | ||
+ | text-shadow: none !important; | ||
+ | background-color: rgba(0,0,0,0.05); | ||
+ | background-image: none; | ||
+ | border-top: none; | ||
+ | |||
+ | -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.3) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | -moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.3) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ | ||
+ | rgba(0,0,0,0.3) 0 .1em 1px, /* border */ | ||
+ | rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ | ||
+ | |||
+ | -webkit-transform: translateY(5px); | ||
+ | -moz-transform: translateY(5px); | ||
+ | transform: translateY(5px); | ||
+ | } | ||
+ | |||
+ | /* -------------- Fonts -------------- */ | ||
+ | |||
+ | .serif { | ||
+ | font-family: 'Lobster', serif; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* -------------- Sizes -------------- */ | ||
+ | |||
+ | .xs { font-size: 16px; } | ||
+ | .xl { font-size: 32px; } | ||
+ | |||
+ | |||
+ | /* -------------- Materials -------------- */ | ||
+ | |||
+ | .button.glossy:after, .button.glass:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 90%; | ||
+ | height: 60%; | ||
+ | top: 0; | ||
+ | left: 5%; | ||
+ | |||
+ | -webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; | ||
+ | -moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; | ||
+ | border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; | ||
+ | |||
+ | background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), | ||
+ | color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); | ||
+ | background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) ); | ||
+ | background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), | ||
+ | color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) ); | ||
+ | } | ||
+ | .button.glossy:active:after, | ||
+ | .button.glass:active:after, | ||
+ | .button.disabled:after, | ||
+ | .button[disabled]:after | ||
+ | { opacity: .6; } | ||
+ | |||
+ | .button.icon.glossy:after, | ||
+ | .button.icon.glass:after { height: 75% ; } | ||
+ | |||
+ | /* -------------- Glass + Transparent -------------- */ | ||
+ | .button.glass { | ||
+ | text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em; | ||
+ | } | ||
+ | .button.glass:active { | ||
+ | text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* -------------- Shapes -------------- */ | ||
+ | |||
+ | /* round */ | ||
+ | .round, .round.glossy:after, .round.glass:after { | ||
+ | border-top: none; | ||
+ | -webkit-border-radius: 1em; | ||
+ | -moz-border-radius: 1em; | ||
+ | border-radius: 1em; | ||
+ | } | ||
+ | |||
+ | /* oval */ | ||
+ | .oval { | ||
+ | border-top: none; | ||
+ | padding-left: .8em; | ||
+ | padding-right: .8em; | ||
+ | -webkit-border-radius: 5em / 2em; | ||
+ | -moz-border-radius: 5em / 2em; | ||
+ | border-radius: 5em / 2em; | ||
+ | } | ||
+ | .oval.glossy:after, .oval.glass:after { | ||
+ | top: 5%; | ||
+ | -webkit-border-radius: 5em / 2em 2em 1em 1em; | ||
+ | -moz-border-radius: 5em / 2em 2em 1em 1em; | ||
+ | border-radius: 5em / 2em 2em 1em 1em; | ||
+ | } | ||
+ | .oval.icon { | ||
+ | padding-left: .8em; | ||
+ | padding-right: .8em; | ||
+ | -webkit-border-radius: 1.5em / 1em; | ||
+ | -moz-border-radius: 1.5em / 1em; | ||
+ | border-radius: 1.5em / 1em; | ||
+ | } | ||
+ | .oval.icon.glossy:after, .oval.icon.glass:after { | ||
+ | -webkit-border-radius: 1.5em / 1em; | ||
+ | -moz-border-radius: 1.5em / 1em; | ||
+ | border-radius: 1.5em / 1em; | ||
+ | } | ||
+ | |||
+ | /* brackets */ | ||
+ | .brackets, .brackets.glossy:after, .brackets.glass:after { | ||
+ | border-top: none; | ||
+ | -webkit-border-radius: .5em / 1em; | ||
+ | -moz-border-radius: .5em / 1em; | ||
+ | border-radius: .5em / 1em; | ||
+ | } | ||
+ | |||
+ | /* skew */ | ||
+ | .skew { | ||
+ | border-top: none; | ||
+ | padding-right: 1.2em; | ||
+ | padding-left: 0.8em; | ||
+ | -webkit-border-radius: 5em 1em / 5em 1em; | ||
+ | -moz-border-radius: 5em 1em / 5em 1em; | ||
+ | border-radius: 5em 1em / 5em 1em; | ||
+ | } | ||
+ | .skew.glossy:after, .skew.glass:after { | ||
+ | left: 10%; | ||
+ | -webkit-border-radius: 7em 1em / 5em 1em; | ||
+ | -moz-border-radius: 7em 1em / 5em 1em; | ||
+ | border-radius: 7em 1em / 5em 1em; | ||
+ | } | ||
+ | .skew.icon { | ||
+ | padding-right: .9em; | ||
+ | padding-left: .8em; | ||
+ | } | ||
+ | |||
+ | /* back */ | ||
+ | .back, .back.glossy:after, .back.glass:after { | ||
+ | border-top-color: rgba(255,255,255,0.5); | ||
+ | -webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; | ||
+ | -moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; | ||
+ | border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; | ||
+ | } | ||
+ | .back.glossy:after, .back.glass:after { | ||
+ | left: 6%; | ||
+ | width: 88%; | ||
+ | } | ||
+ | |||
+ | /* knife */ | ||
+ | .knife { | ||
+ | padding-left: 1.5em; | ||
+ | -webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; | ||
+ | -moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; | ||
+ | border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; | ||
+ | } | ||
+ | .knife.glossy:after, .knife.glass:after { | ||
+ | left: 3%; | ||
+ | width: 97%; | ||
+ | -webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; | ||
+ | -moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; | ||
+ | border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; | ||
+ | } | ||
+ | .knife.glossy.icon:after, .knife.glass.icon:after { | ||
+ | left: 5%; | ||
+ | width: 95%; | ||
+ | -webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; | ||
+ | -moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; | ||
+ | border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; | ||
+ | } | ||
+ | |||
+ | /* shield */ | ||
+ | .shield, .shield.glossy:after, .shield.glass:after { | ||
+ | -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | } | ||
+ | .shield { | ||
+ | padding-left: .8em; | ||
+ | padding-right: .8em; | ||
+ | } | ||
+ | .shield.icon { | ||
+ | padding-left: .6em; | ||
+ | padding-right: .6em; | ||
+ | } | ||
+ | |||
+ | /* drop */ | ||
+ | .drop { | ||
+ | border-top: none; | ||
+ | -webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; | ||
+ | -moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; | ||
+ | border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; | ||
+ | } | ||
+ | .drop.glossy:after, .drop.glass:after { | ||
+ | left: 4%; | ||
+ | -webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; | ||
+ | -moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; | ||
+ | border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; | ||
+ | } | ||
+ | .drop.icon { | ||
+ | padding-right: .6em; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* morph */ | ||
+ | .morph { | ||
+ | border-top: none; | ||
+ | -webkit-border-radius: 5em / 2em; | ||
+ | -moz-border-radius: 5em / 2em; | ||
+ | border-radius: 5em / 2em; | ||
+ | -webkit-transition: -webkit-border-radius .3s ease-in-out; | ||
+ | -moz-transition: -moz-border-radius .3s ease-in-out; | ||
+ | transition: -moz-border-radius .3s ease-in-out; | ||
+ | } | ||
+ | .morph:hover { | ||
+ | -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; | ||
+ | } | ||
+ | .morph:active { | ||
+ | -webkit-border-radius: .3em; | ||
+ | -moz-border-radius: .3em; | ||
+ | border-radius: .3em; | ||
+ | } | ||
+ | .morph:after { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* Some ugly hacks for FF. | ||
+ | Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */ | ||
+ | @-moz-document url-prefix() { | ||
+ | .button { text-align: center; } | ||
+ | .icon { padding: .5em 1em; } | ||
+ | .icon:before { margin-left: -.42em; float: left; } | ||
+ | |||
+ | .drop.icon { padding-right: 1.1em; } | ||
+ | .shield.icon { padding-left: 1.1em; padding-right: 1.1em; } | ||
+ | .skew.icon { padding-right: 1.4em; padding-left: 1.3em; } | ||
+ | .oval.icon { padding-left: 1.3em; padding-right: 1.3em; } | ||
+ | .knife { padding-left: 2em; } | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
+ | |||
<body> | <body> | ||
- | < | + | <div> |
- | + | ||
- | + | ||
<ul> | <ul> | ||
- | <li | + | <li><a href="https://2011.igem.org/Team:HIT-Harbin" class="button blue serif round glass">Home</a></li> |
- | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Project">Project</a></li> | + | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Project" class="button blue serif round glass">Project</a></li> |
- | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Team">Team</a></li> | + | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Team" class="button blue serif round glass">Team</a></li> |
- | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Parts">Parts</a></li> | + | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Parts" class="button blue serif round glass">Parts</a></li> |
- | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Data">Data</a></li> | + | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Data" class="button blue serif round glass">Data</a></li> |
- | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Human Practice">Human Practice</a></li> | + | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Human Practice" class="button blue serif round glass">Human Practice</a></li> |
- | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Notebook">Notebook</a></li> | + | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Notebook" class="button blue serif round glass">Notebook</a></li> |
- | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Safety">Safety</a></li> | + | <li><a href="https://2011.igem.org/Team:HIT-Harbin/Safety" class="button blue serif round glass">Safety</a></li> |
</ul> | </ul> | ||
- | |||
- | |||
</div> | </div> | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 19:45, 4 October 2011