Skip to content

Instantly share code, notes, and snippets.

@gonghao

gonghao/dabblet.css

Last active August 29, 2015 14:20
Download ZIP

Revisions

  1. gonghao revised this gist Apr 30, 2015. No changes.
  2. gonghao revised this gist Apr 30, 2015. 2 changed files with 8 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    div { width: 300px; height: 200px; overflow: hidden; position: relative; }
    div > a { position: absolute; top: -100%; bottom: -100%; left: -100%; right: -100%; text-align: center; }
    div > a:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
    div > a > img { vertical-align: middle; }
    .banner { width: 300px; height: 200px; overflow: hidden; position: relative; }
    .banner > a { position: absolute; top: -100%; bottom: -100%; left: -100%; right: -100%; text-align: center; }
    .banner > a:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
    .banner > a > img { vertical-align: middle; }
    4 changes: 4 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    <div class="banner">
    <a href="#"><img src="//placehold.it/500x300" alt=""/></a>
    </div>

    <div class="banner">
    <a href="#"><img src="//placehold.it/100x100" alt=""/></a>
    </div>
  3. gonghao created this gist Apr 30, 2015.
    4 changes: 4 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    div { width: 300px; height: 200px; overflow: hidden; position: relative; }
    div > a { position: absolute; top: -100%; bottom: -100%; left: -100%; right: -100%; text-align: center; }
    div > a:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
    div > a > img { vertical-align: middle; }
    3 changes: 3 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="banner">
    <a href="#"><img src="//placehold.it/500x300" alt=""/></a>
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}