Chriscoyier

Developer
Size
3,448 Kb
Views
38,456

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 Previews

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> &emsp; <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.
*/
Chriscoyier - Script Codes
Chriscoyier - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded August 21, 2022
Rating 4
Size 3,448 Kb
Views 38,456
Do you need developer help for Chriscoyier?

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!

Chris Coyier (chriscoyier) Script Codes
Create amazing SEO content 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!