CSS: Banner E-World

by Jens Kühn

HTML

<div id="banner">
		
			<div class="inhalt">

				<div class="text_deutsch">Frohe Weihnachten</div>
				<div class="text_englisch">Merry Christmas</div>

			</div><!--.inhalt-->
		
		</div><!--#banner-->

CSS

#banner {
	position: fixed;
	top: 30px;
	left: -120px;
	padding: 10px 120px;
	background: #a90329;
	background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
	background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
	border: 3px solid red;
	-webkit-box-shadow: 0 0 5px #666;
	-moz-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 99999;
}

#banner .inhalt {
	position: relative;
	width: 100px;
	height: 35px;
	text-align: center;
}

#banner .inhalt .text_deutsch,
#banner .inhalt .text_englisch {
	position: absolute;
	color: #fff;
	font-family: 'Margarine', cursive;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-shadow: 1px 1px 3px #333;
}

#banner .inhalt .text_deutsch {
	opacity: 1;
	-webkit-animation: text_deutsch 10s infinite;
	-moz-animation: text_deutsch 10s infinite;
	-o-animation: text_deutsch 10s infinite;
	-ms-animation: text_deutsch 10s infinite;
	animation: text_deutsch 10s infinite;
}

#banner .inhalt .text_englisch {
	opacity: 0;
	-webkit-animation: text_englisch 10s infinite;
	-moz-animation: text_englisch 10s infinite;
	-o-animation: text_englisch 10s infinite;
	-ms-animation: text_englisch 10s infinite;
	animation: text_englisch 10s infinite;
}


/* Animation für die Texte */

@-webkit-keyframes text_deutsch {
	0% { opacity: 0; }
	5% {...