Mick Redman: lorempixum

Monday, 13 June 2011

Using lorempixum as background images

I've been finding lately that lormepixum is also pretty darn useful in providing background images.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>lorempixum background</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'>
<style>
#content
{
margin:auto;
width:40em;
min-height:40em;
background:url(http://lorempixum.com/g/640/640/food) no-repeat;
padding:1em;
}
h1
{
font:4em/1.5em 'Ultra', arial, serif;
color:orange;
}
h2
{
font:2em/1.5em 'Ultra', arial, serif;
}
h3
{
font:1em/1.5em 'Ultra', arial, serif;
}
h2, h3
{
color:#4577D4;
}
#innerText
{
background:url(images/opaque.png);
width:37em;
font:1em/1.5em Sans-serif;
color:#222222;
padding:0.5em;
}
</style>
</head>
<body>
<section id="content">
<header><h1>Header 1</h1></header>
<section id="innerText">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</section>
</section>
</body>
</html>

Monday, 6 June 2011

lorempixum placeholder

I am going to start using the placeholder from http://lorempixum.com/ from here on. In my last post, I added one of my GIMP creations, but it didn't give the best effect, so I've now added on of these placeholders.

Your also going to fined some of the code I use even leaner. I've been reading the excellent Smashing Book #2. It contains many of the things I'm interested in at the moment and has been improving the quality of my work no end.

For those of you with an addiction for free design code, here is a nice font display.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font test</title>

<link rel="stylesheet"
href="http://meyerweb.com/eric/tools/css/reset/reset.css" /> <style> body {
background:#CCCCCC;
color:#777777;
font:italic 1.1em/1.2em Georgia, serif; } p {
margin:4em;
width:20em;
text-align:justify;
}
</style>
</head>
<body>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</body>
</html>