Skip to content

Instantly share code, notes, and snippets.

@quackking

quackking/dabblet.css

Created October 10, 2012 16:50
Download ZIP

Revisions

  1. quackking revised this gist Oct 10, 2012. 2 changed files with 8 additions and 4 deletions.
    10 changes: 7 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,9 @@
    * Responsive overlay text on image, works in IE6
    * Homage to thebabydino
    */

    <!DOCTYPE html>
    <html>
    <head>
    */ next line loads html5shiv - duh */

    <!--[if lt IE 9]>
    @@ -25,8 +27,8 @@ img {
    max-width: 100%;
    }
    figcaption {
    /* bottom: 5px; */
    top: 50%; /* play with this to get positioning of overlay correct. */
    bottom: 5px;
    /* top: 50%; play with this to get positioning of overlay correct. */
    left: 0;
    right: 0;
    margin: 0;
    @@ -50,3 +52,5 @@ figcaption p {
    }
    </style>
    <script src="http://dabblet.com/code/prefixfree.min.js"></script>
    </head>

    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
  2. quackking created this gist Oct 10, 2012.
    52 changes: 52 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    /**
    * Responsive overlay text on image, works in IE6
    * Homage to thebabydino
    */

    */ next line loads html5shiv - duh */

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <meta charset="utf-8" />
    <title>tiger in the snow (HTML5-ified IE also)</title>
    <style>
    /**
    * tiger in the snow (HTML5-ified IE also)
    */
    figure {
    min-width: 178px;
    /** outline: solid 1px red; /* uncomment rule to see figure outline */
    position: relative;
    }
    img {
    width: 100%; /* needed so IE <9 does reponsive images */
    max-width: 100%;
    }
    figcaption {
    /* bottom: 5px; */
    top: 50%; /* play with this to get positioning of overlay correct. */
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px;
    position: absolute;
    background: rgba(0,0,0,.56);
    color: white;
    font-family: Helvetica;
    font-size: 14px;
    }
    figcaption h4 {
    margin: 0 0 8px;
    padding: 0 0 5px;
    border-bottom: solid 1px black;
    box-shadow: 0 1px 0 0 rgba(255,255,255,.35);
    font-size: 17px;
    }
    figcaption p {
    margin: 0;
    line-height: 1.25;
    }
    </style>
    <script src="http://dabblet.com/code/prefixfree.min.js"></script>
    5 changes: 5 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <!-- content to be placed inside <body>…</body> -->
    <figure>
    <img src="http://tiger.information-and-facts.com/wp-content/uploads/2011/07/tiger_10.jpg">
    <figcaption><h4>Tiger in the snow</h4><p>The tiger is the largest wild cat and is also the largest predator on land behind the Kodiak bear and the polar bear.</figcaption>
    </figure>
    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"}