イラストを使わずに、Webページに斜めから俯瞰したアイソメトリックをつくりだすCSSライブラリ -IsometricSass
Post on:2019年9月4日
sponsors
アイソメトリックの斜めから俯瞰したイラストなどをよく見かけますね。そのアイソメトリックをWebページにつくりだすCSSのライブラリを紹介します。
HTMLは非常にシンプルで、要素をアイソメトリックにしたり、斜めのグリッドを配置したり、アニメーションさせたりできます。
IsometricSass
IsometricSass -GitHub
IsometricSassの特徴
IsometricSassはJavaScriptを必要としないSassベースのフレームワークで、CSSの3D Transformsを使用してアイソメトリックの空間をWebページ上につくりだします。MITライセンスで、商用でも無料で利用できます。
要素を配置するだけでなく、シャドウをつけたり、アニメーションに浮かせたり、回転させたり、さまざまなエフェクトも用意されています。
ふわりと浮かせるアニメーション
CSSの3D Transformsのサポートブラウザは、下記の通りです。
IsometricSassのデモ
デモでは、IsometricSassで実装できる要素やエフェクトを楽しめます。
デモページ: Context
アイソメトリックの斜めのグリッドを配置するのも簡単です。
デモページ: Grid
アイソメトリックの空間にパネルを配置します。
デモページ: Plane
パネルにシャドウをつけると、かなりリアルになります。
デモページ: Shadow
立体的な要素も簡単に配置できます。
デモページ: Cube
ポジションの移動。
デモページ: Position
ふわりとパネルを浮かせます。
デモページ: Animation
キューブ状の要素は回転させてもいいですね。
デモページ: Rotate
IsometricSassの使い方
Step 1: アイソメトリックのスペースを作成
アイソメトリックのスペースを用意します。
|
1 2 3 4 5 |
<div class="isometric-container"> <div class="isometric"> ... </div> </div> |
|
1 |
@import isometric |
Step 2: グリッドを作成
斜めのグリッドを用意します。
|
1 2 3 4 5 |
<div class="isometric-container"> <div class="isometric"> <div class="grid"></div> </div> </div> |
グリッドのサイズ、線の太さ、線のカラーは自由に定義できます。
|
1 2 3 4 5 6 7 8 |
@import isometric $size: 1rem .grid +grid($size, 1%, mediumorchid) width: $size*5 height: $size*5 |
Step 3: パネルを作成
アイソメトリックのスペースにパネルを配置します。
|
1 2 3 4 5 |
<div class="isometric-container"> <div class="isometric"> <div class="plane"></div> </div> </div> |
パネルの幅・高さ・カラーは自由に定義できます。
|
1 2 3 4 5 6 |
@import isometric $size: 1rem .plane +plane($size, $size, darkcyan) |
シャドウやキューブ、アニメーションなどの実装は、デモページをご覧ください。
sponsors
