CSS WG Invited Expert
author (2014)
about:this-talk
scroll |
fixed |
local |
|
---|---|---|---|
Scrolls with page | ✓ | ✓ | |
Scrolls with element | ✓ |
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Welsh onion fennel wakame sea lettuce kale bush tomato beetroot radicchio courgette collard greens. Horseradish peanut celtuce gumbo courgette swiss chard coriander squash garbanzo winter purslane. Courgette nori azuki bean garlic sorrel mung bean gourd soybean groundnut.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
div.wrapper {
width: 700px;
margin: 0 auto;
}
div.wrapper { width: 700px; margin: 0
calc(50% - 700px/2)
; }
section
{ width: 700px;
padding
: 0 calc(50% - 350px); }
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Welsh onion fennel wakame sea lettuce kale bush tomato beetroot radicchio courgette collard greens. Horseradish peanut celtuce gumbo courgette swiss chard coriander squash garbanzo winter purslane. Courgette nori azuki bean garlic sorrel mung bean gourd soybean groundnut.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Welsh onion fennel wakame sea lettuce kale bush tomato beetroot radicchio courgette collard greens. Horseradish peanut celtuce gumbo courgette swiss chard coriander squash garbanzo winter purslane. Courgette nori azuki bean garlic sorrel mung bean gourd soybean groundnut.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.
<div class="lightbox"></div>
.lightbox {
width: 0;
height: 0;
background: url(img/secret.jpg) / cover, white;
box-shadow: 2px 2px 10px black;
}
.lightbox.current {
width: 70%;
height: 80%;
}
auto
values/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/
(function(){
// Private helper vars
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
var _ = self.Prism = {
highlightAll: function(async, callback) {
var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');
for (var i=0, element; element = elements[i++];) {
_.highlightElement(element, async === true, callback);
}
},
highlightElement: function(element, async, callback) {
// Find language
var language, grammar, parent = element;
while (parent && !lang.test(parent.className)) {
parent = parent.parentNode;
}
if (parent) {
language = (parent.className.match(lang) || [,''])[1];
grammar = _.languages[language];
}
if (!grammar) {
return;
}
// Set language on the element, if not present
element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
// Set language on the parent, for styling
parent = element.parentNode;
if (/pre/i.test(parent.nodeName)) {
parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
}
var code = element.textContent;
if(!code) {
return;
}
code = code.replace(/&/g, '&').replace(/</g, '<')
.replace(/>/g, '>').replace(/\u00a0/g, ' ');
//console.time(code.slice(0,50));
var env = {
element: element,
language: language,
grammar: grammar,
code: code
};
_.hooks.run('before-highlight', env);
if (async && self.Worker) {
var worker = new Worker(_.filename);
worker.onmessage = function(evt) {
env.highlightedCode = Token.stringify(JSON.parse(evt.data));
env.element.innerHTML = env.highlightedCode;
callback && callback.call(env.element);
//console.timeEnd(code.slice(0,50));
_.hooks.run('after-highlight', env);
};
worker.postMessage(JSON.stringify({
language: env.language,
code: env.code
}));
}
else {
env.highlightedCode = _.highlight(env.code, env.grammar)
env.element.innerHTML = env.highlightedCode;
callback && callback.call(element);
_.hooks.run('after-highlight', env);
//console.timeEnd(code.slice(0,50));
}
},
highlight: function (text, grammar) {
return Token.stringify(_.tokenize(text, grammar));
},
tokenize: function(text, grammar) {
var Token = _.Token;
var strarr = [text];
var rest = grammar.rest;
if (rest) {
for (var token in rest) {
grammar[token] = rest[token];
}
delete grammar.rest;
}
tokenloop: for (var token in grammar) {
if(!grammar.hasOwnProperty(token) || !grammar[token]) {
continue;
}
var pattern = grammar[token],
inside = pattern.inside,
lookbehind = !!pattern.lookbehind || 0;
pattern = pattern.pattern || pattern;
for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop
var str = strarr[i];
if (strarr.length > text.length) {
// Something went terribly wrong, ABORT, ABORT!
break tokenloop;
}
if (str instanceof Token) {
continue;
}
pattern.lastIndex = 0;
var match = pattern.exec(str);
if (match) {
if(lookbehind) {
lookbehind = match[1].length;
}
var from = match.index - 1 + lookbehind,
match = match[0].slice(lookbehind),
len = match.length,
to = from + len,
before = str.slice(0, from + 1),
after = str.slice(to + 1);
var args = [i, 1];
if (before) {
args.push(before);
}
var wrapped = new Token(token, inside? _.tokenize(match, inside) : match);
args.push(wrapped);
if (after) {
args.push(after);
}
Array.prototype.splice.apply(strarr, args);
}
}
}
return strarr;
}
<svg version="1.0"
xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
<feOffset dx="2" dy="3" result="offsetblur"/>
<feFlood flood-color="black"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 3px 5px black);
<svg version="1.0"
xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</svg>
filter: url(blur.svg#blur);
filter: blur(5px);
“Every impulse that we strive to strangle broods in the mind and poisons us. The body sins once, and has done with its sin, for action is a mode of purification. Nothing remains then but the recollection of a pleasure, or the luxury of a regret. The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
— Oscar Wilde, The Picture of Dorian Gray
frames.png (500×72)
<div id="frame-animation"></div>
dabblet.com/gist/1745856
@keyframes typing { from { width: 0; } }
@keyframes caret { 50% { border-color: transparent; } }
code {
width: 13.2em; /* fallback, # of chars × 0.55 */
width: 24ch; /* # of characters */
border-right: .1em solid;
overflow: hidden;
animation: typing 12s steps(24, end),
caret .5s step-end infinite alternate;
}
Slides at lea.verou.me/more-css-secrets