CSShakeを使ってemojiでこんなことして遊んでた
🐝にCSShakeのクラスをつけてブンブンさせている
bee1.gif (50.0 kB)

でもおなじ高さにお花と蜂がいるからちょっと不自然に見える。これを適度に高低差をつけて🐝がお花🌷🌹🌻🌺🌼から蜜を吸っているように見せたい・・・!

上付き文字と下付き文字で高低差をつける

最初は、上付き文字と下付き文字で差をつけてみた。

.flowers {
  vertical-align: sub;
}
.bee {
  vertical-align: super;
}

スクリーンショット 2016-10-15 0.10.49.png (36.4 kB)

見た目は大変いい感じだけど行間に影響している scream
1行目と2行目のあいだより、2行目と3行目の間のほうがひらいていて、ちょっと気持ち悪い・・・

他のプロパティ値を指定してみる

vertical-align に上付き文字と下付き文字以外のプロパティを指定してみる

.flowers {
  vertical-align: baseline;
}
.bee {
  vertical-align: text-bottom;
}

スクリーンショット 2016-10-15 0.23.04.png (36.7 kB)

・・・一緒やん!?

ググる

備忘録 - 上付き文字と行間
リンク先を参考にした書き方。

.flowers {
  vertical-align: baseline;
}
.bee {
  vertical-align: baseline;
  position: relative;
  top: -0.5rem;
}

vartical-align: baseline; はベースラインに合わせる。
position: relative;は 相対的な位置で、標準で表示される位置。
topposition できめた位置からの上からの位置。リンク先では-1ex と指定されてた。exは x (小文字のx)を基準とした単位。私はだいたいremを使っているのでremと指定した

スクリーンショット 2016-10-15 0.24.08.png (36.7 kB)

いい感じいい感じ!!

そして・・・

bee.gif (119.2 kB)

1行目と2行目、2行目と3行目の行間を変えずにお花と蜂の高さを変更できた!

感想

大満足!!!! grin sparkles


ちなみにIEでみてみたらこんなかんじ。レトロ
win.gif (403.3 kB)