RSS

CSS

CSSで行を塗りでアニメーションさせた後テキスト表示

キャッチコピーなどのテキストの行をbackground-colorの塗りをアニメーションさせたあと表示するような表現を試してみました。

アニメーションはCSSのみ。キーフレームを使って書いてます。

アニメーションが適用される部分のHTML(抜粋)です。

<div><span class="one anim">Interface Architects</span></div>

アニメーションのCSSは以下。

.anim{
animation-name: loadin;
animation-duration: 0.4s;
animation-timing-function:ease-in-out;
animation-delay:0.5s;
animation-iteration-count:1;
animation-fill-mode:forwards;
background-clip: content-box;
}

@keyframes loadin {
0% {
color:#000;
width: 1px;
background-color:#000;
opecity:0;
overflow: hidden;
}
10%{
color:#000;
width:1px;
background-color:#000;
opacity:1;
overflow: hidden;
}
50%{
color:#000;
width:180px;
background-color:#000;
opacity:1;
}
80%{
color:#000;
width:180px;
background-color:#000;
opacity:1;
}
100% {
color:#000;
width: 180px;
background-color:tranparent;
opacity:inherit;
}
}

アニメーションが適用される部分の初期状態のCSSです。
.oneというクラスを以下のように書きます。

.one{
position:absolute;
left:100;
top:100;
display;block;
width:1px;
opacity:0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background-clip: content-box;
}

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

「text-overflow: ellipsis;」は、テキスト幅よりボックス要素が小さい時に、入りきらない分を省略してくれるプロパティです。これを書かなかった場合、アニメーションする途中のテキスト幅よりブロック要素の幅が小さい時、行が折り返して表示されてしまいます。

.animというクラスにアニメーションの動きを書きます。

animation-name: (アニメーション名);
animation-duration: 0.4s;(例は0.4秒)
animation-timing-function:ease-in-out;(イージングの設定。例は最初と最後にイージング)
animation-delay:0.5s;(アニメーション開始までの時間、0.5秒)
animation-iteration-count:1;(アニメーションの再生回数)
animation-fill-mode:forwards;(順送りに再生)

こんな感じです。

次にキーフレームがこちら。

@keyframes (アニメーション名) {
0% {
color:#000;
width: 1px;
background-color:#000;
opecity:0;
overflow: hidden;
}
(初期状態)

10%{
color:#000;
width:1px;
background-color:#000;
opacity:1;
overflow: hidden;
}
(全体の10%)

50%{
color:#000;
width:180px;
background-color:#000;
opacity:1;
}
(50〜80&。幅をテキストの長さまで伸ばす)

80%{
color:#000;
width:180px;
background-color:#000;
opacity:1;
}
100% {
color:#000;
width: 180px;
background-color:tranparent;
opacity:inherit;
}
(背景を黒から透明にし、アニメーション終了)
}

こういう感じです。
少し面倒にも感じるキーフレームですが、アニメーションのタイミングを細かく設定できます。
単純な動きであれば、以下のように「from」「to」で書けます。

@keyframes (name) {
from {
width: 0%;
}
to {
width: 100%;
}
}

デモはこちらから

widthですが、autoでうまく動くと汎用性が高いのですが、今のところ幅を指定してあげないとアニメーションしてくれません…今後の課題とします。

テーブルで組まれたフォームをレスポンシブ対応に

フォームページはまだテーブルで組まれたものも多いです。
レスポンシブ対応にする際に、縦に並べたいのですが、さてどうしようと考えていたのですが、


table th,
table td,
table tr {
display:block;
}

ひとまず、これでなんとかなりました。あとは微調整してやればいけました…。
小ネタですが、フォームまわりはまだまだテーブルレイアウトで作られたものもあるので、めんどくさいときはこれで対応しています。

覚書:Webの文字にオートカーニング

ブラウザでのオートカーニングについては、データベースが飛ぶ前、ここで随分前に触れましたし、すでに十分浸透していることなのですが、一応覚書として。

OpenTypeフォントには「プロポーショナルメトリクス」という、カーニング情報が埋め込まれています。
Webフォントもこうしたカーニング情報を持っているものが増えており、CSSプロパティで利用できます。

section{
font-feature-settings : "palt" 1;
}

こう書くと、オートカーニングが効いて表示されます。
ほとんどのWebフォントも対応し、今はもう必須ともいえるプロパティだと思います。

縦書きでの崩れを調整する

明朝系フォントを使って縦書きをしたときのことなのですが、以下のようなことになってしまいました。

これはあんまりです。なぜこんなことになるのか説明します。
横書きのテキストを縦に流れるようにCSSを書くだけなのですが、ベースラインの位置が調整されず、左起点になったままなので、キャラクタ幅の違う文字の右側がガタガタになってしまっています。
これを解消するには、「vertical-align」を適用し、左のベースラインからの位置を調整するしかありません。

日本語のDTPソフトやIllustratorで縦書きをやってみるとわかるのですが、日本語縦書きのベースラインは中央になっています。ですので、幅の違うキャラクタも、真ん中で綺麗に揃っていますが、そもそも横書き欧文文化のものであるHTML/CSSには、「ベースラインが中央にある」といういう概念が存在しません。これはベースラインをコントロールするCSSプロパティがあれば、おそらくあっさり解消します。そうしたプロパティが勧告されるのを期待して待つかないのでしょうか。
ちなみに本文中もこうした崩れは顕著なのですが、どうしても気になるところだけ調整して、ある程度は諦めています。とにかく、の乱用で本文が認識されなくなるのは避けたいところですが、上記のような崩れは、おそらくクライアントチェックでも「ここどうにかして」という戻しが来るレベルですので、対処法を書いておきました。

追記:
縦書きですが、Safariがどうもがいまいちのようで、上記の数値ですと、逆にレイアウトが崩れます。ここに書いた数値よりも、CSSの値をさらに小さくし、最小限の調整で対応するしかなさそうです。こうした場合、大抵問題が起こるのはIE11/Edgeなのですが…

Windows/EdgeでWebフォントのジャギーを軽減する

偶然調べ物をしていて見つけた方法です。

Windows/Edgeでかなりジャギーが目立つのをなんとかできないかと考え込んでいましたが、以下の方法でかなり軽減することができます。

transform: rotate(0.05deg);

2D Transformでほんの少しだけ回転させると、急にレンダリングが綺麗になります。
A1明朝でテストしております。

適用前

適用後

ただし、HTMLの文書構造にどう影響を与えるのか、まだわからないので、少し慎重に導入してみたほうがよいと思います。

1 2