30 Seconds of CSS日本語訳１３～２４ #CSS

前回：30 Seconds of CSS日本語訳１～１２
に引き続き、CSSお役立ち小ネタ集

の翻訳をしていきます。
なお、ビジュアルで分かりやすいものはデモのスクショを載せてますが、コードサンプルやデモは転載していませんので元サイトの方でご確認ください。

この記事はブログで4個づつ翻訳したものをまとめたものになります。
この先はQiitaの前にブログで公開しているのでよろしくお願いします。
TAMAのWEBデザイン勉強ノート+雑感

目次
１３．活き活きした影 - Dynamic shadow
１４．イージングの変数 - Easing variables
１５．刻まれた文字 - Etched text
１６．均等に配置された子要素 - Evenly distributed children
１７．フレックスボックス内の中央配置 - Flexbox centering
１８．テキストグラデーション - Gradient text
１９．グリッド要素内の中央配置 - Grid centering
２０．髪の毛様に細いボーダー - Hairline border
２１．高さの値の変化 - Height transition
２２．ホバー時の下線アニメーション - Hover underline animation
２３．最後尾のアイテムに残りの高さを取らせる - Last item with remaining available height
２４．カーソルに付いてくるグラデーション - Mouse cursor gradient tracking

１３．活き活きした影 - Dynamic shadow

https://30-seconds.github.io/30-seconds-of-css/#dynamic-shadow

box-shadowに似た効果だけど、その要素自体のカラーリングに基づいている影を作ろう。

<<説明>>

position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。

z-index: 1は要素に新しく「層」の位置関係を与えます。

::afterによって疑似要素を定義します。

position: absoluteを指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。

width: 100%とheight: 100%で疑似要素をその親要素の面積いっぱいにし、同じサイズにします。

background: inheritによって疑似要素は親要素に指定されたlinear gradientを自分の要素として引き継ぎます。

top: 0.5remで疑似要素をわずかに下にズラします。

filter: blur(0.4rem)の指定で疑似要素をぼかすことで、物の下に出来た影っぽい印象を作ります。

opacity: 0.7で疑似要素は半透明になります。

z-index: -1の指定によって、疑似要素は親要素の後ろかつ背景の手前に位置されます。

⚠ブラウザへのフルサポートには各プレフィクスが必要です。

１４．イージングの変数 - Easing variables

https://30-seconds.github.io/30-seconds-of-css/#easing-variables

transition-timing-functionプロパティの中で使われる変数は、既存の設定値であるease, ease-in, ease-out ,ease-in-outよりも幅広く強力です。

<<説明>>

:root疑似クラス内に定義された変数は、ドキュメントを構成する樹状に連なる要素の根っこ(root)の要素に適用されるため、グロバーバル変数として機能します。HTMLの中で:rootは<html>タグを表し、:rootの方が詳細度が高いこと以外はまったくhtmlセレクタと同一です。

１５．刻まれた文字 - Etched text

https://30-seconds.github.io/30-seconds-of-css/#etched-text

<<説明>>

text-shadow: 0 2px whiteで要素の文字位置から横に0px、縦に2pxズレた白い影を作ります。

効果を出すためには背景は白い影より暗い色である必要があります。

背景に刻み込まれた、あるいは掘られたみたいに見える様に、テキスト色はわずかに彩度の低い暗色にしましょう。

１６．均等に配置された子要素 - Evenly distributed children

https://30-seconds.github.io/30-seconds-of-css/#evenly-distributed-children

子要素を親要素の中に均等に配置しよう。

<<説明>>

display: flexでフレックスボックスを作ります。

justify-content: space-betweenに指定することで子要素は横方向に均等配置されます。最初のアイテムは左端に位置され、最後のアイテムは右端に位置されます。

あるいは、justify-content: space-aroundを使うと子要素はspace-betweenよりも周囲にスペースを持って配置されます。

⚠ブラウザへのフルサポートには各プレフィクスが必要です。

１７．フレックスボックス内の中央配置 - Flexbox centering

https://30-seconds.github.io/30-seconds-of-css/#flexbox-centering

flexboxを使った親要素の中で子要素を縦・横両方に中央配置しよう。

<<説明>>

display: flexでフレックスボックスを作ります。

justify-content: centerで水平方向に子要素を中央配置します。

align-items: centerで垂直方向に子要素を中央配置します。

⚠ブラウザへのフルサポートには各プレフィクスが必要です。

１８．テキストグラデーション - Gradient text

https://30-seconds.github.io/30-seconds-of-css/#gradient-text

テキストにグラデーションカラーを適用しよう。

<<説明>>

background: -webkit-linear-gradient(...)でテキストを含む要素の背景にグラデーションを掛けます。

webkit-text-fill-color: transparentはそのテキストの色を透明色で塗りつぶします。

webkit-background-clip: textで背景を文字の形に切り抜き、その結果テキストは背景のグラデーションで塗りつぶされます。

⚠標準化されていないプロパティを使用しています。(webkit系プラットフォームでのみ使用可)

１９．グリッド要素内の中央配置 - Grid centering

https://30-seconds.github.io/30-seconds-of-css/#grid-centering

gridを使った親要素の中で子要素を縦・横両方に中央配置しよう。

<<説明>>

display: gridでグリッド要素を作ります。

justify-content: centerで水平方向に子要素を中央配置します。

align-items: centerで垂直方向に子要素を中央配置します。

２０．髪の毛の様に細いボーダー - Hairline border

https://30-seconds.github.io/30-seconds-of-css/#hairline-border

とてもシャープでパッキリとした印象を与える、どのデバイスで見ても1px幅のボーダーを要素に付けてみよう。

<<説明>>

box-shadowは4番目の拡大の数値だけ指定した場合、サブピクセル*(1pxを構成する色の粒)を使用できる疑似ボーダーを要素に付与します。

@media (min-resolution: ...)メディアクエリを使って、そのデバイスのデバイス・ピクセル比(1dppxは96 DPIに等しい)を調べ、box-shadowの拡大値を1 / dppxと等しくなるように調整しましょう。

⚠代替手段としてのシンタックスやJavaScriptユーザーエージェントでフルサポートされているかをチェックする必要があります。

*Chromeはborderにサブピクセル値を使うことをサポートしていません。Safariはbox-shadowにサブピクセル値を使うことをサポートしていません。そしてFirefox はその両方をサポートしています。

２１．高さの値の変化 - Height transition

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

※JavaScriptが必要

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

<<説明>>

CSS

transition: max-height: 0.5s cubic-bezier(...)で、要素のmax-heightになるまで0.5秒掛かり、ease-out-quintの動きをするイージングを持ったトランジションを指定する。
(訳者：デモにはcubic-bezier(...)使われてないですよね、謎…)

overflow: hiddenでコンテンツ内の非表示になっている要素がコンテナからはみ出るのを防ぎます。

max-height: 0の指定によって初期状態の要素の高さを0にします。

.target:hover > .elという形で指定することで、親要素の.targetがホバー状態になった時に、その中にある.elクラスにJavaScriptで定義した変数--max-heightが適用されます。
(訳者注：.targetはデモ中では.triggerというクラス名です。)

JavaScript

el.scrollHeightではみ出る分も含めた、中身の量に従って更新される要素の高さを取得します。

el.style.setProperty(...)で.targetクラスがホバー状態になった時に.elクラスのmax-heightの値にCSS変数の--max-heightを設定し、0からautoまでのスムーズなトランジションを起こします。

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

２２．ホバー時の下線アニメーション - Hover underline animation

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

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

出展: https://flatuicolors.com/

<<説明>>

display: inline-blockは<p>タグをblock要素からinline-block要素に変え、要素のアンダーラインがその親要素の幅全部ではなく、コンテンツとなる文章の下にのみ広がるようにします。

position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。

::afterによって疑似要素を定義します。

position: absoluteを指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。

width: 100%の指定で疑似要素はその本体のテキスト入り要素いっぱいの横幅を確保します。

transform: scaleX(0)で最初は疑似要素の大きさを0にして、幅の無い見えない状態にしておきます。

bottom: 0とleft: 0は疑似要素を本体要素の左下に配置させます。

transition: transform 0.25s ease-outは、transformプロパティが0.25秒かけてease-outのイージングで変化することを意味しています。

transform-origin: bottom rightは、 transformプロパティの変化の基準点が本体要素の右下に位置していていることを示します。

:hover::afterで本体要素にホバーした時、疑似要素はscaleX(1)の指定で幅が100％になり、transform-originの値がbottom leftに変わることで変化の基準点が逆転します。それによりホバーが解除された時の変化の戻り方が逆方向になります。

２３．最後尾のアイテムに残りの高さを取らせる - Last item with remaining available height

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

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

<<説明>>

height: 100%でコンテナにビューポート(画面表示域)と同じ高さを与えます。

display: flexでフレックスボックスを作ります。

flex-direction: columnでフレックスアイテムの並び順を上から下への縦方向に変えます。

flex-grow: 1の指定でフレックスボックスはコンテナの中の残ったスペースを最後尾の要素に割り当てるでしょう。

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

２４．カーソルに付いてくるグラデーション - Mouse cursor gradient tracking

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

※JavaScriptが必要

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

出展： Tobias Reich

<<説明>>

TODO(訳者：後で追記します…という意味ですよね？)