Skip to content

Instantly share code, notes, and snippets.

@hubgit

hubgit/README.md

Last active May 12, 2025 09:45
Show Gist options
  • Save hubgit/7025107 to your computer and use it in GitHub Desktop.
Save hubgit/7025107 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hubgit revised this gist Dec 22, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion card.css
    View file
    Original file line number Diff line number Diff line change
    @@ -35,7 +35,7 @@ body {
    background: #fff;
    }

    /* an image that fill the whole of the front face */
    /* an image that fills the whole of the front face */
    .face-front img {
    position: absolute;
    top: 0;
  2. hubgit revised this gist Dec 22, 2013. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions card.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,8 +15,6 @@ body {
    height: 210mm;
    width: 148.5mm;

    /* default background color - over-ride in face-front and face-back */
    background: #fff;
    margin: 0;
    }

    @@ -34,7 +32,7 @@ body {

    /* the front face */
    .face-front {

    background: #fff;
    }

    /* an image that fill the whole of the front face */
  3. hubgit revised this gist Dec 22, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion card.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    /* dimensions for the whole page */
    @page {
    /* dimensions for the whole page */
    size: A5;

    margin: 0;
    }

  4. hubgit revised this gist Dec 22, 2013. 2 changed files with 16 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    1. Clone this Gist.
    2. For card sizes other than A5, edit the `size` value in `@page`, and the `height` and `width` properties of `body`.
    3. Add contents to each face. The simplest approach is to add an image called `front.png` of the same dimensions as the card.
    4. Generate a PDF from the HTML + CSS. If using [Prince](http://www.princexml.com/), it's as simple as `prince index.html card.pdf`.
    5. Take the PDF to a printer, and ask them to print as many copies as you need.
    11 changes: 11 additions & 0 deletions card.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,11 @@
    /* dimensions for the whole page */
    @page {
    size: A5;
    margin: 0;
    }

    html {
    /* off-white, so body edge is visible in browser */
    background: #eee;
    }

    @@ -12,20 +14,29 @@ body {
    height: 210mm;
    width: 148.5mm;

    /* default background color - over-ride in face-front and face-back */
    background: #fff;
    margin: 0;
    }

    /* fill half the height with each face */
    .face {
    height: 50%;
    width: 100%;
    position: relative;
    }

    /* the back face */
    .face-back {
    background: #f6f6f6;
    }

    /* the front face */
    .face-front {

    }

    /* an image that fill the whole of the front face */
    .face-front img {
    position: absolute;
    top: 0;
  5. hubgit revised this gist Dec 22, 2013. 1 changed file with 20 additions and 22 deletions.
    42 changes: 20 additions & 22 deletions card.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,39 +1,37 @@
    @page {
    size: A5;
    margin: 0;
    size: A5;
    margin: 0;
    }

    html {
    background: #eee;
    background: #eee;
    }

    body {
    /* A5 dimensions */
    height: 210mm;
    width: 148.5mm;
    /* A5 dimensions */
    height: 210mm;
    width: 148.5mm;

    background: #fff;
    margin: 0;
    background: #fff;
    margin: 0;
    }

    .face {
    height: 50%;
    width: 100%;
    position: relative;
    height: 50%;
    width: 100%;
    position: relative;
    }

    .face-back {
    background: #f6f6f6;
    background: #f6f6f6;
    }

    .front-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    .face-front img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    }


  6. hubgit revised this gist Dec 22, 2013. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,7 @@
    <!doctype html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="card.css">
    </head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="card.css">

    <body>
    <div class="face face-back"></div>
    <div class="face face-front"><img src="front.png"></div>
  7. hubgit revised this gist Dec 22, 2013. 1 changed file with 6 additions and 5 deletions.
    11 changes: 6 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,9 @@
    <!doctype html>
    <meta charset="utf-8">
    <link rel="stylesheet" href="card.css">

    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="card.css">
    </head>
    <body>
    <div class="face face-back"></div>
    <div class="face face-front"><img class="front-image" src="front.png"></div>
    <div class="face face-back"></div>
    <div class="face face-front"><img src="front.png"></div>
    </body>
  8. hubgit revised this gist Oct 17, 2013. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion card.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    @page {
    size: A5;
    size: A5;
    margin: 0;
    }

    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,6 @@
    <link rel="stylesheet" href="card.css">

    <body>
    <div class="face face-back"></div>
    <div class="face face-back"></div>
    <div class="face face-front"><img class="front-image" src="front.png"></div>
    </body>
  9. hubgit created this gist Oct 17, 2013.
    39 changes: 39 additions & 0 deletions card.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    @page {
    size: A5;
    margin: 0;
    }

    html {
    background: #eee;
    }

    body {
    /* A5 dimensions */
    height: 210mm;
    width: 148.5mm;

    background: #fff;
    margin: 0;
    }

    .face {
    height: 50%;
    width: 100%;
    position: relative;
    }

    .face-back {
    background: #f6f6f6;
    }

    .front-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    }


    8 changes: 8 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <!doctype html>
    <meta charset="utf-8">
    <link rel="stylesheet" href="card.css">

    <body>
    <div class="face face-back"></div>
    <div class="face face-front"><img class="front-image" src="front.png"></div>
    </body>