Skip to content

Instantly share code, notes, and snippets.

@op1ekun

op1ekun/README.md

Forked from hubgit/README.md
Created September 12, 2016 10:14
Show Gist options
  • Save op1ekun/b77226b7aa435cc031492047b7a7a56c to your computer and use it in GitHub Desktop.
Save op1ekun/b77226b7aa435cc031492047b7a7a56c to your computer and use it in GitHub Desktop.
Download ZIP
A5 printed card with HTML + CSS
Raw
README.md
  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, 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.
Raw
card.css
@page {
/* dimensions for the whole page */
size: A5;
margin: 0;
}
html {
/* off-white, so body edge is visible in browser */
background: #eee;
}
body {
/* A5 dimensions */
height: 210mm;
width: 148.5mm;
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 {
background: #fff;
}
/* an image that fills the whole of the front face */
.face-front img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Raw
index.html
<!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 src="front.png"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment