Notifications

Developer
Keith Pickering
Size
5,681 Kb
Views
24,288
  1. Notifications Previews
  2. Notifications HTML Codes
  3. Notifications CSS Codes
  4. Notifications JS Codes

How do I make an notifications?

For a Wordpress theme. What is a notifications? How do you make a notifications? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Notifications Previews
IQ Test

Notifications - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Notifications</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! */ @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,300);
@import url(https://raw.github.com/necolas/normalize.css/master/normalize.css);
/**
* Set up reusable colors
*/
/**
* Colors from Flat UI
* Source: http://flatuicolors.com
*/
* { box-sizing: border-box;
}
body { font-family: 'Roboto', sans-serif; line-height: 1.4; background-color: #e7e7e7;
}
.container { width: 70%; margin: 0 auto; padding: 48px;
}
/**
* This can be extended to anything to make it get slightly bigger on hover,
* which is a pretty commonly desired effect
*/
.big-on-hover { transform: scale(1, 1);
}
.big-on-hover:hover { transform: scale(1.2, 1.2);
}
/**
* Reusable single-direction margin declaration
*/
.margin, p, .flag { margin-top: 0; margin-bottom: 24px;
}
.margin:last-child, p:last-child, .flag:last-child { margin-bottom: 0;
}
/**
* Flag Object
* Original Source: http://csswizardry.com/2013/05/the-flag-object/
*/
.flag { display: table; width: 100%;
}
.flag__image,
.flag__body { display: table-cell; vertical-align: middle;
}
.flag--top .flag__image, .flag--top
.flag__body { vertical-align: top;
}
.flag--bottom .flag__image, .flag--bottom
.flag__body { vertical-align: bottom;
}
.flag__image { padding-right: 24px;
}
.flag__image > img { display: block; max-width: none;
}
.flag--rev .flag__image { padding-right: 0; padding-left: 24px;
}
.flag__body { width: 100%;
}
/**
* Notification Styles
*/
.note { position: relative; overflow: hidden; color: white; background-color: #9b59b6;
}
.note--secondary { background-color: #34495e;
}
.note--success { background-color: #27ae60;
}
.note--warning { background-color: #f39c12;
}
.note--error { background-color: #e74c3c;
}
.note--info { background-color: #3498db;
}
.note__icon,
.note__text { padding: 24px;
}
.note__icon { min-width: 80px; text-align: center; font-size: 32px; font-size: 2rem; background-color: rgba(0, 0, 0, 0.25);
}
.note__text { padding-right: 48px;
}
.note__close { position: absolute; top: 12px; right: 12px; width: 29px; line-height: 30px; font-size: 24px; text-align: center; color: white; background-color: rgba(0, 0, 0, 0.25); opacity: 0; transition: all 0.25s;
}
.note__close:hover { background-color: rgba(0, 0, 0, 0.15);
}
.note:hover .note__close { opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container">
<div class="flag note"> <div class="flag__image note__icon"> <i class="fa fa-heart"></i> </div> <div class="flag__body note__text"> Default color </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--secondary"> <div class="flag__image note__icon"> <i class="fa fa-comment"></i> </div> <div class="flag__body note__text"> Secondary color </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--success"> <div class="flag__image note__icon"> <i class="fa fa-check"></i> </div> <div class="flag__body note__text"> Your thing was successful! </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--warning"> <div class="flag__image note__icon"> <i class="fa fa-exclamation"></i> </div> <div class="flag__body note__text"> Your thing was not so successful! </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--error"> <div class="flag__image note__icon"> <i class="fa fa-times"></i> </div> <div class="flag__body note__text"> Your thing failed completely! </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
<div class="flag note note--info"> <div class="flag__image note__icon"> <i class="fa fa-info"></i> </div> <div class="flag__body note__text"> <p>I barely knew Philip, but as a clergyman I have no problem telling his most intimate friends all about him. Calculon is gonna kill us and it's all everybody else's fault! Is that a cooking show? When will that be? Shut up and get to the point! Bender, being God isn't easy. If you do too much, people get dependent on you, and if you do nothing, they lose hope. You have to use a light touch. Like a safecracker, or a pickpocket.</p> </div> <a href="#" class="note__close"> <i class="fa fa-times"></i> </a>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Notifications - Script Codes CSS Codes

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,300);
@import url(https://raw.github.com/necolas/normalize.css/master/normalize.css);
/**
* Set up reusable colors
*/
/**
* Colors from Flat UI
* Source: http://flatuicolors.com
*/
* { box-sizing: border-box;
}
body { font-family: 'Roboto', sans-serif; line-height: 1.4; background-color: #e7e7e7;
}
.container { width: 70%; margin: 0 auto; padding: 48px;
}
/**
* This can be extended to anything to make it get slightly bigger on hover,
* which is a pretty commonly desired effect
*/
.big-on-hover { transform: scale(1, 1);
}
.big-on-hover:hover { transform: scale(1.2, 1.2);
}
/**
* Reusable single-direction margin declaration
*/
.margin, p, .flag { margin-top: 0; margin-bottom: 24px;
}
.margin:last-child, p:last-child, .flag:last-child { margin-bottom: 0;
}
/**
* Flag Object
* Original Source: http://csswizardry.com/2013/05/the-flag-object/
*/
.flag { display: table; width: 100%;
}
.flag__image,
.flag__body { display: table-cell; vertical-align: middle;
}
.flag--top .flag__image, .flag--top
.flag__body { vertical-align: top;
}
.flag--bottom .flag__image, .flag--bottom
.flag__body { vertical-align: bottom;
}
.flag__image { padding-right: 24px;
}
.flag__image > img { display: block; max-width: none;
}
.flag--rev .flag__image { padding-right: 0; padding-left: 24px;
}
.flag__body { width: 100%;
}
/**
* Notification Styles
*/
.note { position: relative; overflow: hidden; color: white; background-color: #9b59b6;
}
.note--secondary { background-color: #34495e;
}
.note--success { background-color: #27ae60;
}
.note--warning { background-color: #f39c12;
}
.note--error { background-color: #e74c3c;
}
.note--info { background-color: #3498db;
}
.note__icon,
.note__text { padding: 24px;
}
.note__icon { min-width: 80px; text-align: center; font-size: 32px; font-size: 2rem; background-color: rgba(0, 0, 0, 0.25);
}
.note__text { padding-right: 48px;
}
.note__close { position: absolute; top: 12px; right: 12px; width: 29px; line-height: 30px; font-size: 24px; text-align: center; color: white; background-color: rgba(0, 0, 0, 0.25); opacity: 0; transition: all 0.25s;
}
.note__close:hover { background-color: rgba(0, 0, 0, 0.15);
}
.note:hover .note__close { opacity: 1;
}

Notifications - Script Codes JS Codes

$(".note__close").click(function() { $(this).parent() .animate({ opacity: 0 }, 250, function() { $(this) .animate({ marginBottom: 0 }, 250) .children() .animate({ padding: 0 }, 250) .wrapInner("<div />") .children() .slideUp(250, function() { $(this).closest(".note").remove(); }); });
});
Notifications - Script Codes
Notifications - Script Codes
Home Page Home
Developer Keith Pickering
Username keithpickering
Uploaded August 10, 2022
Rating 4.5
Size 5,681 Kb
Views 24,288
Do you need developer help for Notifications?

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!

Keith Pickering (keithpickering) Script Codes
Name
A Pen by Keith Pickering
Easy Container-Breaking Sidebar
Sliding Navigation Menu
Text Inputs with Sliding Labels
Image with inset shadow
Lovely Transforming Menu Button
Material Inspired Menu
Reusable Styles
Windows 8 Start Screen
Metro Interactive Live Tiles
Create amazing blog posts 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!