Bootstrap snippet: Rounded and Shadowed Alerts

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: bootstrap,snippet,alerts,Rounded,Shadowed ,messages,code,css



<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="col-md-6"> <div class="header bordered-blueberry">Rounded &amp; Shadowed Alerts</div> <div class="alert alert-warning fade in radius-bordered alert-shadowed"> <button class="close" data-dismiss="alert"> × </button> <span class="badge badge-success graded"> 0 </span> <strong>Warning</strong> Your monthly traffic is reaching limit. </div> <div class="alert alert-success fade in radius-bordered alert-shadowed"> <button class="close" data-dismiss="alert"> × </button> <span class="badge badge-darkorange graded"> 2 </span> <strong>Success</strong> Two Tasks Are Completed. </div> <div class="alert alert-info fade in radius-bordered alert-shadowed"> <button class="close" data-dismiss="alert"> × </button> <span class="badge badge-sky graded"> 8 </span> <strong>Info!</strong> You have 8 unread messages. </div> <div class="alert alert-danger fade in radius-bordered alert-shadowed"> <button class="close" data-dismiss="alert"> × </button> <i class="fa-fw fa fa-times"></i> <strong>Error!</strong> Update has failed. </div> </div> </div>
.alert.alert-shadowed { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .alert.radius-bordered { -webkit-border-radius: 3px; -webkit-background-clip: padding-box; -moz-border-radius: 3px; -moz-background-clip: padding; border-radius: 3px; background-clip: padding-box; } .alert { margin-bottom: 20px; margin-top: 0; color: #fff; border-width: 0; border-left-width: 5px; padding: 10px; border-radius: 0; } .alert.alert-warning { border-color: #ffce55; color: #555; background: #fff1a8; } .alert.alert-success { border-color: #8cc474; background: #a0d468; } .alert.alert-info { border-color: #11a9cc; background: #57b5e3; } .alert.alert-danger { border-color: #df5138; background: #e46f61; } .label-success.graded, .badge-success.graded { background: linear-gradient(to right,#53a93f,#b0e0a4)!important; } .label-darkorange.graded, .badge-darkorange.graded { background: linear-gradient(to right,#ed4e2a,#f5a998)!important; } .label-darkorange, .badge-darkorange { background-color: #ed4e2a; background-image: none!important; } .label-sky.graded, .badge-sky.graded { background: linear-gradient(to right,#11a9cc,#c4e6f6)!important; } .label-sky, .badge-sky { background-color: #11a9cc; background-image: none!important; }
Dey-Dey

Rounded and Shadowed Alerts

Dey-Dey
  Feb 17th 2015, 14:13
3.7K Views