"

From 2013.igem.org

Revision as of 10:55, 30 August 2013 (view source) Ggirelli (Talk | contribs) ← Older edit		Latest revision as of 14:42, 29 September 2013 (view source) Ggirelli (Talk | contribs)
(42 intermediate revisions not shown)
Line 14:		Line 14:
	background-color: #2880C5;		background-color: #2880C5;
	border-bottom: 7px solid white;		border-bottom: 7px solid white;
		+	box-shadow: inset 0 -2px 6px black;
-	background-image: url(https://static.igem.org/mediawiki/2013/5/53/Tn-2013-headerbg-Sfondobb.png);	+	background-image: url(http://i44.tinypic.com/690qs8.jpg);
-	background-position: center;	+	background-attachment: fixed;
		+	background-position: 0px -500px;
	background-size: 100%;		background-size: 100%;
	}		}
Line 51:		Line 53:
	#tn-header #tn-menu > li {		#tn-header #tn-menu > li {
		+	position: relative;
	display: inline-block;		display: inline-block;
Line 56:		Line 59:
	width: 100px;		width: 100px;
-	margin: 0.5em;	+	margin: 0.4em;
-		+	/*
	background-position: center center;		background-position: center center;
	background-repeat: no-repeat;		background-repeat: no-repeat;
	background-size: 75%;		background-size: 75%;
-		+	*/
	line-height: 100px;		line-height: 100px;
	/*font-weight: bold;*/		/*font-weight: bold;*/
Line 68:		Line 71:
	vertical-align: middle;		vertical-align: middle;
-	transition-property: transform, background-size,box-shadow;	+	transition: transform 0.4s;
-	transition-duration: 0.4s;	+	-webkit-transition: -webkit-transform 0.4s; /* Safari */
-	transition-timing-function: linear;	+	}
-	/* Safari */	+
-	-webkit-transition-property:-webkit-transform, background-size;	+	#tn-header #tn-menu > li > img {
-	-webkit-transition-duration:0.4s;	+	width: 76px;
-	-webkit-transition-timing-function:linear;	+	margin: 12px;
	}		}
	#tn-header #tn-menu > li > a {		#tn-header #tn-menu > li > a {
	display: block;		display: block;
		+
		+	position: absolute;
		+	top: 2.2em;
		+	left: 0;
		+
	padding: 0.3em 0.5em;		padding: 0.3em 0.5em;
-	margin-top: 2.2em;	+	/*margin-top: 2.2em;*/
		+
		+	width: 3em;
		+
	border-radius: 0.5em;		border-radius: 0.5em;
-	border: 2px solid white;	+	border: 3px solid white;
	background: rgba(31,68,87,.9);		background: rgba(31,68,87,.9);
		+	background-image: url(imgs/box-bottoni.png);
	color: #ffffff;		color: #ffffff;
	font-family: 'Mouse Memoirs', sans-serif;		font-family: 'Mouse Memoirs', sans-serif;
Line 89:		Line 101:
	line-height: 1em;		line-height: 1em;
	text-decoration: none;		text-decoration: none;
		+
		+	z-index: 5;
	}		}
-	#tn-header #tn-menu > li:hover {	+	#tn-header #tn-menu > li.active {
	transform: rotate(-15deg);		transform: rotate(-15deg);
	-ms-transform: rotate(-15deg); /* IE 9 */		-ms-transform: rotate(-15deg); /* IE 9 */
	-webkit-transform: rotate(-15deg); /* Safari and Chrome */		-webkit-transform: rotate(-15deg); /* Safari and Chrome */
-	background-size: 100%;	+	/*background-size: 100%;*/
	}		}
-	#tn-header #tn-menu > li:hover > a {	+	@keyframes image {
-	box-shadow: 2px 2px 2px #323232;	+	from {
		+	width: 76px;
		+	margin: 12px;
		+	}
		+	to {
		+	width: 100px;
		+	margin: 0;
		+	}
		+	}
		+	@-webkit-keyframes image /* Safari and Chrome */ {
		+	from {
		+	width: 76px;
		+	margin: 12px;
		+	}
		+	to {
		+	width: 100px;
		+	margin: 0;
		+	}
		+	}
		+
		+	#tn-header #tn-menu > li.active > img {
		+	width: 100px;
		+	margin: 0;
		+
		+	animation: image 1s;
		+	-webkit-animation: image 1s; /* Safari and Chrome */
		+	}
		+
		+	#tn-header #tn-menu > li.active > a {
		+	display: block;
		+
		+	position: absolute;
		+	top: 2.2em;
		+	left: 0;
		+
	padding: 0.3em 0.5em;		padding: 0.3em 0.5em;
-	margin-top: 2.2em;	+	/*margin-top: 2.2em;*/
	border-radius: 0.5em;		border-radius: 0.5em;
	border: 3px solid white;		border: 3px solid white;
		+	box-shadow: 2px 2px 4px #323232;
	background: #C4221C;		background: #C4221C;
	font-family: 'Mouse Memoirs', sans-serif;		font-family: 'Mouse Memoirs', sans-serif;
Line 116:		Line 165:
	#tn-header #tn-menu li ul {		#tn-header #tn-menu li ul {
	display: none;		display: none;
-	position: relative;	+	position: absolute;
		+	top: 60%;
		+	left: -125%;
-	width: 500px;	+	width: 450px;
-	height: 1em;	+	height: 3em;
		+
		+	padding: 0;
		+	padding-top: 3em;
		+	margin: 0;
		+	margin-top: 1em;
	line-height: 1em;		line-height: 1em;
	list-style: none;		list-style: none;
-	transition-property: transform,opacity,padding,margin,top;	+	transform: rotate(15deg);
-	transition-duration: 0.4s;	+	-ms-transform: rotate(15deg); /* IE 9 */
-	transition-timing-function: linear;	+	-webkit-transform: rotate(15deg); /* Safari and Chrome */
	text-align: left;		text-align: left;
	}		}
-	@keyframes open-submenu {	+	@keyframes submenu {
	0% {		0% {
	opacity: 0;		opacity: 0;
-	/*
-	top: 1.5em;
-	padding: 0;
-	margin: 0;
-	transform: rotate(15deg);
-	-ms-transform: rotate(15deg); /* IE 9 */
-	top:2.5em;
-	padding-top: 1em;
-	margin-top: 1em;
-	transform: rotate(15deg);
-	-ms-transform: rotate(15deg); /* IE 9 */
	}		}
	50% {		50% {
	opacity: 0;		opacity: 0;
-	/*
-	top: 1.5em;
-	padding: 0;
-	margin: 0;
-	transform: rotate(15deg);
-	-ms-transform: rotate(15deg); /* IE 9 */
-	top:2.5em;
-	padding-top: 1em;
-	margin-top: 1em;
-	transform: rotate(15deg);
-	-ms-transform: rotate(15deg); /* IE 9 */
	}		}
	100% {		100% {
	opacity: 1;		opacity: 1;
-	top:2.5em;
-	padding-top: 1em;
-	margin-top: 1em;
-	transform: rotate(15deg);
-	-ms-transform: rotate(15deg); /* IE 9 */
	}		}
	}		}
-		+	@-webkit-keyframes submenu /* Safari and Chrome */ {
-	@-webkit-keyframes open-submenu {	+
	0% {		0% {
	opacity: 0;		opacity: 0;
-	/*
-	top: 1.5em;
-	padding: 0;
-	margin: 0;
-	-webkit-transform: rotate(0deg); /* Safari and Chrome */
-	top:2.5em;
-	padding-top: 1em;
-	margin-top: 1em;
-	-webkit-transform: rotate(15deg); /* Safari and Chrome */
	}		}
	50% {		50% {
	opacity: 0;		opacity: 0;
-	/*
-	top: 1.5em;
-	padding: 0;
-	margin: 0;
-	-webkit-transform: rotate(0deg); /* Safari and Chrome */
-	top:2.5em;
-	padding-top: 1em;
-	margin-top: 1em;
-	-webkit-transform: rotate(15deg); /* Safari and Chrome */
	}		}
	100% {		100% {
	opacity: 1;		opacity: 1;
-	top:2.5em;
-	padding-top: 1em;
-	margin-top: 1em;
-	-webkit-transform: rotate(15deg); /* Safari and Chrome */
	}		}
	}		}
-	#tn-header #tn-menu li:hover ul {	+	/*#tn-header #tn-menu li:hover ul {
	display: block;		display: block;
-	animation: open-submenu 2s;
-	-webkit-animation: open-submenu 2s;
-	opacity: 1;	+	animation: submenu .5s;
-	top:2.5em;	+	-webkit-animation: submenu .5s;
-		+	}*/
-	padding-top: 1em;	+
-	margin-top: 1em;	+
-	transform: rotate(15deg);	+
-	-ms-transform: rotate(15deg); /* IE 9 */	+
-	-webkit-transform: rotate(15deg); /* Safari and Chrome */	+
-	}	+
	#tn-header #tn-menu li ul li {		#tn-header #tn-menu li ul li {
	display: inline-block;		display: inline-block;
-	height: 1.4em;	+	height: 32px;
	margin: 0;		margin: 0;
		+	margin-bottom: 3px;
	padding: 0;		padding: 0;
		+	background-color: rgba(45,133,110,.8);
		+	border-radius: 0.5em;
		+	border: 3px solid rgba(250,250,250,1);
		+	box-shadow: 1px 1px 2px black;
	font-family: 'Mouse Memoirs', sans-serif;		font-family: 'Mouse Memoirs', sans-serif;
-	font-size: 1.5em;	+	font-size: 1.3em;
-	font-variant: small-caps;	+
-	line-height: 1em;	+	line-height: 1.5em;
		+	vertical-align: middle;
	}		}
Line 237:		Line 240:
	padding-top: 0em;		padding-top: 0em;
	margin: 0 0.5em;		margin: 0 0.5em;
-	color: #1F4457;	+	color: white;
	text-decoration: none;		text-decoration: none;
-	text-shadow: none;	+	text-shadow: 0 0 8px black;
		+	}
		+
		+	#tn-header #tn-menu li ul li:hover {
		+	background-color: rgba(196,34,28,.8);
		+	border: 3px solid white;
		+	border-radius: 0.5em;
		+	box-shadow: 2px 2px 4px black;
	}		}
	#tn-header #tn-menu li ul li:hover a {		#tn-header #tn-menu li ul li:hover a {
-	color: #C4221C;	+	color: white;
-	text-decoration: underline;	+	text-decoration: none;
		+	text-shadow: 0 0 4px black;
	}		}
Line 267:		Line 278:
	line-height: 1em;		line-height: 1em;
	text-align: center;		text-align: center;
-	text-shadow: 1px 1px 5px #1e0b12;	+	text-shadow: 1px 1px 2px #000;
		+	}
		+
		+	#tn-menu li > span a img {
		+	margin-top: 2.5em;
		+	transition: transform 5s;
		+	-webkit-transition: -webkit-transform 5s; /* Safari */
		+	}
		+
		+	#tn-menu li > span a:hover img {
		+	transition: transform 5s;
		+	-webkit-transition: -webkit-transform 5s; /* Safari */
		+
		+	transform:rotate(3000deg);
		+	-ms-transform:rotate(3000deg); /* IE 9 */
		+	-webkit-transform:rotate(3000deg); /* Safari and Chrome */
		+
	}		}

---

Latest revision as of 14:42, 29 September 2013

/********/ /*HEADER*/ /********/

1. tn-header-wrap {

   display: inline-block;

   width: 100%;
   height: 250px;

   margin: 0;
   padding: 0;

   background-color: #2880C5;
   border-bottom: 7px solid white;
   box-shadow: inset 0 -2px 6px black;

   background-image: url(http://i44.tinypic.com/690qs8.jpg);
   background-attachment: fixed;
   background-position: 0px -500px;
   background-size: 100%;

}

1. tn-header {

   display: static;
   position: relative;
   top: 0;

   max-width: 1300px;
   height: 180px;

   margin: 0 auto;
   padding: 1em;

}

/*-----------*/ /*HEADER MENU*/ /*-----------*/

1. tn-header #tn-menu {

   position: absolute;
   top: 170px;
   left: 0;

   width: 100%;

   margin: 0;
   padding: 0;

   list-style: none;
   text-align: center;

}

1. tn-header #tn-menu > li {

   position: relative;
   display: inline-block;

   height: 100px;
   width: 100px;

   margin: 0.4em;
   /*
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 75%;
   */
   line-height: 100px;
   /*font-weight: bold;*/
   text-shadow: 0 0 2px black;
   text-align: center;
   vertical-align: middle;

   transition: transform 0.4s;
   -webkit-transition: -webkit-transform 0.4s; /* Safari */

}

1. tn-header #tn-menu > li > img {

   width: 76px;
   margin: 12px;

}

1. tn-header #tn-menu > li > a {

   display: block;

   position: absolute;
   top: 2.2em;
   left: 0;

   padding: 0.3em 0.5em;
   /*margin-top: 2.2em;*/

   width: 3em;

   border-radius: 0.5em;
   border: 3px solid white;
   background: rgba(31,68,87,.9);
   background-image: url(imgs/box-bottoni.png);
   color: #ffffff;
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 1.5em;
   line-height: 1em;
   text-decoration: none;

   z-index: 5;

}

1. tn-header #tn-menu > li.active {

   transform: rotate(-15deg);
   -ms-transform: rotate(-15deg); /* IE 9 */
   -webkit-transform: rotate(-15deg); /* Safari and Chrome */

   /*background-size: 100%;*/

}

@keyframes image {

   from {
       width: 76px;
       margin: 12px;
   }
   to {
       width: 100px;
       margin: 0;
   }

} @-webkit-keyframes image /* Safari and Chrome */ {

   from {
       width: 76px;
       margin: 12px;
   }
   to {
       width: 100px;
       margin: 0;
   }

}

1. tn-header #tn-menu > li.active > img {

   width: 100px;
   margin: 0;

   animation: image 1s;
   -webkit-animation: image 1s; /* Safari and Chrome */

}

1. tn-header #tn-menu > li.active > a {

   display: block;

   position: absolute;
   top: 2.2em;
   left: 0;

   padding: 0.3em 0.5em;
   /*margin-top: 2.2em;*/
   border-radius: 0.5em;
   border: 3px solid white;
   box-shadow: 2px 2px 4px #323232;
   background: #C4221C;
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 1.5em;
   line-height: 1em;
   text-decoration: underline;

}

/*SUB MENU*/

1. tn-header #tn-menu li ul {

   display: none;
   position: absolute;
   top: 60%;
   left: -125%;

   width: 450px;
   height: 3em;

   padding: 0;
   padding-top: 3em;
   margin: 0;
   margin-top: 1em;

   line-height: 1em;
   list-style: none;

   transform: rotate(15deg);
   -ms-transform: rotate(15deg); /* IE 9 */
   -webkit-transform: rotate(15deg); /* Safari and Chrome */
   
   text-align: left;

}

@keyframes submenu {

   0% {
       opacity: 0;
   }
   50% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }

} @-webkit-keyframes submenu /* Safari and Chrome */ {

   0% {
       opacity: 0;
   }
   50% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }

}

/*#tn-header #tn-menu li:hover ul {

   display: block;

   animation: submenu .5s;
   -webkit-animation: submenu .5s;

}*/

1. tn-header #tn-menu li ul li {

   display: inline-block;
   height: 32px;

   margin: 0;
   margin-bottom: 3px;
   padding: 0;

   background-color: rgba(45,133,110,.8);
   border-radius: 0.5em;
   border: 3px solid rgba(250,250,250,1);
   box-shadow: 1px 1px 2px black;
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 1.3em;

   line-height: 1.5em;
   vertical-align: middle;

}

1. tn-header #tn-menu li ul li a {

   display: block;
   padding-top: 0em;
   margin: 0 0.5em;
   color: white;
   text-decoration: none;
   text-shadow: 0 0 8px black;

}

1. tn-header #tn-menu li ul li:hover {

   background-color: rgba(196,34,28,.8);
   border: 3px solid white;
   border-radius: 0.5em;
   box-shadow: 2px 2px 4px black;

}

1. tn-header #tn-menu li ul li:hover a {

   color: white;
   text-decoration: none;
   text-shadow: 0 0 4px black;

}

/*------------*/ /*HEADER LOGHI*/ /*------------*/

1. tn-header #tn-loghi {

   width: 100%;
   height: 180px;

}

1. tn-header #tn-loghi .title {

   margin: 0;
   margin-top: 0.3em;

   color: #eee;

   font-family: 'Marck Script', cursive;
   font-size: 7em;

   line-height: 1em;
   text-align: center;
   text-shadow: 1px 1px 2px #000;

}

1. tn-menu li > span a img {

   margin-top: 2.5em;
   transition: transform 5s;
   -webkit-transition: -webkit-transform 5s; /* Safari */

}

1. tn-menu li > span a:hover img {

   transition: transform 5s;
   -webkit-transition: -webkit-transform 5s; /* Safari */

   transform:rotate(3000deg);
   -ms-transform:rotate(3000deg); /* IE 9 */
   -webkit-transform:rotate(3000deg); /* Safari and Chrome */

}