css3 | ウダ2Blog

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

uda2 — Thu, 04 Aug 2016 02:00:50 +0000

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

本題の順序を変更するCSSですが、今回はPC版だとHTMLの順番で表示されるが、スマホだと3番目の項目が一番上に移動するようなサンプルを作成した。
Flex順序サンプル

簡単に解説すると、まず親要素（flexコンテナ）に
display: flex;
と入れフレキシブルボックスレイアウト化し、合わせて表示方向を上から下になるように指定し下記も入れて置く
flex-direction: column;
スマホの場合は特定の子要素（Flexアイテム）に
order: -1;
と記述し最初に持ってきている。

The post FlexならCSSだけで順序入れ替え first appeared on ウダ2Blog.

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

uda2 — Tue, 14 Apr 2015 12:25:15 +0000

首相が通ってる美容室の発言に端を発してQBハウスの社長が規制改革に動いてるらしい散髪屋さんですが昔から赤・白・青のサインポールが定番になっています。
デザインの梅干によるとトリコロールのサインポールは日本だけで無く世界的に使われてるようです。

そこでサインポールの動きをCSSのグラデーションとトランスレーションで再現してみました。
4本のサインポールの動きサンプル

仕組みは正方形のオブジェクトを入れ、それにCSSのlinear-gradientで斜めのストライプを作って、それをtransformでアニメーションしています。

今回はjQueryプラグイン化し、久々にGithubにアップしました。
uda2/barbersignpole
グラデーションの模様は好きなデザインに指定できます。値は色とパーセントです。
方向はvectに数値を入力することで設定します。テンキーを基準に7が左上、9が右上、3が右下、1が左下になります。
speedは一連のアニメーションの時間（秒）です。

まず、グラデーションですが普通に色を並べるとストライプにならないので色を指定すると次の色を0.005％後に指定する事でグラデーションを抑止しストライプにしています。
アニメーションはCSSのグラデーションは背景画像なのでシンプルに背景画像位置（background-position）をいじっても再現できるのですが重いので、正方形のオブジェクトを追加してそれをtransformで移動しています。
一見冗長に見えますがタスクマネージャー読みで3倍ぐらい高速になります。

※現時点のGoogleChromeは斜めのグラデーションが汚く細かい線が再現されないです。

The post サインポール風アニメーションjQueryプラグイン first appeared on ウダ2Blog.

HTML・CSSで刀で斬るようなアニメーション

uda2 — Fri, 06 Feb 2015 14:59:41 +0000

最近LIGのブログを見る機会が多くなった。LIGは面白法人カヤックやバーグハンバーグバーグの流れを汲んだキワモノ系の制作会社で、そのLIGのブログが技術系の記事が増えてきたので毎日読んでる。昨日も刀でズバッと斬るようなアニメーションをHTML・CSS・JS（jQuery）で実装する方法 | 株式会社LIGを読んで「さすがLIG、このタイミングで首をはねるアニメーションを作るとは・・・」とも思ったが俺も作ってみた。

まずLIG版はPhotoShopで加工して3枚の画像を作ってたが、こっちはclip-path（CSS）を使って切り抜くことにした（clip-pathはIEが未対応なので実務的には使う機会が少ない）、clip-pathを使ってブラウザ上で切り抜いてるのでどっからでも引っ張ってこれる。画像は倫理的な問題からamazonのリンゴ画像にした。
ちなみにLIG版はアニメーション終わりのイベント取得にwebkitAnimationEndしか使って無いためwebkit系でしか動かないけど「animationend webkitAnimationEnd oAnimationEnd」な感じで入れたらFirefoxや旧operaでも動くようになる。

clip-pathは先月の工夫のあるUIがいい！CSSで円・楕円・多角形などのクリップパスが簡単に作成できるオンラインサービス -Clippy | コリスで知ってから気にはなっていたが、firefoxが動かなかったので、まだまだ未来の技術だと思ってスルーしていたが、今回改めて調べるとclip-pathで指定するクリップパスはwebkit用の「CSSの直書き」とfirefox用の「SVG内部参照」「SVG外部参照」の3パターンの設定方法があるが、Clippyがwebkitにしか対応していないだけで、自前でSVGを用意してやると切り抜ける事が分った。（それでもIEは未対応だが）
LIGの人も書いてるが斜めに切り取った画像を並べると微妙に隙間が空く。そこで、あえて隙間を空けて斬る前のシーンの為に後ろに切り取ってない画像を用意した。その画像をずらして斬った風な感じを出してる。

LIG版は上下が切り離されてる感じになってたが、板を切った様に上部が崩れ落ちる風のアニメーションにした。
あと、LIG版はjQueryでアニメーションの開始終了を制御してるが、ごてごてするのでanimationのディレイで誤魔化した。

CSS

@keyframes slashSord {
  0%   {transform: translate3d(0,0,0);}
  100% {transform: translate3d(-640px,0,0);}
}

@keyframes slashUp{
  0%   {transform: translate3d(0,0,0) rotate(0deg);}
  70%  {transform: translate3d(-32px,24px,0) rotate(0deg);}
  75%  {transform: translate3d(-32px,24px,0) rotate(0deg);}
  100% {transform: translate3d(64px,540px,0) rotate(-80deg);}
}
@-webkit-keyframes slashSord {
  0%   {-webkit-transform: translate3d(0,0,0);}
  100% {-webkit-transform: translate3d(-640px,0,0);}
}

@-webkit-keyframes slashUp{
  0%   {-webkit-transform: translate3d(0,0,0) rotate(0deg);}
  70%  {-webkit-transform: translate3d(-32px,24px,0) rotate(0deg);}
  75%  {-webkit-transform: translate3d(-32px,24px,0) rotate(0deg);}
  100% {-webkit-transform: translate3d(64px,540px,0) rotate(-80deg);}
}

.zan img {
  position:absolute;
  top:0;
  left:0;
}
.zan img.ue {
  -webkit-clip-path: polygon(0 479px,639px 0,0 0);
  clip-path: url("#clipPolygon7");
  -webkit-animation: slashUp 3.5s ease 2s both;
  animation: slashUp 3.5s ease 2s both;
}
.zan img.all {
  -webkit-animation: slashSord 0.25s ease 1.5s both;
  animation: slashSord 0.25s ease 1.5s both;
}
.zan img.shita {
  -webkit-clip-path: polygon(0 480px,640px 0,640px 480px);
  clip-path: url("#clipPolygon3");
}

.zan {
  position:relative;
  margin:90px auto;
  width:640px;
  height:480px;
  overflow:hidden;
}

HTML

できたアニメーションが「リンゴを斬る！」

The post HTML・CSSで刀で斬るようなアニメーション first appeared on ウダ2Blog.

CSSだけで角をカット

uda2 — Sat, 04 Feb 2012 08:49:26 +0000

画像を使わずCSSだけで角が欠けた表現をする方法がBeveled corners & negative border-radius with CSS3 gradients | Lea Verouに書かれていた。角丸の表現も飽きてきてたので新鮮だったが、CSSの量が多く（ベンタープレフィックスの為だけど・・・）面倒なのでジェネレーターを作ってみた。
「Css3 Corner Cutter」

この角が欠けた表現をする仕組みは背景を4分割してそれぞれの角に透明から急に色が付くグラデーションを塗って角が欠けた表現をしているので、背景もうまく透過している。
ただ、元のCSSだときれいに4等分（縦横50％）しすぎで要素の幅や高さが奇数の場合に隙間があいてしまっていたので、ジェネレーターでは縦横51％にして少しかぶせて隙間が現れ無いようにしています。

The post CSSだけで角をカット first appeared on ウダ2Blog.