30 Seconds of CSS日本語訳⑥

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第6回目です。

前回:30 Seconds of CSS日本語訳⑤

21.高さの値の変化 – Height transition

22.ホバー時の下線アニメーション – Hover underline animation

23.最後尾のアイテムに残りの高さを取らせる – Last item with remaining available height

24.カーソルに付いてくるグラデーション – Mouse cursor gradient tracking

21.高さの値の変化 – Height transition

https://30-seconds.github.io/30-seconds-of-css/#height-transition

※JavaScriptが必要

要素の高さが分からない時に、要素の高さを0からautoに変化させるトランジションを作ろう。

<<説明>>

CSS

  1. transition: max-height: 0.5s cubic-bezier(…)で、要素のmax-heightになるまで0.5秒掛かり、ease-out-quintの動きをするイージングを持ったトランジションを指定する。
    (訳者:デモにはcubic-bezier(…)使われてないですよね、謎…)
  2. overflow: hiddenでコンテンツ内の非表示になっている要素がコンテナからはみ出るのを防ぎます。
  3. max-height: 0の指定によって初期状態の要素の高さを0にします。
  4. .target:hover > .elという形で指定することで、親要素の.targetがホバー状態になった時に、その中にある.elクラスにJavaScriptで定義した変数–max-heightが適用されます。
    (訳者注:.targetはデモ中では.triggerというクラス名です。)

JavaScript

  1. el.scrollHeightではみ出る分も含めた、中身の量に従って更新される要素の高さを取得します。
  2. el.style.setProperty(…)で.targetクラスがホバー状態になった時に.elクラスのmax-heightの値にCSS変数の–max-heightを設定し、0からautoまでのスムーズなトランジションを起こします。

アニメーションのコマごとに発生するreflow(JavaScriptの要素の表示位置などの取得)が原因で、要素の下に隠された、高さの変化に影響を与える要素の量が膨大な場合には動きのガク付きが起きるでしょう。

22.ホバー時の下線アニメーション – Hover underline animation

https://30-seconds.github.io/30-seconds-of-css/#hover-underline-animation

テキストがホバー状態になった時に効果的に動く下線を作ろう。

出展: https://flatuicolors.com/

<<説明>>

  1. display: inline-blockは<p>タグをblock要素からinline-block要素に変え、要素のアンダーラインがその親要素の幅全部ではなく、コンテンツとなる文章の下にのみ広がるようにします。
  2. position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。
  3. ::afterによって疑似要素を定義します。
  4. position: absoluteを指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。
  5. width: 100%の指定で疑似要素はその本体のテキスト入り要素いっぱいの横幅を確保します。
  6. transform: scaleX(0)で最初は疑似要素の大きさを0にして、幅の無い見えない状態にしておきます。
  7. bottom: 0とleft: 0は疑似要素を本体要素の左下に配置させます。
  8. transition: transform 0.25s ease-outは、transformプロパティが0.25秒かけてease-outのイージングで変化することを意味しています。
  9. transform-origin: bottom rightは、 transformプロパティの変化の基準点が本体要素の右下に位置していていることを示します。
  10. :hover::afterで本体要素にホバーした時、疑似要素はscaleX(1)の指定で幅が100%になり、transform-originの値がbottom leftに変わることで変化の基準点が逆転します。それによりホバーが解除された時の変化の戻り方が逆方向になります。

23.最後尾のアイテムに残りの高さを取らせる – Last item with remaining available height

https://30-seconds.github.io/30-seconds-of-css/#last-item-with-remaining-available-height

親要素内の最後尾の子要素に、ウィンドウのサイズと一緒に変化する表示域の中でまだ残されたスペースを与えてビューポートの利用可能域を有効活用しよう。

<<説明>>

  1. height: 100%でコンテナにビューポート(画面表示域)と同じ高さを与えます。
  2. display: flexでフレックスボックスを作ります。
  3. flex-direction: columnでフレックスアイテムの並び順を上から下への縦方向に変えます。
  4. flex-grow: 1の指定でフレックスボックスはコンテナの中の残ったスペースを最後尾の要素に割り当てるでしょう。

親要素は必ずビューポートと同じ高さを取らなければなりません。またflex-grow: 1は1番目の要素にも2番目の要素にも同じように適用して、利用可能な限りのスペースを割り当てるでしょう。

24.カーソルに付いてくるグラデーション – Mouse cursor gradient tracking

https://30-seconds.github.io/30-seconds-of-css/#mouse-cursor-gradient-tracking

※JavaScriptが必要

マウスカーソルが乗ったところに反応するグラデーションのホバー効果

出展: Tobias Reich

<<説明>>

TODO(訳者:ってなんですかね?とにかくサンプル見てやれって感じ?)

 


今日は昨日に引き続き窪塚洋介主演の「狂気の桜」を見ました。

ヤクザモノが結構好きなのでストーリー的にもビジュアル的にも全く退屈しなかったのですが、やっぱ改造白ラン潔癖ナイーブ過激派ヤクザの窪塚萌え映画という感じもしました。

役じゃない本人の性格とかよく知らないですけど、あの頃の窪塚って日本で一番eminemに似てますよね。

コメントを残す

メールアドレスが公開されることはありません。