CSSを使用して3DでDigitalOceanロゴを作成します

ハウディY'all！あなたが岩の下に住んでいない限り（そしておそらくその時でさえ）、あなたは間違いなくCSS-TricksがDigitaloceanに買収されたというニュースを聞いたことがあります。みなさんおめでとうございます！ ？

この機会を記念するためのちょっとしたハーレイとして、私はCSSでDigitalOceanロゴを作成したかったのです。私はそれをしましたが、それからいくつかの3Dと視差でそれをもう少し取りました。これは、ロゴを作った方法が私が書いた以前の記事のさまざまな作品を使用しているため、非常に良い記事にもなります。このクールな小さなデモは、これらの概念の多くを結び付けます。

それでは、すぐに飛び込みましょう！

DigitalOceanロゴの作成

simpleicons.orgからSVGバージョンをつかむことにより、DigitalOceanロゴを「追跡」します。

 <svg role="img" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title> digitalocean </title>
  <path d="M12.04 0C5.408-.02.005 5.37.005 11.992H4.638C0-4.923 4.882-8.731 10.064-6.855A6.95 6.95 0 014.147 4.148C1.889 5.17-1.924 10.84.924 10.84.924 10.064-4.61H7.391V4.623H4.61V24C7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575a12.8 12.8 00012.039 19.362H3.828V3.564H7.39ZM-3.563 0V-2.978H.85V2.978Z "> </path>
</svg>

この3Dを取得していることに注意して、SVGを.scene要素で包むことができます。次に、「高度なCSSイラストのアドバイス」記事からトレーステクニックを使用できます。パグを使用しているので、ミックスインを活用して、3D部品に記述する必要があるマークアップの量を減らすことができます。

 -const size = 40
。シーン
  svg（role = 'img' viewbox = '0 0 24 24' xmlns = 'http：//www.w3.org/2000/svg'）
    タイトルDigitalOcean
    PATH（d = 'M12.04 0C5.408-.02.005 5.37.005 11.992H4.638C0-4.923 4.882-8.731 10.064-6.8555A6.95 6.95 0 014.147 4.148C1.889 5.17-1.924 10.84.924 10.84.924 10.84.924 10.064-4.61H7.391V4.623H4.61V24C7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575a12.8 12.8 00012.039 19.362H3.828V3.564H7.39ZM-3.563 0V-2.978H.85V2.978Z '）
  .logo（style = `--size：$ {size}`）
    .logo__arc.logo__arc  -  inner
    .logo__arc.logo__arc  -  outer
    .logo__square.logo__square  -  one
    .logo__square.logo__square  - ツー
    .logo__square.logo__square-- three

アイデアは、これらの要素をスタイリングして、ロゴが重複するようにすることです。このロゴを3Dで作成し、2つのシリンダー形状のアークを作成できるため、先を考えているため、ロゴの「アーク」部分を作成する必要はありません。つまり、今のところ必要なのは、各シリンダーの要素、内側の弧、および外側アークだけです。

DigitalOceanロゴのさまざまな部分をレイズするこのデモをご覧ください。 「爆発」とホバー要素を切り替えると、ロゴが構成するものができます。

フラットなDigitalOceanロゴが必要な場合は、Conic勾配を備えたCSSマスクを使用できます。その後、固体の境界線を使用する「アーク」要素が1つだけ必要になります。

 .logo__arc  -  outer {
  境界線：calc（var（ -  size） * 0.1925vmin）solid＃006aff;
  マスク：conic勾配（透明性0deg 90deg、＃000 90deg）;
  変換：翻訳（-50％、-50％）回転（180 deg）;
}

それは私たちにロゴを与えます。 「公開」は、その下にトレースされたSVG画像を表示するクリップパスを遷移します。

CSSの高度なイラストを操作するためのヒントについては、「複雑なCSSイラストのアドバイス」記事をご覧ください。

3Dの押し出し

DigitalOceanロゴの青写真があるので、この3Dを作る時が来ました。最初から3Dブロックを作成しなかったのはなぜですか？含有要素を作成すると、押し出しを介して3Dの作成が簡単になります。

私たちは、「ボックスの代わりにキューブで考えていることを学ぶ」記事で、CSSで3Dシーンの作成について説明しました。ここで作っているものには、これらのテクニックのいくつかを使用します。ロゴの正方形から始めましょう。各正方形は立方体です。パグを使用して、すべてのキューボイドミックスを作成して使用して、それらすべてを生成します。

 mixin cuboid（）
  .cuboid（class！= astributes.class）
    ブロックの場合
      ブロック
    -S = 0とします
    s <p>次に、これをマークアップで使用できます。</p><pre rel="Pug" data-line=""> 。シーン
  .logo（style = `--size：$ {size}`）
    .logo__arc.logo__arc  -  inner
    .logo__arc.logo__arc  -  outer
    .logo__square.logo__square  -  one
       cuboid（）。四角いcuboid.square-cuboid  -  one
    .logo__square.logo__square  - ツー
       cuboid（）。square-cuboid.square-cuboid-2
    .logo__square.logo__square-- three
       cuboid（）。四角いcuboid.square-cuboid  -  3

次に、立方体を表示するスタイルが必要です。 Cuboidには6つの側面があるため、VMINの長さユニットを活用して物事を応答し続ける間、nth-of-type（）擬似セレクターを使用してスタイリングしていることに注意してください。

 .cuboid {
  幅：100％;
  高さ：100％;
  位置：相対;
}
.cuboid__side {
  フィルター：明るさ（var（ -  b、1））;
  位置：絶対;
}
.cuboid__side：nth-​​of-type（1）{
  -B：1.1;
  高さ：calc（var（ -  dept、20） * 1vmin）;
  幅：100％;
  上：0;
  変換：翻訳（0、-50％）rotatex（90deg）;
}
.cuboid__side：nth-​​of-type（2）{
  -B：0.9;
  高さ：100％;
  幅：calc（var（ -  dept、20） * 1vmin）;
  トップ：50％;
  右：0;
  変換：翻訳（50％、-50％）rotatey（90deg）;
}
.cuboid__side：nth-​​of-type（3）{
  -B：0.5;
  幅：100％;
  高さ：calc（var（ -  dept、20） * 1vmin）;
  下：0;
  変換：翻訳（0％、50％）rotatex（90deg）;
}
.cuboid__side：nth-​​of-type（4）{
  -B：1;
  高さ：100％;
  幅：calc（var（ -  dept、20） * 1vmin）;
  左：0;
  トップ：50％;
  変換：翻訳（-50％、-50％）rotatey（90deg）;
}
.cuboid__side：nth-​​of-type（5）{
  -B：0.8;
  高さ：100％;
  幅：100％;
  変換：translate3d（0、0、calc（var（ -  dept、20） * 0.5vmin））;
  上：0;
  左：0;
}
.cuboid__side：nth-​​of-type（6）{
  -B：1.2;
  高さ：100％;
  幅：100％;
  変換：translate3d（0、0、calc（var（ -  dept、20） * -0.5vmin））rotatey（180deg）;
  上：0;
  左：0;
}

私たちは、過去の記事でどのように行ったかとは異なる方法でこれに近づいています。高さ、幅、深さを立方体に適用する代わりに、その深さのみに関心があります。そして、両側に着色しようとする代わりに、フィルター：明るさを利用してそれを処理することができます。

フィルターを使用してサイドの子供として立方体または他の3D要素を持っている必要がある場合は、物事をシャッフルする必要があるかもしれません。ろ過された側面は、3D子供を平らにします。

DigitalOceanのロゴには3つの立方体があるため、それぞれにクラスがあり、次のようにスタイリングしています。

 .square-cuboid .cuboid__side {
  背景：HSL（var（ -  hue）、100％、50％）;
}
.square-cuboid-1つ{
  /* 0.1925？それはその正方形の - サイズの割合です */
   - デプス：calc（（var（ -  size） * 0.1925） * var（ -  depth-multiplier））;
}
.square-cuboid-two {
   - デプス：calc（（var（ -  size） * 0.1475） * var（ -  depth-multiplier））;
}
.square-cuboid-- three {
   - デプス：calc（（var（ -  size） * 0.125） * var（ -  depth-multiplier））;
}

…これは私たちにこのようなものを与えます：

深度スライダーで遊んで、必要に応じてキューボイドを押し出ることができます！デモのために、私たちは、等しい高さ、幅、深さの真の立方体を真の立方体にすることを選択しました。アークの深さは、最大の立方体と一致します。

今シリンダー用。アイデアは、Border-Radiusを使用する2つの端を作成することです：50％。次に、シリンダーの側面として多くの要素を使用して効果を作成できます。トリックは、すべての側面を配置することです。

CSSでシリンダーを作成するために実行できるさまざまなアプローチがあります。しかし、私にとって、これが私が何度も使用することを予測できるものであるならば、私はそれを試してみます。それは、ミックスインと他のデモのために再利用できるいくつかのスタイルを作ることを意味します。そして、それらのスタイルは、私が見ることができるシナリオに対応して、ポップアップする必要があります。シリンダーの場合、考慮する可能性のある構成があります。

• 半径
• 側面
• これらの側面の数が表示されています
• シリンダーの片端を表示するかどうか

それをまとめると、それらのニーズに応えるパグミックスを作成できます。

 Mixinシリンダー（半径= 10、側面= 10、Cut = [5、10]、Top = True、Bottom = True）
  -const innerannange =（（（sides -2） * 180） / sides） * 0.5
  -const cosangle = math.cos（internangle *（math.pi / 180））
   -  const side = 2 * radius * math.cos（innerannal *（math.pi / 180）））
  //-カットを使用して、レンダリングされた側面とどのポイントからの側面を決定する
  .cylinder（style = ` -  side：$ {side};  -  sides：$ {sides};  -  radius：$ {radius};` class！= astributes.class）
    トップの場合
      .cylinder__end.cylinder__segment.cylinder__end  -  top
    底の場合
      .cylinder__end.cylinder__segment.cylinder__end  -  bottom
    -const [start、end] = cut
    -I =起動します
    私は<p>//--コードのコメントに加えられている方法をご覧ください。これにより、パグはコメントを無視し、コンパイルされたHTMLマークアップから除外するように指示します。</p><p>なぜ半径をシリンダーに渡す必要があるのですか？まあ、残念ながら、CSS Calc（）で三角法をまだ処理することはできません（ただし、来ています）。そして、シリンダー側の幅や、それらが投影すべき中心からどれだけ離れているかなどのことを解決する必要があります。素晴らしいことは、インラインカスタムプロパティを介してその情報をスタイルに渡す良い方法があることです。</p><pre rel="Pug" data-line=""> 。シリンダー（
  style = `
     - サイド：$ {side};
     - サイド：$ {sides};
     -  radius：$ {radius}; `
  class！= attributes.class
））

ミックスインの使用例は次のとおりです。

 シリンダー（20、30、[10、30]）

これにより、半径は20、30の側面を持つシリンダーが作成され、側面は10〜30のみがレンダリングされます。

その後、いくつかのスタイリングが必要です。 DigitalOceanロゴのシリンダーのスタイリングは非常に簡単です。

 .cylinder {
  -BG：HSL（var（ -  hue）、100％、50％）;
  背景：RGBA（255,43,0,0.5）;
  高さ：100％;
  幅：100％;
  位置：相対;
}
.cylinder__segment {
  フィルター：明るさ（var（ -  b、1））;
  背景：var（ -  bg、＃e61919）;
  位置：絶対;
  トップ：50％;
  左：50％;
}
.cylinder__end {
  -B：1.2;
  -END-COEFFICITY：0.5;
  高さ：100％;
  幅：100％;
  ボーダーラジウス：50％;
  変換：translate3d（-50％、-50％、calc（（var（ -  dept、0） * var（ -  end-coefficient）） * 1vmin））;
}
.cylinder__end  -  bottom {
  -B：0.8;
  -END-COEFFICITY：-0.5;
}
.cylinder__side {
  -B：0.9;
  高さ：calc（var（ -  dept、30） * 1vmin）;
  幅：calc（var（ -  side） * 1vmin）;
  変換：翻訳（-50％、-50％）rotatex（90deg）rotatey（（var（ -  index、0） * 360 / var（ -  sides）） * 1deg））翻訳3d（50％、0、calc（var（ -  radius） * 1vmin））;
}

アイデアは、シリンダーのすべての側面を作成し、シリンダーの中央に置くということです。次に、y軸でそれらを回転させ、半径のほぼ距離でそれらを投影します。

すでに不明瞭になっているため、シリンダーの端を内側の部分に表示する必要はありません。しかし、私たちはそれらを外側の部分に見せる必要があります。私たちの2気筒ミキシンの使用は次のように見えます：

 .logo（style = `--size：$ {size}`）
  .logo__arc.logo__arc  -  inner
     シリンダー（（size * 0.61） * 0.5、80、[0、60]、false、false）.cylinder-arc.cylinder-arc  -  inner
  .logo__arc.logo__arc  -  outer
     シリンダー（（サイズ * 1） * 0.5、100、[0、75]、true、true）.cylinder-arc.cylinder-arc-- outer

以前にロゴをトレースするときに使用した直径の半径を知っています。さらに、外側のシリンダーの端を使用して、DigitalOceanロゴの顔を作成できます。ここでは、境界線とクリップパスの組み合わせが便利です。

 .cylinder-arc  -  outer .cylinder__end  -  top、
.cylinder-arc  -  outer .cylinder__end  -  bottom {
  / * arcをキャップするために必要なサイズの割合に基づいて */
  境界線：calc（var（ -  size） * 0.1975vmin）;
  ボーダースタイル：ソリッド;
  境界線：HSL（var（ -  hue）、100％、50％）;
   - クリップ：ポリゴン（50％0、50％50％、0 50％、0 100％、100％100％、100％0）;
  クリップパス：var（ - クリップ）;
}

私たちは私たちがなりたい場所にかなり近いです！

不足していることが1つあります。アークを締めます。 ARCのためにいくつかの端を作成する必要があります。これには、XまたはY軸を配置および回転できる2つの要素が必要です。

 。シーン
  .logo（style = `--size：$ {size}`）
    .logo__arc.logo__arc  -  inner
       シリンダー（（size * 0.61） * 0.5、80、[0、60]、false、false）.cylinder-arc.cylinder-arc  -  inner
    .logo__arc.logo__arc  -  outer
       シリンダー（（サイズ * 1） * 0.5、100、[0、75]、true、true）.cylinder-arc.cylinder-arc-- outer
    .logo__square.logo__square  -  one
       cuboid（）。四角いcuboid.square-cuboid  -  one
    .logo__square.logo__square  - ツー
       cuboid（）。square-cuboid.square-cuboid-2
    .logo__square.logo__square-- three
       cuboid（）。四角いcuboid.square-cuboid  -  3
    .logo__cap.logo__cap  -  top
    .logo__cap.logo__cap-ボトム

アークのキャップされた端は、端の境界幅値とアークの深さに基づいて高さと幅を想定します。

 .logo__cap {
   -  hue：10;
  位置：絶対;
  高さ：calc（var（ -  size） * 0.1925vmin）;
  幅：calc（var（ -  size） * 0.1975vmin）;
  背景：HSL（var（ -  hue）、100％、50％）;
}
.logo__cap  -  top {
  トップ：50％;
  左：0;
  変換：翻訳（0、-50％）rotatex（90deg）;
}
.logo__cap-ボトム{
  下：0;
  右：50％;
  変換：翻訳（50％、0）rotatey（90deg）;
  高さ：calc（var（ -  size） * 0.1975vmin）;
  幅：calc（var（ -  size） * 0.1925vmin）;
}

アークを締めくくりました！

すべてを一緒に投げると、DigitalOceanのロゴがあります。このデモを使用すると、さまざまな方向に回転できます。

しかし、私たちの袖にはまだもう1つのトリックがあります！

ロゴに視差効果を追加します

3D DigitalOceanのロゴがありますが、何らかの方法でインタラクティブだったらきちんとしているでしょう。 2021年11月に、CSSカスタムプロパティで視差効果を作成する方法について説明しました。ここで同じ手法を使用してみましょう。ユーザーのマウスカーソルを追跡することでロゴが回転して動くという考えです。

CSSのXおよびY軸に沿ってロゴの動きを設定する係数に必要なカスタムプロパティを更新できるように、JavaScriptのダッシュが必要です。これらの係数は、ユーザーのポインター位置から計算されます。 gsap.utils.maprangeを使用できるように、greensockをよく使用します。しかし、ここにMapRangeを実装するバニラJavaScriptバージョンがあります。

 const maprange =（inputlower、inputupper、outputlower、outputupper）=> {
  const input_range = inputupper -inputlower
  const output_range = outputupper -outputlower
  return value => outputlower（（（value -inputlower） / input_range） * output_range || 0）
}

const Bounds = 100      
const update =（{x、y}）=> {
  const pos_x = maprange（0、window.innerwidth、-bounds、bounds）（x）
  const pos_y = maprange（0、window.innerheight、-bounds、bounds）（y）
  document.body.style.setproperty（ ' -  coefficient-x'、pos_x）
  document.body.style.setProperty（ ' -  cofficient-y'、pos_y）
}

document.addeventlistener（ 'pointermove'、update）

魔法はCSSランドで起こります。これは、このようにカスタムプロパティを使用することの主な利点の1つです。 JavaScriptは、相互作用で何が起こっているかをCSSに伝えています。しかし、それはCSSがそれで何をするかを気にしません。それはrad分離です。この理由で、このJavaScriptスニペットを非常に多くのデモで使用しています。 CSSを更新するだけで、さまざまなエクスペリエンスを作成できます。

どうすればいいですか？ .scene要素に直接スコープされたCalc（）およびカスタムプロパティを使用します。 .sceneのこれらの更新スタイルを考えてみましょう：

 。シーン {
   -  rotation-y：75deg;
   -  rotation-x：-14deg;
  変換：translate3d（0、0、100vmin）
    rotatex（-16deg）
    Rotatey（28Deg）
    rotatex（calc（var（ -  coffiency-y、0） * var（ -  rotation-x、0deg）））））
    rotatey（calc（var（ -  coffience-x、0） * var（ -  rotation-y、0deg）））;
}

ユーザーのポインターの動きに基づいて、シーンをxおよびy軸で回転させます。ただし、-Rotation-Xおよび-Rotation-Yの値を微調整することにより、この動作を調整できます。

各立方体は独自の方法で移動します。彼らはx、y、またはz軸のいずれかを移動することができます。しかし、1つの変換を定義するだけです。その後、スコープされたカスタムプロパティを使用して、残りを行うことができます。

 .logo__square {
  変換：translate3d（
    calc（min（0、var（ -  cofficient-x、0） * var（ -  offset-x、0）） * 1％）、
    calc（（var（ - 係数-y） * var（ -  offset-y、0）） * 1％）、
    calc（（var（ -  coefficient-x） * var（ -  offset-z、0）） * 1vmin）
  ）;
}
.logo__square-1つ{
  -Offset-X：50;
  -Offset-Y：10;
  -offset-z：-2;
}
.logo__square  - ツー{
  -Offset-X：-35;
  -offset-y：-20;
  -offset-z：4;
}
.logo__square-- three {
  -Offset-X：25;
  -Offset-y：30;
  -offset-z：-6;
}

それはあなたにこのようなものを与えます：

そして、私たちが満足しているものを手に入れるまで、これらを心の内容に微調整することができます！

ミックスにイントロアニメーションを追加します

わかりました、私は少しfiをして、私たちが仕事を強化することができる最後の（私は約束します！）方法を持っています。ある種のイントロアニメーションがあったらどうなりますか？波やロゴを洗い流して明らかにする何かはどうですか？

体の要素の擬似要素でこれを行うことができます。

 ：根 {
   -  hue：215;
   -  Initial-Delay：1;
  -Wave-Speed：2;
}

ボディ：後、
ボディ：{前
  コンテンツ： '';
  位置：絶対;
  高さ：100VH;
  幅：100VW;
  背景：HSL（var（ -  hue）、100％、calc（var（ -  lightness、50） * 1％））;
  変換：翻訳（100％、0）;
  アニメーション名：wave;
  アニメーションデュレーション：calc（var（ -  wave-speed） * 1s）;
  Animation-Delay：calc（var（ -  initial-delay） * 1s）;
  アニメーション - タイミング機能：容易さ。
}
ボディ：{前
   - 光：85;
  アニメーションタイミングファンクション：簡単。
}
@keyframes wave {
  から {
    変換：翻訳（-100％、0）;
  }
}

さて、アイデアは、DigitalOceanのロゴが波がその上に洗うまで隠されるということです。この効果については、0の不透明度から3D要素をアニメーション化します。そして、1の明るさから3D要素にすべての側面をアニメーション化してロゴを明らかにします。波の色はロゴの色と一致するため、フェードインしません。また、アニメーションフィルモードを使用してください。どちらも、要素が両方向にキーフレームのスタイリングを拡張することを意味します。

これには、何らかの形のアニメーションタイムラインが必要です。そして、ここでカスタムプロパティが作用します。アニメーションの期間を使用して、他の人の遅延を計算できます。これを「純粋なCSS 3Dパッケージトグルの作成方法」と「CSSでアニメーション化されたMatryoshka人形」の記事で見ました。

 ：根 {
   -  hue：215;
   -  Initial-Delay：1;
  -Wave-Speed：2;
   - 速度速度：0.5;
   - フィルタースピード：1;
}

.cylinder__segment、
.cuboid__side、
.logo__cap {
  アニメーション名：フェードイン、フィルターイン。
  アニメーション期間：calc（var（ - フェードスピード） * 1s）、
    calc（var（ - フィルター速度） * 1s）;
  Animation-Delay：calc（（var（ -  initial-delay）var（ -  wave-speed） * 0.75s）、
    calc（（var（ -  initial-delay）var（ -  wave-speed）） * 1.15s）;
  Animation-Fill-Mode：両方;
}

@KeyFramesフィルターイン{
  から {
    フィルター：明るさ（1）;
  }
}

@keyframesフェードイン{
  から {
    不透明：0;
  }
}

タイミングを正しくするにはどうすればよいですか？ ChromeのDevtoolの「アニメーションインスペクター」を少しいじくり回して使用すると、長い道のりがあります。このデモのタイミングを調整してみてください。

波が通過したら、ロゴをそこにしたい場合、フェードのタイミングは不要であることがわかります。その場合、フェードを0に設定してみてください。特に、フィルターとフェード係数を試してください。上記のコードから0.75と1.15秒に関連しています。物事を調整し、Chromeのアニメーションインスペクターでプレイを行うことは、物事がどのように時間を過ごしているかを確認する価値があります。

それでおしまい！

それをすべてまとめると、3D DigitalOceanロゴのためにこのきちんとしたイントロがあります！

そして、もちろん、CSSを使用して3DでDigitalOceanロゴを作成するためのこのアプローチのみです。他の可能性やおそらくさらに最適化できるものがある場合は、コメントにデモへのリンクをドロップしてください！

繰り返しますが、CSS-TricksチームとDigitalOceanに新しいパートナーシップをおめでとうございます。私は、物事が買収にどこに行くのかを見て興奮しています。一つ確かなことは、CSS-Tricksがコミュニティのために素晴らしいコンテンツを刺激し、生産し続けることです。 ？

以上がCSSを使用して3DでDigitalOceanロゴを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。