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
chriscoyier / index.html
Created Sep 23, 2015
Difference Between Inline SVG reference and External reference
View index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
.icon {
width: 100px;
height: 100px;
View gulpfile.js
// gulpfile.js
// Initialize modules
const gulp = require('gulp');
// Importing all the Gulp-related packages we want to use
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
//const browserSync = require('browser-sync');
//const server = browserSync.create();
const child = require('child_process');
chriscoyier / index.pug
Last active Jan 2, 2020
Playing with GistPad
View index.pug
# Hello World!
View dabblet.css
.holder {
position: relative;
width: 215px;
height: 215px;
margin: 20px;
z-index: 999;
cursor: pointer;
.h1 {
View mq.css
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
View dabblet.css
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
label {
-webkit-appearance: push-button;
-moz-appearance: button;

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 / 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 / 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}}",
You can’t perform that action at this time.