xl1

CSS カスタムフィルタについてのメモ

CSS custom filters (CSS shaders) が Chrome canary の about:flags で有効化できるようになって から 1 年たったので現状メモ。 とはいえ、1 年前から対応が広がったものの、あまり新しいことができるようにはなっていない。

検証環境

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1652.0 Safari/537.36

juno

MindBEMding

• MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
• BEM
• About HTML semantics and front-end architecture – Nicolas Gallagher

BEMとは？

• block, element, modifierの頭文字
• Yandexで発案されたフロントエンドの命名手法

Tenderfeel

//-----------------------------------------------
//CSS Flexible Box Layout Module Mixin
//W3C Candidate Recommendation, 18 September 2012
//http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
//-----------------------------------------------


//Flex Containers: the ‘flex’ and ‘inline-flex’ ‘display’ values
$default-flex-display: flex;

watilde

/**
 * @fileOverview Easy to write to load grunt plugin.
 * @author Daijiro Wachi
 */

module.exports = function(grunt) {
	"use strict";

	/** @type {object} pkg */
	var pkg = grunt.file.readJSON("package.json");

dsuket

module.exports = function(grunt) {

	var fs = require('fs');

	// ファイルのmtimeを比較
	var compareMtime = function(src, target) {
		var isNewer = true;
		if (fs.existsSync(target)) {
			isNewer = fs.statSync(src).mtime > fs.statSync(target).mtime;            
		}

jakeonrails

data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

terkel

// _easing.scss, CSS easing functions - gist.github.com/terkel/4377409
// Based on Caesar - matthewlein.com/ceaser

$linear:            cubic-bezier( 0.250,  0.250,  0.750,  0.750 );
$ease:              cubic-bezier( 0.250,  0.100,  0.250,  1.000 );
$ease-in:           cubic-bezier( 0.420,  0.000,  1.000,  1.000 );
$ease-out:          cubic-bezier( 0.000,  0.000,  0.580,  1.000 );
$ease-in-out:       cubic-bezier( 0.420,  0.000,  0.580,  1.000 );

$ease-in-quad:      cubic-bezier( 0.550,  0.085,  0.680,  0.530 );

xl1

CSS でフォームの値を読む

これは CSS Programming Advent Calendar 2012 の 21 日目の記事です。がすでに 22 日になってしまいました。ごめんなさい。

7 日目の記事（ドラッグをキメる） で、input 要素の value の値は「CSS で検知できない」と書きましたが、嘘です。ごめんなさい。

それ実は CSS でできるよ！

Client-Side Form Validation の仕組みを無理やり使います。 input の pattern 属性と :valid, :invalid 疑似クラスで、特定の文字列のみに反応してスタイルを適用できます。

hokaccha

#!/bin/sh

set -e

if [ $# -ne 2 -a $# -ne 3 ]; then
  echo 'Usage:'
  echo '  $ git export-diff <commit> <output_dir>'
  echo '  $ git export-diff <commit> <commit> <output_dir>'
  exit 1
fi

xl1

/*
@function int($x) {
  $list: ();
  @for $i from floor($x - $x) to floor($x) {
    $list: append($list, 0);
  }
  @return length($list);
}
*/
// もっとよいやり方がある