Animated Warning Notification Css3
----------------------------------------------- DEMO ----------------------------------------------------
----------------------------------------------- CSS3 ----------------------------------------------------
body { font:14px Arial, Helvetica, sans-serif; }
img { border:none;}
p { font:14px Arial, Helvetica, sans-serif; color:#91794d; }
h1 { font:bold 22px Arial, Helvetica, sans-serif; }
h1 b { font:bold 24px Arial, Helvetica, sans-serif; color:#fbc324; }
#warningGradientOuterBarG { height:50px; width:350px; border:1px solid #964b01; overflow:hidden; background-color:#fbc324;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fbc324), to(#e1760e)); background: -moz-linear-gradient(top, #fbc324, #e1760e);
background: -webkit-linear-gradient(top, #fbc324, #e1760e); background: -ms-linear-gradient(top, #fbc324, #e1760e);
background: -o-linear-gradient(top, #fbc324, #e1760e); background: linear-gradient(top, #fbc324, #e1760e); }
.warningGradientBarLineG{ background-color:#964b01; float:left; width:14px; height:120px; margin-right:24px; margin-top:-28px; -moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
.warningGradientAnimationG{ width:380px; -moz-animation-name:warningGradientAnimationG; -moz-animation-duration:1.3s; -moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear; -webkit-animation-name:warningGradientAnimationG; -webkit-animation-duration:1.3s; -webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear; -ms-animation-name:warningGradientAnimationG; -ms-animation-duration:1.3s; -ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear; -o-animation-name:warningGradientAnimationG; -o-animation-duration:1.3s; -o-animation-iteration-count:infinite;
-o-animation-timing-function:linear; animation-name:warningGradientAnimationG; animation-duration:1.3s; animation-iteration-count:infinite; animation-timing-function:linear; }
#warningGradientFrontBarG{ }
@-moz-keyframes warningGradientAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-38px; } }
@-webkit-keyframes warningGradientAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-38px; } }
@-ms-keyframes warningGradientAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-38px; } }
@-o-keyframes warningGradientAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-38px; } }
@keyframes warningGradientAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-38px; } }
----------------------------------------------- HTML5 ---------------------------------------------------
<h1>Animated Warning Notification Css3</h1>
<div id="warningGradientOuterBarG">
<div id="warningGradientFrontBarG" class="warningGradientAnimationG">
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
<div class="warningGradientBarLineG"></div>
</div>
</div>
<div style="width:350px; height:200px; border:1px solid #999; background:#f8e8cf;">
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top" align="center"><img src="warn.jpg"></td>
<td align="center"><font style="font:bold 28px Arial, Helvetica, sans-serif; color:#2d1400;">Warning Notification</font>
</td>
</tr>
<tr>
<td colspan="2"><p>
oops there's been a problem<br>
Sorry, but We Don't appear to be able to do what you asked. please submit a bug report
</p></td>
</tr>
</table>
</div>
----------------------------------------------- IMAGES --------------------------------------------------
