Skip to content

Instantly share code, notes, and snippets.

Chris Coyier chriscoyier

Block or report user

Report or block chriscoyier

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View dabblet.css
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
View top.md

The top property in CSS goes hand in hand with positioning. By default, elements are static positioned in which the top property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the top value plays a big role.

div {
  top: value (px, em, %, pt, etc) || auto || inherit;   /* can be negative */
}

The value for top is any of the valid lengths of CSS.

"The Nudge" (Relative Position)

@chriscoyier
chriscoyier / dabblet.css
Created Dec 21, 2011
Click open/close Dropdown in pure CSS
View dabblet.css
/* Click open/close Dropdown in pure CSS */
.tabs {
position: relative;
clear: both;
margin: 50px;
}
.tab {
float: left;
position: relative;
@chriscoyier
chriscoyier / dabblet.css
Created Jan 11, 2012
Triangle with Shadow
View dabblet.css
/*
Triangle with Shadow
*/
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
View ip.json
{
"continent":"North America",
"address_format":"{{recipient}}\n{{street}}\n{{city}} {{region_short}} {{postalcode}}\n{{country}}",
"alpha2":"CA",
"alpha3":"CAN",
"country_code":"1",
"international_prefix":"011",
"ioc":"CAN",
"gec":"CA",
"name":"Canada",
@chriscoyier
chriscoyier / frontendplugins.md
Last active Sep 11, 2019
How WordPress Plugins Should Handle Front End Resources
View frontendplugins.md

How WordPress Plugins Should Handle Front End Resources

This is a WORK IN PROGRESS intended for fleshing out and feedback

It's very common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, the plugin will add a <link> element to that CSS. If the plugin needs JavaScript, it will add a <script> to that JavaScript.

Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions. They rightfully want good ratings and little customer support.

But this comes at the cost of additional HTTP requests. In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. Front end developers want to decide and control how front end resources are being handled, and WordPress plugins don't typically make this easy on them.

View embed.js
const App = () => {
useCodePenEmbed();
return (
<PrefillEmbed
className="codepen"
penTitle="My sweet demo"
embedHeight="400"
themeId="31205"
editable
description="Renders a barebones React component"
@chriscoyier
chriscoyier / dabblet.css
Created Jan 9, 2012
YouTube Footer Buttons
View dabblet.css
/*
YouTube Footer Buttons
*/
.button {
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
box-shadow: 0 1px 1px #fff;
font: bold 11px Sans-Serif;
View dabblet.css
/* Oprah Thing
Saw some movie and there was some Oprah-related commerical before it and it had title things like this during it
*/
body { background: black; padding: 100px; margin: 0; }
h1 {
text-align: center;
color: white;
text-transform: uppercase;
View tags.php
<?php
class CTF_Register_Taxonomies {
/**
* Initialize the class
*/
public function __construct() {
add_action('init', array( $this, 'tags_support_all') );
add_action('pre_get_posts', array( $this, 'tags_support_query') );
You can’t perform that action at this time.