Skip to content

seekseep/blockcss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

blockcss

出力例

<div class="blocks x_-60 y_20">
    <!-- B -->
    <div class="blocks blue   x_0 ">
        <div class="block width_4  height_4 depth_20 x_0 y_0 z_0"></div>
        <div class="block width_12 height_4 depth_4  x_4 y_0 z_0"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_4"></div>
        <div class="block width_12 height_4 depth_4  x_4 y_0 z_8"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_12"></div>
        <div class="block width_12 height_4 depth_4  x_4 y_0 z_16"></div>
    </div>
    <!-- L -->
    <div class="blocks green  x_24">
        <div class="block width_4  height_4 depth_20 x_0 y_0 z_0"></div>
        <div class="block width_12 height_4 depth_4  x_4 y_0 z_16"></div>
    </div>
    <!-- O -->
    <div class="blocks purple x_48">
        <div class="block width_12 height_4 depth_4  x_4  y_0 z_0"></div>
        <div class="block width_4  height_4 depth_12 x_16 y_0 z_4"></div>
        <div class="block width_4  height_4 depth_12 x_0  y_0 z_4"></div>
        <div class="block width_12 height_4 depth_4  x_4  y_0 z_16"></div>
    </div>
    <!-- C -->
    <div class="blocks indigo x_72">
        <div class="block width_12 height_4 depth_4  x_4  y_0 z_0"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_4"></div>
        <div class="block width_4  height_4 depth_12 x_0  y_0 z_4"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_12"></div>
        <div class="block width_12 height_4 depth_4  x_4  y_0 z_16"></div>
    </div>
    <!-- K -->
    <div class="blocks indigo x_96">
        <div class="block width_4  height_4 depth_20 x_0  y_0  z_0"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0  z_0"></div>
        <div class="block width_4  height_4 depth_4  x_12 y_0 z_4"></div>
        <div class="block width_8  height_4 depth_4  x_4  y_0 z_8"></div>
        <div class="block width_4  height_4 depth_4  x_12 y_0 z_12"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_16"></div>
    </div>
</div>
<div class="blocks x_-40 y_0">
    <!-- C -->
    <div class="blocks yellow x_0">
        <div class="block width_12 height_4 depth_4  x_4  y_0 z_0"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_4"></div>
        <div class="block width_4  height_4 depth_12 x_0  y_0 z_4"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_12"></div>
        <div class="block width_12 height_4 depth_4  x_4  y_0 z_16"></div>
    </div>
    <!-- S -->
    <div class="blocks orange x_24">
        <div class="block width_16 height_4 depth_4  x_4  y_0 z_0"></div>
        <div class="block width_4  height_4 depth_4  x_0  y_0 z_4"></div>
        <div class="block width_12 height_4 depth_4  x_4  y_0 z_8"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_12"></div>
        <div class="block width_16 height_4 depth_4  x_0  y_0 z_16"></div>
    </div>
    <!-- S -->
    <div class="blocks red x_48">
        <div class="block width_16 height_4 depth_4  x_4  y_0 z_0"></div>
        <div class="block width_4  height_4 depth_4  x_0  y_0 z_4"></div>
        <div class="block width_12 height_4 depth_4  x_4  y_0 z_8"></div>
        <div class="block width_4  height_4 depth_4  x_16 y_0 z_12"></div>
        <div class="block width_16 height_4 depth_4  x_0  y_0 z_16"></div>
    </div>
</div>

About

create blocks with css only.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published