Simple and Soothing CSS3 Notifications - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div class="warning alert-message"> <a href="#" class="close">✘</a> <p>First and Last Warning.</p> </div> <div class="error alert-message"> <a href="#" class="close">✘</a> <p>Oh Snap, Something went wrong.</p> </div> <div class="success alert-message"> <a href="#" class="close">✔</a> <p>Everything is Great!</p> </div>

.alert-message { font-family: sans-serif; margin: 20px; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 1px; position: relative; font-size: 12px; } .alert-message .close { color: #745050; text-decoration: none; float: right; margin: 7px 7px 0 0; font-weight: bold; font-size: 16px; } .alert-message p { display: block; margin: 0; padding: 8px 20px 7px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .error { background-color: #d29191; -webkit-box-shadow: 0px 0px 6px rgba(244,187,187,0.7); -moz-box-shadow: 0px 0px 6px rgba(244,187,187,0.7); box-shadow: 0px 0px 6px rgba(244,187,187,0.7); } .error p { background-color: #f4baba; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4baba), to(#db7f7f)); background-image: -webkit-linear-gradient(top, #f4baba, #db7f7f); background-image: -moz-linear-gradient(top, #f4baba, #db7f7f); background-image: -ms-linear-gradient(top, #f4baba, #db7f7f); background-image: -o-linear-gradient(top, #f4baba, #db7f7f); background-image: linear-gradient(top, #f4baba, #db7f7f); filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f4baba', EndColorStr='#db7f7f'); -webkit-box-shadow: inset 0px 1px 0px #f7d0d0; -moz-box-shadow: inset 0px 1px 0px #f7d0d0; box-shadow: inset 0px 1px 0px #f7d0d0; color: #745050; text-shadow: 1px 1px 0px #eaadad; } .success { background-color: #c6cdaa; -webkit-box-shadow: 0px 0px 6px rgba(223,230,198,0.7); -moz-box-shadow: 0px 0px 6px rgba(223,230,198,0.7); box-shadow: 0px 0px 6px rgba(223,230,198,0.7); } .success p { background-color: #e2e8c9; background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e8c9), to(#c1c8a7)); background-image: -webkit-linear-gradient(top, #e2e8c9, #c1c8a7); background-image: -moz-linear-gradient(top, #e2e8c9, #c1c8a7); background-image: -ms-linear-gradient(top, #e2e8c9, #c1c8a7); background-image: -o-linear-gradient(top, #e2e8c9, #c1c8a7); background-image: linear-gradient(top, #e2e8c9, #c1c8a7); filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e8c9', EndColorStr='#c1c8a7'); -webkit-box-shadow: inset 0px 1px 0px #ebf0da; -moz-box-shadow: inset 0px 1px 0px #ebf0da; box-shadow: inset 0px 1px 0px #ebf0da; color: #676b5b; text-shadow: 1px 1px 0px #d6dcc3; } .warning { background-color: #D0D291; -webkit-box-shadow: 0px 0px 6px rgba(223,230,198,0.7); -moz-box-shadow: 0px 0px 6px rgba(223,230,198,0.7); box-shadow: 0px 0px 6px rgba(223,230,198,0.7); } .warning p { background-color: #D0D291; background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1b4), to(#dede85)); background-image: -webkit-linear-gradient(top, #f1f1b4, #dede85); background-image: -moz-linear-gradient(top, #f1f1b4, #dede85); background-image: -ms-linear-gradient(top, #f1f1b4, #dede85); background-image: -o-linear-gradient(top, #f1f1b4, #dede85); background-image: linear-gradient(top, #f1f1b4, #dede85); filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1b4', EndColorStr='#dede85'); -webkit-box-shadow: inset 0px 1px 0px #ebf0da; -moz-box-shadow: inset 0px 1px 0px #ebf0da; box-shadow: inset 0px 1px 0px #ebf0da; color: #676b5b; text-shadow: 1px 1px 0px #d6dcc3; }

Tutorials Palace 7 August, 2018 No Comments

276 Views