これは CSS Programming Advent Calendar 2012 の 7 日目の記事です。
CSS プログラミングの基本は、「ユーザの操作をなんとかして受け取ってスタイルをあてる」ということの繰り返しです。
クリックの検出に :checked
や :active
, mouseover なら :hover
を使う……とやるわけですね。
ならば次は「ドラッグ」も検出したいところです。
# convert .obj file to JSON | |
try: | |
import json | |
except ImportError: | |
import simplejson as json | |
class ModelData: | |
def __init__(self): |
class window.WebCam | |
constructor: -> | |
@video = document.createElement('video') | |
init: (playCallback, failCallback) -> | |
userMedia = navigator.getUserMedia or navigator.webkitGetUserMedia | |
if not userMedia | |
return failCallback?() | |
@video.addEventListener('canplay', => @video.play()) |
これは CSS Programming Advent Calendar 2012 の 7 日目の記事です。
CSS プログラミングの基本は、「ユーザの操作をなんとかして受け取ってスタイルをあてる」ということの繰り返しです。
クリックの検出に :checked
や :active
, mouseover なら :hover
を使う……とやるわけですね。
ならば次は「ドラッグ」も検出したいところです。
precision mediump float; | |
uniform vec2 u_textureSize; | |
void main(){ | |
float x = u_textureSize.x - 50.0; | |
gl_FragColor = vec4(x / 250.0, 0.0, 0.0, 1.0); | |
} |
@import "util.scss"; | |
$sticky-area: 100%; | |
@mixin use-stickers($height){ | |
$sticky-area: $height; | |
body { | |
margin: 0; | |
height: $height; | |
overflow-x: hidden; | |
} |
これは CSS Programming Advent Calendar 2012 の 14 日目の記事です。
8 月の末に、WebKit に position: sticky
というプロパティが追加されました。
position: sticky
が指定された要素は、親要素との位置関係によって、position: fixed
または position: relative
が指定されたかのように振る舞います。
例えば、ある程度スクロールするとサイドバーやナビゲーションが固定されるサイトをたまに見かけますが(例えば Togetter, LESS のサイト, etc.)その動作が CSS で指定できるようになったわけです。
HTML5Rocks に詳しい解説があるので、「ただしい」使用法についてはそちらを参照してください。
これは CSS Programming Advent Calendar 2012 の 18 日目の記事です。
現在、いくつかのブラウザベンダーから新しい CSS の機能が提案・実装されており、CSS で今までにできなかった表現も可能になってきています。 例えば、Firefox や Chrome では、要素を自由に切ったり貼ったりできるようになりました。
Firefox 4 以上では、要素を画像として取得する element()
関数 が実装されています。
これは CSS Programming Advent Calendar 2012 の 21 日目の記事です。がすでに 22 日になってしまいました。ごめんなさい。
7 日目の記事(ドラッグをキメる) で、input
要素の value
の値は「CSS で検知できない」と書きましたが、嘘です。ごめんなさい。
Client-Side Form Validation の仕組みを無理やり使います。
input
の pattern
属性と :valid
, :invalid
疑似クラスで、特定の文字列のみに反応してスタイルを適用できます。
$color-base: #eee !default; | |
$color-border: darken($color-base, 50%); | |
$color-border-light: lighten($color-border, 30%); | |
$color-button: $color-base; | |
$color-button-hover: darken($color-button, 5%); | |
$color-button-push: darken($color-button, 15%); | |
$color-button-text: darken($color-base, 60%); | |
$check-size: 20px; |
{ IF, ELSE } = Retention | |
get = (url) -> | |
r = new Retention() | |
xhr = new XMLHttpRequest() | |
xhr.open 'GET', url, true | |
xhr.onload = -> r.resolve xhr.responseText | |
xhr.onerror = -> r.reject xhr.statusText | |
xhr.send() | |
r |