FlexならCSSだけで順序入れ替え
基本HTMLで書かれたものは左上から右下に掲載され逆転するのは難しかった。
CSS3のFlex（フレキシブルボックスレイアウト）を使うと簡単に順番が変えられるようになった。
Flexはテーブルレイアウトかあらfloatの時代を経て現れた新しいレイアウト方式で古いパソコンやスマホは未対応だったりしますが、IE8-9にも対応させるflexibility.jsも現れ期待がもてます。
(さらに…)
Tagged ‘css3’
サインポール風アニメーションjQueryプラグイン
首相が通ってる美容室の発言に端を発してQBハウスの社長が規制改革に動いてるらしい散髪屋さんですが昔から赤・白・青のサインポールが定番になっています。
デザインの梅干によるとトリコロールのサインポールは日本だけで無く世界的に使われてるようです。
そこでサインポールの動きをCSSのグラデーションとトランスレーションで再現してみました。
4本のサインポールの動きサンプル
(さらに…)
HTML・CSSで刀で斬るようなアニメーション
最近LIGのブログを見る機会が多くなった。LIGは面白法人カヤックやバーグハンバーグバーグの流れを汲んだキワモノ系の制作会社で、そのLIGのブログが技術系の記事が増えてきたので毎日読んでる。昨日も刀でズバッと斬るようなアニメーションをHTML・CSS・JS（jQuery）で実装する方法 | 株式会社LIGを読んで「さすがLIG、このタイミングで首をはねるアニメーションを作るとは・・・」とも思ったが俺も作ってみた。
(さらに…)
CSSだけで角をカット
画像を使わずCSSだけで角が欠けた表現をする方法がBeveled corners & negative border-radius with CSS3 gradients | Lea Verouに書かれていた。角丸の表現も飽きてきてたので新鮮だったが、CSSの量が多く（ベンタープレフィックスの為だけど・・・）面倒なのでジェネレーターを作ってみた。
「Css3 Corner Cutter」
この角が欠けた表現をする仕組みは背景を4分割してそれぞれの角に透明から急に色が付くグラデーションを塗って角が欠けた表現をしているので、背景もうまく透過している。
ただ、元のCSSだときれいに4等分（縦横50％）しすぎで要素の幅や高さが奇数の場合に隙間があいてしまっていたので、ジェネレーターでは縦横51％にして少しかぶせて隙間が現れ無いようにしています。