tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

multicol-gap-decorations-002-ref.html (2216B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
      3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
      4 <style>
      5    body {
      6        margin: 0px;
      7    }
      8 
      9    .outer {
     10        position: relative;
     11        border: 2px solid rgb(96 139 168);
     12        width: 200px;
     13        height: 200px;
     14    }
     15 
     16    .container {
     17        position: absolute;
     18        column-gap: 10px;
     19        display: flex;
     20    }
     21 
     22    .item {
     23        background: rgb(96 139 168 / 0.2);
     24        height: 100%;
     25        width: 60px;
     26    }
     27 
     28    .row-gap {
     29        position: absolute;
     30        height: 10px;
     31        width: 200px;
     32        background: gold;
     33        left: 0;
     34        top: 120px;
     35    }
     36 
     37    .column-gap {
     38        position: absolute;
     39        width: 10px;
     40        background: blue;
     41    }
     42 
     43    .spanner {
     44        position: absolute;
     45        background: cyan;
     46        width: 200px;
     47        height: 18px;
     48        top: 40px;
     49        left: 0;
     50        opacity: 0.5;
     51    }
     52 </style>
     53 
     54 <div class="outer">
     55    <div class="container" style="top:0; height:40px;">
     56        <div class="item"></div>
     57        <div class="item"></div>
     58        <div class="item"></div>
     59    </div>
     60    <div class="container" style="top:58px; height:2px;">
     61        <div class="item"></div>
     62        <div class="item"></div>
     63        <div class="item"></div>
     64    </div>
     65    <div class="container" style="top:70px; height:130px;">
     66        <div class="item"></div>
     67        <div class="item"></div>
     68        <!-- Remove the 6px consumed after the spanner in the first row: -->
     69        <div class="item" style="height:124px;"></div>
     70    </div>
     71    <div class="column-gap" style="top:0; left:60px; height:40px;"></div>
     72    <div class="column-gap" style="top:0; left:130px; height:40px;"></div>
     73    <div class="column-gap" style="top:58px; left:60px; height:2px;"></div>
     74    <div class="column-gap" style="top:58px; left:130px; height:2px;"></div>
     75    <div class="column-gap" style="top:70px; left:60px; height:130px;"></div>
     76    <div class="column-gap" style="top:70px; left:130px; height:130px;"></div>
     77    <div class="row-gap" style="top:60px;"></div>
     78    <div class="row-gap" style="top:130px;"></div>
     79    <div class="spanner"></div>
     80 </div>