maxw3st

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;

maxw3st

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;

maxw3st

/* 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'); }
}

maxw3st

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

html { background: white; }

.scrollbox {
	overflow: auto;

maxw3st

/**
 * Playing with background-attachment
 */

pre {
	max-height: 150px;
	border: 1px solid silver;
	overflow: auto;
	background: url('http://placekitten.com/200/200');
	color: white;

maxw3st

/**
 * 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;
}

maxw3st

------------------------------
DAY 1
------------------------------

10:20 Vitaly Friedman: Responsive Design: Smashing Magazine's case study
http://www.smashingmagazine.com/

pre-condition: 
width 1024px
fully accessible without images

maxw3st

/**
 * Text masking — The SVG way
 */

svg {
	font: 900 500%/1.2 'Arial Black', sans-serif;
}

text {
	fill: url(#wood);

maxw3st

/**
 * 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: */

maxw3st

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