Push Notification UI
How do I make an push notification ui?
Saw this shot on dribbble loved it and thought I'd give it a try coding it out. Checkout the original shot here. . What is a push notification ui? How do you make a push notification ui? This script and codes were developed by Tyler Fry on 16 July 2022, Saturday.
Push Notification UI Previews
Push Notification UI - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Push Notification UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html{ width: 100%; height: 100%; overflow: hidden }
body { width: 100%; max-height: 500px; padding: 125px 0;
background: rgb(244,226,156);
background: -moz-linear-gradient(-45deg, rgba(244,226,156,0) 0%, rgba(59,41,58,1) 100%), -moz-linear-gradient(left, rgba(244,226,156,1) 0%, rgba(130,96,87,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -webkit-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: -o-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -o-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -ms-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: linear-gradient(135deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), linear-gradient(to right, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }
p { font-size: 13px; margin: 0; padding: 0; line-height: 40px; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,1); border-bottom: 1px solid rgba(0,0,0,0.3); box-shadow: 0 1px 1px rgba(255,255,255,0.2); letter-spacing: 1px;
}
.notification_box { width: 250px; height: 130px; margin: 0 auto; border-radius: 5px; background: rgba(0,0,0,0.55); border: 1px solid rgba(0,0,0,0.2); text-align: center; box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 2px 2px rgba(0,0,0,0.1);}
.inner { width: 250px; height: 130px; border-radius: 5px; background: linear-gradient(top, rgba(239,239,239,0.1) 0%,rgba(0,0,0,0.3) 100%); box-shadow: inset 0 8px 10px rgba(255,255,255,0.1), inset 0 1px 2px rgba(255,255,255,0.3),inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(255,255,255,0.1);
}
.btn { margin-top: 20px; width: 80px; height: 40px; line-height: 40px; display: inline-block; border-radius: 4px; border: 1px solid rgba(0,0,0,0.7); box-shadow: inset 0 4px 6px rgba(255,255,255,0.3), inset 0 0 2px rgba(255,255,255,0.3), 0 2px 2px rgba(0,0,0,0.15); -webkit-transition: all 0.3s ease; }
.btn-accept {
background-color: rgb(100,142,49);
background-image: -moz-linear-gradient(top, rgba(100,142,49,1) 0%, rgba(57,93,15,1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,142,49,1)), color-stop(100%,rgba(57,93,15,1)));
background-image: -webkit-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%);
background-image: -o-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%);
background-image: -ms-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%);
background-image: linear-gradient(to bottom, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%);
margin-right: 10px;
}
.btn-accept:hover { background: rgba(100,142,49,1); }
.btn-accept:active { background: rgba(57,93,15,1); box-shadow: inset 0 0 3px rgba(0,0,0,0.5); }
.btn-decline {
background-color: rgb(203,90,90);
background-image: -moz-linear-gradient(top, rgba(203,90,90,1) 0%, rgba(141,62,62,1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,90,90,1)), color-stop(100%,rgba(141,62,62,1)));
background-image: -webkit-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%);
background-image: -o-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%);
background-image: -ms-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%);
background-image: linear-gradient(to bottom, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%);
margin-left: 10px;
}
.btn-decline:hover { background: rgba(203,90,90,1); }
.btn-decline:active { background: rgba(141,62,62,1); box-shadow: inset 0 0 3px rgba(0,0,0,0.5); }
.icon { background: url(http://s.cdpn.io/6035/notification_icons.png) no-repeat; display: inline-block; margin-top: 12px; }
.icon-arrow { width: 19px; height: 15px; background-position: 0 0; }
.icon-x { width: 15px; height: 15px; background-position: -19px 0; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="notification_box"> <div class="inner"> <p>Allow Push Notifications?</p> <a class="btn btn-accept"><span class="icon icon-arrow"></span></a> <a class="btn btn-decline"><span class="icon icon-x"></span></a> </div>
</div>
</body>
</html>
Push Notification UI - Script Codes CSS Codes
html{ width: 100%; height: 100%; overflow: hidden }
body { width: 100%; max-height: 500px; padding: 125px 0;
background: rgb(244,226,156);
background: -moz-linear-gradient(-45deg, rgba(244,226,156,0) 0%, rgba(59,41,58,1) 100%), -moz-linear-gradient(left, rgba(244,226,156,1) 0%, rgba(130,96,87,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -webkit-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: -o-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -o-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), -ms-linear-gradient(left, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
background: linear-gradient(135deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), linear-gradient(to right, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }
p { font-size: 13px; margin: 0; padding: 0; line-height: 40px; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,1); border-bottom: 1px solid rgba(0,0,0,0.3); box-shadow: 0 1px 1px rgba(255,255,255,0.2); letter-spacing: 1px;
}
.notification_box { width: 250px; height: 130px; margin: 0 auto; border-radius: 5px; background: rgba(0,0,0,0.55); border: 1px solid rgba(0,0,0,0.2); text-align: center; box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 2px 2px rgba(0,0,0,0.1);}
.inner { width: 250px; height: 130px; border-radius: 5px; background: linear-gradient(top, rgba(239,239,239,0.1) 0%,rgba(0,0,0,0.3) 100%); box-shadow: inset 0 8px 10px rgba(255,255,255,0.1), inset 0 1px 2px rgba(255,255,255,0.3),inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(255,255,255,0.1);
}
.btn { margin-top: 20px; width: 80px; height: 40px; line-height: 40px; display: inline-block; border-radius: 4px; border: 1px solid rgba(0,0,0,0.7); box-shadow: inset 0 4px 6px rgba(255,255,255,0.3), inset 0 0 2px rgba(255,255,255,0.3), 0 2px 2px rgba(0,0,0,0.15); -webkit-transition: all 0.3s ease; }
.btn-accept {
background-color: rgb(100,142,49);
background-image: -moz-linear-gradient(top, rgba(100,142,49,1) 0%, rgba(57,93,15,1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,142,49,1)), color-stop(100%,rgba(57,93,15,1)));
background-image: -webkit-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%);
background-image: -o-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%);
background-image: -ms-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%);
background-image: linear-gradient(to bottom, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%);
margin-right: 10px;
}
.btn-accept:hover { background: rgba(100,142,49,1); }
.btn-accept:active { background: rgba(57,93,15,1); box-shadow: inset 0 0 3px rgba(0,0,0,0.5); }
.btn-decline {
background-color: rgb(203,90,90);
background-image: -moz-linear-gradient(top, rgba(203,90,90,1) 0%, rgba(141,62,62,1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,90,90,1)), color-stop(100%,rgba(141,62,62,1)));
background-image: -webkit-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%);
background-image: -o-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%);
background-image: -ms-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%);
background-image: linear-gradient(to bottom, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%);
margin-left: 10px;
}
.btn-decline:hover { background: rgba(203,90,90,1); }
.btn-decline:active { background: rgba(141,62,62,1); box-shadow: inset 0 0 3px rgba(0,0,0,0.5); }
.icon { background: url(http://s.cdpn.io/6035/notification_icons.png) no-repeat; display: inline-block; margin-top: 12px; }
.icon-arrow { width: 19px; height: 15px; background-position: 0 0; }
.icon-x { width: 15px; height: 15px; background-position: -19px 0; }
| Developer | Tyler Fry |
| Username | frytyler |
| Uploaded | July 16, 2022 |
| Rating | 4.5 |
| Size | 3,661 Kb |
| Views | 30,360 |
Do you need developer help for Push Notification UI?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Tyler Fry (frytyler) Script Codes
| Name | Size |
| HTML5 Video Player UI | 7,794 Kb |
| Flat UI Kit - Dribbble Rebound | 7,038 Kb |
| Old School Mac - Pure CSS | 3,329 Kb |
| Flat Instagram Logo | 3,730 Kb |
| Ui Kit Dribbble Rebound | 10,750 Kb |
| Check | 4,482 Kb |
| Flat Icons CSS - Dribbble Remake | 8,259 Kb |
| Email UI - Dribbble Rebound | 8,441 Kb |
| Responsive Viewer | 7,013 Kb |
| Mini Profile | 3,828 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Using Flickr API | MoyArt | 6,761 Kb |
| A Pen by Eka Risyana | Risyana | 3,705 Kb |
| Mondrian | Chrisarmstrong | 2,787 Kb |
| Alumni ECA | MatheusLima92 | 3,777 Kb |
| Simple personal profile | Miroot | 2,856 Kb |
| A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
| Animating characters with jQuery | 042 | 2,776 Kb |
| CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
| Importable Clearfix | Corysimmons | 1,411 Kb |
| Base64 SVG Me | MrBambule | 44,786 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!