Skip to content

Instantly share code, notes, and snippets.

@adelura

adelura/README.md

Forked from hubgit/README.md
Created March 23, 2017 17:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adelura/1009714660167d76c4f9b9ada902fb58 to your computer and use it in GitHub Desktop.
Save adelura/1009714660167d76c4f9b9ada902fb58 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