RodneyWeis

Sublime Text 2 – Useful Shortcuts (PC)

Loosely ordered with the commands used most towards the top. Sublime also offer full documentation.

Editing

Ctrl+⇧+K	delete line
Ctrl+↩	insert line after
Ctrl+⇧+↩	insert line before
Ctrl+⇧+↑	move line (or selection) up

RodneyWeis

/**
 * Failed attempt at gracefully degrading switch-style checkboxes
 * 		without pseudoelements (which shouldn’t exist on replaced elements) and extra elements.
 * Inspired by Espresso’s “Tools” switch
 * DO NOT USE. Currently only works properly in WebKit :(
 */

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
	appearance: none;

RodneyWeis

/**
 * tetrahedron gallery (tested in Chrome)
 */
* { margin: 0; padding: 0; }
.gallery {
	position: absolute;
	top: 50%; left: 50%;
	margin: -10em;
	width: 20em; height: 20em;
	transform-style: preserve-3d;

RodneyWeis

/**
 * Original: http://dabblet.com/gist/3932798
 * tag list using gradients and transitions on pseudo-elements
 * idea for transitions on pseudo-elements explained here:
 * http://vimeo.com/51897358
 * Tested in Chrome, Firefox, Opera, Safari
 * (on Windows 7) 
 */
* { margin: 0; }
html { font: 100%/1.5 'Century Gothic', sans-serif; }

RodneyWeis

/**
 * Circular Tooltip (SO)
 * http://dabblet.com/gist/3979221/cb69c5e8ccf0745fff2c94b47b27b108931f1a15 Original by Ana Tudor
 * http://stackoverflow.com/q/13132864/1397351
 */
* { margin: 0; padding: 0; }
body {
	overflow: hidden;
	background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg);
}

RodneyWeis

/**
 * Weird behavior when combining opacity & z-index: -1
 */

div {
	position: relative;
	width: 200px; height: 200px;
	background: yellowgreen;
	
	/* Try commenting this or setting it to 1: */

RodneyWeis

/**
 * box-shadow: 10px 10px 10px -5px gray; applied in stages
 */

@keyframes box-shadow {
	from { box-shadow: 0 0 orange }
	10% { box-shadow: 10px 0 orange } /* x offset */
	20% { box-shadow: 10px 15px orange } /* y offset */
	30% { box-shadow: 10px 15px 0 -5px orange } /* spread */
	40% { box-shadow: 10px 15px 0 -5px gray } /* color */

RodneyWeis

/**
 * Fake animated pseudo
 */
div {
  width: 200px;
  padding: 10px;
  position: relative;
  background: red;
  background-clip: content-box;
  animation: bounce infinite alternate 0.5s;

RodneyWeis

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
	background: white;
	font: 120% sans-serif;
}

RodneyWeis

/* Image interpolation demo */

@keyframes browsers {
	from, to { background-image: url('http://lea.verou.me/css-4d/img/firefox-logo.png'); }
	20% { background-image: url('http://lea.verou.me/css-4d/img/chrome-logo.png'); }
	40% { background-image: url('http://lea.verou.me/css-4d/img/safari-logo.png'); }
	60% { background-image: url('http://lea.verou.me/css-4d/img/opera-logo.png'); }
	80% { background-image: url('http://lea.verou.me/css-4d/img/ie-logo.png'); }
}