Mick Redman

Saturday, 19 March 2011

Big fonts for header

This is another small post. All I have done is stretched the h2 to match the length of the h1. The effect works very well.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stretch Fonts to Selector</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
header
{
margin:4em;
width:20em;
text-align:center;
}
h1, h2
{
font-weight:bold;
text-transform:uppercase;
}
h1
{
color:#A5A5A5;
font-size:11em;
}
h2
{
color:#464646;
font-size:6.5em;
margin-top:-0.3em;
}
.i
{
color:#FF0000;
}
</style>
</head>
<body>
<header>
<h1>B<span class="i">i</span>g</h1>
<h2>T<span class="i">i</span>tle</h2>
</header>
</body>
</html>

Friday, 18 March 2011

Example of good Typography Using the Magic number Principle

I've taken much of this example from the excellent article here from Harry Roberts for Smashing Magazine.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using the Magic number Principle</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
margin:1em;
}
h1, h2, h3, p, ul, ol
{
margin-bottom:1.5em;
}
h1
{
font-size:1.5em;
line-height:1em;
}
h2
{
font-size:1.38em;
line-height:1.09em;
}
h3
{
font-size:1.25em;
line-height:1.2em;
}
p
{
font-size:1em;
line-height:1.5em;
}
body > p:first-of-type
{
font-size:1.13em;
line-height:1.33em;
}
strong, code
{
font-variant:small-caps;
}
em, code
{
font-weight:bold;
}
ul
{
list-style:square outside;
}
ul ul, ol ol
{
margin: 0 0 0 3.75em;
}
blockquote
{
   margin:1.25em;
   padding:1.25em
}
</style>
</head>
<body>
<h1>HTML Ipsum Presents</h1>
<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>
<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>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</body>
</html>

Thursday, 17 March 2011

Mobile friendly liquid layout #6

Another take on Mobile friendly liquid layout #5.

See demo.

<!DOCTYPE html>

<head>

<title>Mobile friendly liquid layout #5</title>

<!--[if IE]>

<![endif]-->

body

{

font-family:Sans-serif;

background:#FFFFFF;

width:100%;

color:#525252;

}

header, #text, footer, #tasters

{

padding:1em;

}

header, footer

{

height:8em;

}

header

{

float:right;

width:33%;

min-width:26em;

}

#text

{

overflow:hidden;

line-height:1.5em;

}

footer

{

clear:left;

}

h1, h2, h3

{

font-weight:900;

text-transform:uppercase;

color:#FFBC40;

}

{

font-size:4em;

}

{

font-size:2em;

}

#tasters article

{

display:block;

float:left;

width:20%;

}

</style>

</head>

<body>

<h1>Headline 1</h1>

<h1>Headline 2</h1>

<h2>Sub-Header</h2>

</header>

<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>

</article>

<article><h3>services</h3><p>Introductory text about services</p><p><a href="#">more...</a></p></article>

<article><h3>portfolio</h3><p>Introductory text about portfolio</p><p><a href="#">more...</a></p></article>

<article><h3>contact</h3><p>Introductory text about contact</p><p><a href="#">more...</a></p></article>

</section>

<footer>Footer</footer>

</body>

</html>

Tuesday, 15 March 2011

Mobile friendly liquid layout #5

Haven't done one of these in a while so here goes.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mobile friendly liquid layout #5</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#000000;
width:100%;
color:#FFFFFF;
}
header, #text, footer, nav a
{
padding:1em;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
float:left;
width:33%;
min-width:26em;
}
#text
{
overflow:hidden;
line-height:1.5em;
}
footer
{
clear:left;
}
h1
{
font-weight:900;
font-size:4em;
text-transform:uppercase;
}
h1:nth-child(2), h3
{
color:#FFBC40;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Headline 1</h1>
<h1>Headline 2</h1>
<h2>Sub-Header</h2>
</header>
<aside id="text">
<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>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
<footer>Footer</footer>
</body>
</html>

Monday, 14 March 2011

Google Directions API - not bad

Here, I have provided an example of implementing Google Directions. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/maps/documentation/directions/ for more options.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Directions API</title>
</head>
<body>
<?php
$params = 'origin=Toddington,Bedfordshire';
$params .= '&destination=Cranfield,Bedfordshire';
$params .= '&region=uk&sensor=false';
$data = json_decode(file_get_contents('http://maps.googleapis.com/maps/api/directions/json?'.$params));
if ($data->status === 'OK')
{
$route = $data->routes[0];
foreach ($route->legs as $leg)
{
foreach ($leg->steps as $step)
{
echo $step->html_instructions .'<br />';
}
}
}
?>
</body>
</html>

Friday, 11 March 2011

Google Chart API - Not bad

Here, I have provided an example of implementing Google Charts. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/chart/docs/making_charts.html for more options.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google chart</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$chartURL = 'http://chart.googleapis.com/chart?';
/* Add chart type */
$chartURL += 'cht=bhs';
/* add chart size */
$chartURL += '&chs=600x160';
/* add chart scale */
$chartURL += '&chxt=t&chxl=0:|Low+Value|High+Value';
/* add chart key */
$chartURL += '&chdl=Career|Happiness';
/* add chart colours */
$chartURL += '&chco=35D2AB|000000';
/* add chart values */
$chartURL += '&chd=t:';
$chartURL += '40,';
$chartURL += '80';
$('#chart').attr('src', $chartURL);
});
</script>
</head>
<body>
<img id="chart" />
</body>
</html>

Friday, 4 March 2011

Prettier navigation blocks Vertical

This is an effect used by designers to add a little texture to navigation block. It works horizontally just as well if you use border-left and border-right instead of border-top and border-bottom.

See demo.

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

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
nav a, nav a:link, nav a:active, nav a:hover, nav a:visited
{
color:#FFFFFF;
}
nav a
{
display:block;
width:4em;
height:1em;
text-decoration:none;
background:#222222 url(images/buttonbg.png) repeat-x;
padding:1em;
border-top:0.08em solid #FFFFFF;
border-bottom:0.08em solid #CCCCCC;
text-align:center;
}
nav a:hover
{
background:#666666 url(images/buttonbg.png) repeat-x;
border-bottom:0.1em solid #CCCCCC;
}
</style>
</head>
<body>
<section id="mainContent">
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</nav>
</section>
</body>
</html>