Tagged ‘css3’

FlexならCSSだけで順序入れ替え

基本HTMLで書かれたものは左上から右下に掲載され逆転するのは難しかった。
CSS3のFlex(フレキシブルボックスレイアウト)を使うと簡単に順番が変えられるようになった。
Flexはテーブルレイアウトかあらfloatの時代を経て現れた新しいレイアウト方式で古いパソコンやスマホは未対応だったりしますが、IE8-9にも対応させるflexibility.jsも現れ期待がもてます。
(さらに…)

サインポール風アニメーションjQueryプラグイン

バーバーサインポールの動きを再現する 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%にして少しかぶせて隙間が現れ無いようにしています。