Illustrations(イラスト)
すべての テンプレートには、見た目や雰囲気、スタイルの点でユニークな既製のイラストのセットが含まれています。
各テンプレートには、SVG ファイル形式で提供されるカスタム イラストが含まれています。 これらは src/images/illustration-*-*.svg にあります。
イラストを 2 種類に分けてご紹介します。
- Illustrations for sections (e.g.
illustration-section-01.svg) - Illustrations for elements (e.g.
illustration-element-01.svg)
詳しく見てみましょう 👇
Illustrations for sections(セクションのイラスト)
セクションの装飾的な機能があります。 技術的には、断面図は断面領域全体をカバーしており、ビューポートに合わせて拡大縮小されません。
Illustrations for elements(要素のイラスト)
これらは、特定の要素の後ろ (たとえば、画像の後ろ) に配置されるように構築されています。 セクションのイラストとは逆に、その寸法はバインドされている要素に応じて拡大縮小されます。
CSS & Sass mixins
イラストはテンプレートに関連しているため、コア CSS フレームワークは提供されていません。
変更を加えたり、独自のイラストを追加する必要がある場合は、src/scss/theme/illustrations/_illustrations.scss ファイルを確認してください。
ファイルを調べると、必ず次の 2 つのことに気づくでしょう。
- CSS を介してイラストを疑似要素 (
::before、::after) に添付するために使用しますが、その寸法はバインドされている要素のキャンバスを超える可能性があります。 - 作業を容易にするためにカスタム Sass mixin を使用します
イラスト mixin (@mixin Illustration) は src/scss/core/abstracts/_mixins.scss ファイルにあり、このように使用できます 👇
@include illustration(file, width, height, vpos, hoffset, voffset);| Argument | Description |
|---|---|
file | Name of the SVG file, for example |
width | Illustration width as a percent of related element width. It can be |
height | Illustration height as a percent of related element height (scaling), or illustration height in
|
| Illustrations are vertically centered by default, but you can define a different starting position (
|
| To define a horizontal offset in |
| To define a vertical offset in |
Customizing an illustration(イラストのカスタマイズ)
SVG の性質上、イラストのカスタマイズと変更は少し難しい場合があります。 たとえば、イラストの色は SVG 自体に定義されているため、その特定のファイルを SVG エディター (無料の Figma を強くお勧めします) で開き、変更を加えて、エクスポートされたファイルを既存のファイルに置き換える必要があります。 素敵なビデオチュートリアルが近々公開される予定です。 乞うご期待！