擬似要素のCSSアニメーションはinheritを使えば有効になる - inkdesign
01 Dec 2012 Joshua Hibbert氏の記事、Don’t Forget the CSS Value ‘inherit’ - Joshua Hibbertでは忘れられがちなinheritによる値の継承について説明している。 inheritを使えば親要素のスタイルの継承ができるが、これは要素とその擬似要素の関係においても、擬似要素が継承させることができる。 で、この記事における本題としては、Bonus transition trickとして紹介されている、inheritを使えば、擬似要素でもCSSアニメーションが有効になるという話のこと。 擬似要素では”基本的に”アニメーションが無効となる Hibbert氏の記事にあるbasic sampleを見てもらうとわかるのだが、右側（赤い方）では擬似要素に大しては継承を使っておらず、そのためアニメーションになっていない。大して一方では擬
CSSでヘッダーを固定した場合のアンカーリンクの位置を調整する - Web.fla
ある案件でトップページからアンカーリンクで別ページに飛ばした時に気づいた。 あれ？ヘッダーに隠れていると。 このサイトはヘッダーを固定させているので、アンカーで飛ばすとコンテンツはヘッダーの下に隠れてしまう。その対処法。 ネガティブマージンを使う。 ヘッダーの高さが100pxだった場合にアンカーリンク先のタイトルなどをpadding-topを100pxに設定すればいいけども、なかなかデザイン上そうもいかない。そういう場合はネガティブマージンでmargin-topを-100pxすると大丈夫っぽい。 a.anchor{ padding-top:100px; margin-top:-100px } ただしこの方法はなぜ上記のように設定すると調整できるのか謎です。おそらくアンカーでリンク先に飛ぶ場合はパッディングの影響は受けるがマージンは受けないようなのでアンカーの飛ぶ位置はパッディングで調整して
Gruntによる継続的なビルド環境を求めて 〜 package.jsonと0.4.0のこと
安定したビルド環境 gruntの広まりを感じる...。みんな...package.jsonをつかうのです...そしてバージョンにも気を遣ってstableな環境を目指すのです....安定して使えないビルド環境はいくらナウくてもゴミです....。 — aho.mu (@ahomu) December 11, 2012 夏前に、nodeでビルドってなんかナウい(∩´∀｀)∩ワーイって使い始めて、秋から現職のプロジェクトで実践してみた結果、そんな当たり前な視点を忘れないようにしなければ、と強く思った次第。 今回は下記の2点を紹介します。 Gruntと永く付き合うためのノウハウとして、package.jsonを使った管理について 賞味期限の短いノウハウとして、Grunt 0.4.0への移行に関して Gruntイイヨーの続きとして、今後付き合っていくために必要なことを改めておさらい。 1. packa
CSSプリプロセッサのfunctionを拡張してみた (CSS Preprocessor Advent Calendar 8th day)
CSS Preprocessor Advent Calendar 2012の8日目でございます。飛び道具的な好奇心に基づき、functionの拡張について調べてみた次第。 今回は、下記の2つの関数をサンプルとして扱います。どちらも実用的なものではありませんが、あくまでサンプルということで、、、。 reverse - 与えられた文字列を逆順に並べ直して返す randomColor - ランダムなカラーの16進数を返す Sass編 Sass - Syntactically Awesome Stylesheets Module: Sass::Script::FunctionsにあるAdding Custom Functionsを参考にします。じつは、LESSとStylusは使ってたんですが、Sassって使ったことないんですよね...。 sass_add_func.rb Sass::Script:
Backbone.jsを使うときに参考になるリソース 2012年末版 (Backbone Advent Calendar 2012 25th day)
Backboneを使うときの参考情報たち Advent Calendarがネタ切れの折、最終日が冴えない小ネタで終わるよりはマシかということでリストアップしてみた。 日本語リソース では早速、日本語のリソースから。古い情報はリストから外しているので、いくらか偏りがあるかも。悪しからず。 ビギナー向けにまとまったの CodeGrid - フロントエンドに関わる人々のガイド Backbone.js Advent Calendar 2011 - Qiita CodeGridで連載中のBackbone入門が、ちょうどリアルタイムに更新されているビギナー向け情報でおすすめ。ただし有料。去年のAdvent Calendarも丁寧でおすすめ。 enja-oss/Backbone · GitHub JavaScript MVCフレームワーク Backbone.jsのコメント付きソースコード日本語訳が公開
ST2: Sublime Text 2 Packages for Web Developers.
Recommended Sublime Text 2 Packages for Web Developers. Update 「Browser Support」を追加しました。 2013 Spring & Summer こもりが使っているモノやそうでないものも含め、なんとなくWebデザイナーやWebデベロッパーな人たちに便利そうなのを集めてみました。 ここに挙げたものは、類似のパッケージがあるものも存在するので、Package Controlや「Sublime Text Packages by the Community」などでキーワードで検索してみると良いでしょう。 LESS/Sass/SCSSなどCSSプリプロセッサの自動ビルド系パッケージは、あらかじめそれぞれの実行ファイルのインストールが必要、かつコンパイル先やコマンドの位置を設定ファイルに書く必要があります。 ※入れすぎると起動時
プログラミング言語のバージョン管理ツールまとめ | Kitchen Garden Blog
“clear to find” プログラミング言語のバージョン問題 MacやLinux/Unixで開発する際、php/ruby/python/perlといった数あるプログラミング言語のバージョン管理に悩まされることがしばしばあります。 開発をする上で、システム標準のものではなく、最新あるいは古いバージョンが必要になるような、単一バージョンではままならない状況が往々にして起こり得ます。 しかしそのような別バージョンが必要となる場合、次のような事項が気になってきます。 /bin等のシステムへの直接変更はなるべく避けたい（OS標準のものをアプデするとか悲鳴モノ…） /usr/localや/opt以下に/binや/libを二次展開したい（インストールにsudoとか正直勘弁） $HOME以下への展開も悪くはない 複数バージョンを管理する こういう時に便利なのがバージョン（インストール）管理ツールです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://jedisthlm.com/2006/03/16/manfred-a-pngquant-gui/