5509

はFlashがオフになっていたりするとHTML5のvideo要素でビデオが見れるのですが(ビデオの右下にある「Swith to HTML5 Player」のリンクをクリックしても切り替えられます)、その状態であれば表示しているmp4のファイルを開けばその場で保存ができます。

というわけで、Vimeoで適当なビデオページを開いて下のブックマークレットを実行するだけです。

開いたら、名前を付けて保存で、適当な名前に「.mp4」を付けて保存するだけです。

※IE8以下では使えないです

Sassで使うprefixを連想配列ぽいやつで指定して必要なプロパティを吐き出す

タイトルがカオス・・・下みたいな各vendor prefixを使うか使わんかみたいな連想配列ぽい配列を定義しておくと、trueのvendor prefixが付いたプロパティだけを吐き出すようなやつがほしかった

$use:
  -webkit-, true,
  -moz-, true,
  -o-, true,
  -ms-, true;

// 本当はこうしたいけど
$use: {
  '-webkit-': true,
  '-moz-': true,
  '-o-': true,
  '-ms-': true
}

全部trueのときは例えばborder-radiusだと

.hoge {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radisu: 5px;
  border-radius: 5px;
}

みたいな。falseにしたらそれに対応するprefixが出力されなくなる、みたいな。全部のmixinに書けばそれで終わりだけど、そんなの面倒くさいし、vendor prefixを付けたプロパティを出力するmixinみたいなのを書いた。

Read more

jq.carouselっていうカルーセルのjQueryプラグインつくった

githubでちょっと前に公開したやつです。こっちでアナウンスしてなかったので。

ドキュメント・サンプルは以下のリンク先を参考にしてください。(変な英語ですけど、なんとなく言いたいことは分かると思います。

日本語のドキュメントはWebDesigning 4月号のjQuery Labで書きましたので、どうしても日本語ドキュメントじゃないとだめなんだ!っていう方は見てみてください。

特徴は、色んなことできるようにベースになれるようなAPIのみ提供、タイマーでスライドショーみたいにしたい、とかは自分でsetIntervalとか使って実装してください。サンプルの最後にもタイマー使ったものは入っています。

要望とかバグ報告などはgithubのIssuesへお願いします。

電光掲示板をあのmarqueeとCSS3のグラデーションで

元ネタ

これおもしろいなーと思って、でもすごい重くて・・・wよくよく考えたらみんな大好きmarqueeタグとCSS3のlinear-gradient使えばできるよねとか思ってやったらめっちゃ簡単だった。iPhoneとかでも見れるよ。IEはしらん

↓ サンプル

HTML

HTMLは超絶シンプル

【横須賀線 遅延】

CSS

CSSはほぼlinear-gradient。背景にlinear-gradientで格子状になるよう縦横敷き詰めた擬似要素をmarqueeの上にwidth, height広げて被せる形で

marquee {
  position: relative;
  color: #ffab00;
  background-color: #0a0600;
  font-size: 40px;
}
marquee:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(#0a0600 1px, transparent 0px),
    linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px),
    -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -moz-linear-gradient(#0a0600 1px, transparent 0px),
    -moz-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -o-linear-gradient(#0a0600 1px, transparent 0px),
    -o-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -ms-linear-gradient(#0a0600 1px, transparent 0px),
    -ms-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-size: 2px 2px, 2px 2px;
  z-index: 10;
}

IEでも見たかったら:afterやめてdivかなんかにして、linear-gradientも背景画像repeatでできるよね。:afterはやめなくてもいいけど

ところでCSS3 marqueeがなんとなくあるけど、OperaとWebkitだけだし、書き方面倒くさそうだからやめた

jsdo.itにforkしたやつ置いたのでよければ Fork me on jsdo.it

forked: HTML5のCanvasとJSで電光掲示板 – jsdo.it – share JavaScript, HTML5 and CSS

追記:なんかやっぱり一部環境で重くなるときがあるらしい

Author

nori
nori
- UI Engineer
Location
- ,