パーツ番号 07-08-05 ・ CSSのみ

都市・建物シルエットイラスト

高さの異なるビル群を並べた静止シルエット。フッターや地域紹介セクションの装飾に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="city07-08-05">
          <span class="bld b1"></span>
          <span class="bld b2"></span>
          <span class="bld b3"></span>
          <span class="bld b4"></span>
          <span class="bld b5"></span>
          <span class="bld b6"></span>
          <span class="ground"></span>
        </div>

CSS

.d07-08-05 .city07-08-05{
          position:relative;
          width:260px;
          height:150px;
        }
        .d07-08-05 .bld{
          position:absolute;
          bottom:6px;
          background:#1e293b;
          background-image:
            radial-gradient(circle,#fbbf24 1.4px,transparent 1.6px);
          background-size:9px 11px;
          background-position:5px 8px;
        }
        .d07-08-05 .b1{
          left:0;
          width:32px;
          height:78px;
        }
        .d07-08-05 .b2{
          left:34px;
          width:26px;
          height:118px;
        }
        .d07-08-05 .b3{
          left:62px;
          width:36px;
          height:96px;
        }
        .d07-08-05 .b4{
          left:100px;
          width:22px;
          height:60px;
        }
        .d07-08-05 .b5{
          left:124px;
          width:40px;
          height:132px;
        }
        .d07-08-05 .b6{
          left:166px;
          width:28px;
          height:88px;
        }
        .d07-08-05 .ground{
          position:absolute;
          left:0;
          right:0;
          bottom:0;
          height:6px;
          background:#0f172a;
        }

クラス名 .d07-08-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。