Skip to content

Instantly share code, notes, and snippets.

@quackking

quackking/dabblet.css

Created October 10, 2012 16:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save quackking/3866829 to your computer and use it in GitHub Desktop.
Save quackking/3866829 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive overlay text on image, works in IE6
Raw
dabblet.css
/**
* Responsive overlay text on image, works in IE6
* Homage to thebabydino
*/
<!DOCTYPE html>
<html>
<head>
*/ 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>
</head>
Raw
dabblet.html
<!-- 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>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment