Chriscoyier
How do I make an chriscoyier?
What is a chriscoyier? How do you make a chriscoyier? This script and codes were developed by Chris Coyier on 21 August 2022, Sunday.
Chriscoyier - Script Codes HTML Codes
<!DOCTYPE html>
<html class="chriscoyier">
<head> <meta charset="UTF-8"> <title>chriscoyier</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! */ .module:not(.old-school) { animation: flyin 1.2s ease forwards; opacity: 0; transform: scale(2); /* SEE NOTE IN JAVASCRIPT */ -webkit-filter: blur(4px);
}
@keyframes flyin { to { -webkit-filter: blur(0); transform: scale(1); opacity: 1; }
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { padding: 50px;
}
.main, .sidebar { padding: 1em;
}
.main { float: left; width: 70%;
}
.sidebar { float: right; width: 30%;
}
.module { border: 0.5em solid #ccc; background: #eee; padding: 1.5em; margin: 0 0 2em 0;
}
h1 { margin-top: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="main" id="main"> <h1>Any content added to this page will fly in.</h1> <div class="module"> <button id="add-sidebar-module"> Add Sidebar Module </button>   <button id="add-article"> Add Article </button> </div> <div class="module"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div> <div class="module"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</section>
<aside class="sidebar" id="sidebar"> <div class="module"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> <div class="module"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</aside> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Chriscoyier - Script Codes CSS Codes
.module:not(.old-school) { animation: flyin 1.2s ease forwards; opacity: 0; transform: scale(2); /* SEE NOTE IN JAVASCRIPT */ -webkit-filter: blur(4px);
}
@keyframes flyin { to { -webkit-filter: blur(0); transform: scale(1); opacity: 1; }
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { padding: 50px;
}
.main, .sidebar { padding: 1em;
}
.main { float: left; width: 70%;
}
.sidebar { float: right; width: 30%;
}
.module { border: 0.5em solid #ccc; background: #eee; padding: 1.5em; margin: 0 0 2em 0;
}
h1 { margin-top: 0;
}
Chriscoyier - Script Codes JS Codes
$(".module, h1").addClass("old-school");
$("#add-sidebar-module").on("click", function() { $("<div />", { class: "module", text: "I'm new here." }).prependTo("#sidebar");
});
$("#add-article").on("click", function() { $("<div />", { class: "module", html: "<h1>Title</h1><p>text text text.</p>" }).prependTo("#main");
});
/*
RE: -webkit-filter
Prefix free doesn't work with this property yet. It might in the future, if WebKit starts properly self-reporting support of it.
I'd use @include filter w/ Compass, but then the @keyframes have a bunch of prefixes in there they don't need.
Since WebKit is the only supporter right now anyway, might as well just prefix it straight up.
*/
Developer | Chris Coyier |
Username | chriscoyier |
Uploaded | August 21, 2022 |
Rating | 4 |
Size | 3,448 Kb |
Views | 38,456 |
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 |
Simple Responsive Form | 2,698 Kb |
Slide in from bottom boxes | 3,581 Kb |
Complex Text Shadow Examples | 2,988 Kb |
Pull Quote from NY Post | 4,622 Kb |
Barberpole Hover Animation | 3,674 Kb |
Centering in the Unknown | 1,821 Kb |
Striped Headers | 3,177 Kb |
Automatic Table of Contents | 2,869 Kb |
Infinite Slideshow | 1,724 Kb |
Sticky Footer | 2,089 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 |
Voting App - register | MatheusLima92 | 1,948 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Lightning | Akm2 | 19,150 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Objects | Bonzaipenguin | 2,616 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 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!