CSS3 Notification (Cookies)
How do I make an css3 notification (cookies)?
A simple cookies notification using hardware acceleration for mobile and jquery.. What is a css3 notification (cookies)? How do you make a css3 notification (cookies)? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.
CSS3 Notification (Cookies) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Notification (Cookies)</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="cookies"> <p>This is a cookies notification example!</p> <p><a href="#" id="close-cookies">Close Message</a></p>
</div>
<div class="content"> <h1>Cookies notification example</h1> <p>This is a simple demo i've coded for a job I'm currently working on. I needed one of your favourite <code>slideUp</code> notifications to display a Cookies notification. Rcently i've been taking advantage of the <code>translate3d</code> property in CSS3 and I've used it again here. Chris Coyier talks a little about it in <a href="http://css-tricks.com/infinite-all-css-scrolling-slideshow/">this article</a>. The reason i'm using it is simple, The cookies message will appear on a <i>responsive web design</i> and thus i want the animation to look absolutely as smoth as possible.</p> <h2>CSS3 Animations and jQuery powered</h2> <p>I'm using <a href="http://jquery.com">jQuery</a> to fire up the animation on page load, and <a href="http://css-tricks.com/controlling-css-animations-transitions-javascript/">CSS3 animations</a> to perform the cross browsered <i>slide</i> animation.</p> <p><strong>Thanks for checking the demo out, if you like it please heart and follow me on twitter @mattsince87</strong>.<p>
</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>
CSS3 Notification (Cookies) - Script Codes CSS Codes
/* ---------------- Demo Styles ---------------- */
body, html { padding: 0; margin: 0; background: #fff;}
body { padding: 35px;}
.content { display: block; padding: 20px; background: #f8f8f8; border: 3px solid #e8e8e8; border-radius: 10px;} .content > p { font: normal 16px/22px sans-serif; color: #555;} .content > p a { color: #1d7df2; text-decoration: none;} .content > p a:hover { color: #b51db5;}
/* ---------------- CodePen Styles ---------------- */
#cookies { display: none; width: 100%; height: 70px; padding-top: 30px; position: absolute; background: #fcf8e3 ; border-bottom: 2px solid #fbeed5; color: #c09853; text-align: center; top: 0; left: 0; z-index: 9999;} #cookies > p { margin: 0 0 10px 0; font-weight: bold;} #cookies > p a { color: #332b17; text-decoration: none;}
#cookies.display { display: block; /* Cross browser animation */ -webkit-animation: cookies 1s 1; /* Chrome, Safari 5+ */ -moz-animation: cookies 1s 1; /* Firefox 5-15 */ -ms-animation: cookies 1s 1; /* IE9 */ -o-animation: cookies 1s 1; /* Opera 12.00 */ animation: cookies 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */}
@keyframes cookies { 0% { -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } 100% { -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0); }
}
@-webkit-keyframes cookies { 0% { -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } 100% { -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0); }
}
@-moz-keyframes cookies { 0% { -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } 100% { -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0); }
}
@-o-keyframes cookies { 0% { -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0); } 100% { -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0); }
}
.close-cookies { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */ -moz-transform: translate3d(0,-100px,0); /* Firefox */ -ms-transform: translate3d(0,-100px,0); /* IE9 */ -o-transform: translate3d(0,-100px,0); /* Opera */ transform: translate3d(0,-100px,0);
}
CSS3 Notification (Cookies) - Script Codes JS Codes
/* Cookies */
$(document).ready(function(){ $("#cookies").addClass("display"); $("#close-cookies").click(function(){ event.preventDefault(); $("#cookies").addClass("close-cookies"); });
});
Developer | Matt Litherland |
Username | mattsince87 |
Uploaded | August 03, 2022 |
Rating | 3.5 |
Size | 3,055 Kb |
Views | 32,384 |
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!
Name | Size |
Responsive Flat UI Kit | 17,612 Kb |
Google Inspired CSS Preloader | 3,008 Kb |
Responsive Flot Chart | 3,554 Kb |
Flat Origami Article | 3,581 Kb |
Node Waves | 3,216 Kb |
Subtle CSS3 Heart Beat | 2,691 Kb |
Ultimate Pop-Out Menu | 4,264 Kb |
Wishlist Toggle Button | 3,774 Kb |
Cool Hidden Drawer | 4,754 Kb |
SVG Firework Animation | 3,306 Kb |
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!
Name | Username | Size |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
3d css cube | Semenchenko | 4,578 Kb |
Border image | JohnRiordan | 2,120 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Basic template | Tomcat | 1,675 Kb |
Animated skewed panes | NyX | 4,462 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
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!