Open3

CSSに関するメモ（適宜更新）

やましたやました

Tailwindcssのrounded-fullクラスの値がborder-radius: 9999px;だったのがよく分からず調べてみた。
border-radius: 50%;じゃだめなのか？という疑問。

参考になったのは以下の記事。

border-radius: 9999px does produce 'perfect 1/4 circle' corners
border-radius: 50% will, on the other hand, produce non-circular arcs if your div is not square

ということ。
なるほどよく分からん。

実際にやってみた。

border-radius: 50%

border-radius: 9999px;

何となく理解。

やましたやました

SVGで線を使ったアニメーションを作る時に利用するstroke-〇〇系のプロパティの理解に苦しんだのでメモ。
100Days CSS Challenge - day33をやっていて、正直何がどうなってるのか全く分からなかった。

結論

以下の2つのプロパティをうまく組み合わせているだけ。

  • stroke-dasharray：線の間隔を指定
  • stroke-dashoffset：線の位置を指定

内訳

まずはstroke-dashoffsetで線の間隔を指定する。
仮に100pxに指定すると、100pxの線と100pxの隙間が続く破線になる。

で、stroke-dashoffsetで線の開始位置を指定する。
仮にここで10pxと指定すると、10px分、線の開始位置が後ろに下がる。
そのためstroke-dashoffsetと同じ値を指定すると、丁度破線の最初の線が丸っと隠れることになる。

つまり、

  1. stroke-dashoffsetをSVGのpathと全く同じ長さに指定
  2. stroke-dashoffsetを1で指定した長さに指定

こうするとpathが全く見えなくなる。
何故なら「破線の線が見えている部分を丸ごと後ろに下げ、破線の見えない部分だけを表に見せている」から。

この特性を活かしてanimationでstroke-dashoffsetの位置を動かすことで、あたかも線引かれていくようなアニメーションが作れる。

やましたやました

transform-style: preserve-3dとtransform: perspective()という記述を見かけて理解が及んでいなかったので調べてみた。

とりあえずMDNを見る。

transform-style

要素の子要素を3D空間に配置するのか、平面化して要素の平面に配置するのかを設定します。

これはシンプルに子要素を3D化するものと捉えて良さそう。

指定できる値は以下の2つ。

  • flat：要素の子要素を要素自身の平面上に配置することを示す
  • preserve-3d：要素の子要素を3D空間に配置することを示す

perspective()

CSS の perspective() 関数は、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。

なるほどよく分からん。

他でも調べた感じだと「奥行きの深さを指定する関数」と考えて良さそう。
要はperspective(60px)ってやると60pxの奥行きが出る。

ちなみにperspectiveプロパティとは「対象そのものに適用するか否かが異なる模様。

  • perspective：変形させる要素の親要素に指定
  • transform: perspective()：変形させる要素に指定