Mick Redman

Monday, 16 May 2011

Use of wood and paper textures

This example makes use of textures, both wooden and paper. It's the starting position of putting together a website for a local carpenter. I also use one of the Google fonts to add a handwritten effect.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local carpenter</title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style>
html, body
{
font-family: 'Reenie Beanie', arial, serif;
background:url(images/coursepaper.jpg);
}

#mainContent, #footer
{
margin:0 auto;
width:800px;
}
#mainContent, #paper, #footer
{
position:relative;
padding:20px;
-webkit-box-shadow: 4px 4px 4px #737373;
-moz-box-shadow: 4px 4px 4px #737373;
box-shadow: 4px 4px 4px #737373;
behavior: url(scripts/PIE.htc);
}
#mainContent
{
background:url(images/plywood.jpg);
min-height:440px;
}
#leftSection
{
float:left;
width:140px;
}
#subNav
{
float:left;
width:136px;
margin-left:60px;
}

#subNav a.subMenu, a.subMenu:hover
{
font-size:2em;
color:#FFFFFF;
}

#subNav a.subMenu
{
display:block;
height:96px;
background:url(images/woodenbutton.png) 0 0 no-repeat;
margin-top:0px;
padding-top:20px;
padding-left:20px;
}

#subNav a.subMenu:hover
{
background:url(images/woodenbuttonover.png) 0 0 no-repeat;
padding-top:24px;
padding-left:24px;
}

.menuSelected
{
}
img
{

}
p
{
font-size:1.4em;
}
#paper
{
float:right;
background:url(images/paper.jpg);
width:500px;
min-height:300px;
}
#footer
{
background:url(images/plywood2.jpg);
position: relative;
min-height:40px;
}
</style>
</head>
<body>
<br />
<div id="mainContent">
<div id="leftSection">
<img src="images/stamp.png" alt="stamp">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
</div>
</div>
<div id="paper">
<h1>Welcome to the Local Carpenter</h1>
<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. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
</div>
<br />
<div id="footer"></div>
</body>
</html>

Letterpress

I use GIMP a lot. It's an excellent program. A lot of people, used to using Photoshop have difficulty getting used to the GUI. I'd never used Photoshop, so I didn't have anything to get used to. I compared the feature list of the 2 programs and GIMP came out very well, so that's the one I used.

This page is a tutorial on how to create a letterpress effect in GIMP.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font effects</title>
<style type="text/css">
body
{
font-family:Sans-serif;
background:#737373 url(images/darkcoursepaper.jpg);
color:#FFFFFF;
}
</style>
</head>
<body>
<img src="images/letterpress.png" alt="letterpress" />
<h1>Letterpress example using GIMP</h1>
<h2>Prepare your gimp canvas</h2>
<p>Start with a new clean canvas lets say 640px width and 480px height.</p>
<h2>Add some text</h2>
<p>Choose a font you like but I recommend to use a bold text.</p>
<h2>Inner gradient</h2>
<p>Right click on the layer with the text and choose Text to selection.</p>
<p>Choose Edit->Clear</p>
<p>Select a gradient tool and use a colour which is darker than the background. Use gradient FG to Transparent and make the gradient from bottom of the text somewhere to the middle.</p>
<h2>White Drop Shadow</h2>
<p>Select Filters > Light and Shadow > Drop Shadow.</p>
<p>Set Offset X, Offset Y and Blur radius to 1. Colour white. Opacity 20.0.</p>
<h2>Inner Shadow</h2>
<p>Select from top navigation Select > Invert</p>
<p>Then Filters > Light and Shadow > Drop Shadow</p>
<p>Set Offset X and Offset Y to 1. Blur radius to 6. Colour black. Opacity 100.0.</p>
<h2>Done!</h2>

</body>
</html>

More use of radial gradients

Another very simple example of how to use radial gradients. In this case, to add lighting to your headers and footers.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>

Use of grey and blue

In this very simple layout, I have applied a radial gradient to a plain background, added an arty black and white photo, and used a nice font for the title in blue. It hints at effective design technique.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}

#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#000000;
}

@font-face
{
font-family: 'zancleeYe/FSRegular';
src: url('fonts/zancle_eyefs-webfont.eot');
src: local('☺'), url('fonts/zancle_eyefs-webfont.woff') format('woff'), url('fonts/zancle_eyefs-webfont.ttf') format('truetype'), url('fonts/zancle_eyefs-webfont.svg#webfontDT7UNJnV') format('svg');
font-weight: normal;
font-style: normal;
}

#mainContent
{
margin:0 auto;
width:920px;
padding:10px;
}
h1, #footer
{
font-family: 'zancleeYe/FSRegular';
color:#B0E0E6;
}
h1
{
font-size:4em;
}
p
{
text-align:justify;
color:#FFFFFF;
font-size:0.8em;
}

#leftHand, #rightHand
{
position:relative;
float:left;
margin-right:10px;
padding:10px;
border:1px solid #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(scripts/PIE.htc);
}
#leftHand
{
width:360px;
min-height:374px;
}
#rightHand
{
background:url(images/japan.jpg) no-repeat;
width:480px;
height:374px;
}
#footer
{
clear:left;
padding-top:10px;
}
</style>

</head>
<body>
<img id="background" src="images/chalkBack.png" alt="chalkBack" />
<br /><br />
<div id="mainContent">
<h1>hello world!</h1>
<div id="leftHand">
<p>Lorem ipsum scripta apeirian perfecto cum ad. Patrioque cotidieque ex nam. Feugiat fastidii vis ne, te instructior voluptatibus mei, pro esse temporibus et. Cu pro possit tractatos, ea dictas eirmod erroribus ius, no nec putant facilisi euripidis. Dolore fierent vis in, pri cu prompta inciderint, vix maiorum ponderum recusabo et.</p>
<p>Ut est augue deseruisse, vix cu eripuit dignissim, duo quando aperiam lobortis ut. Intellegam delicatissimi in eos, ius labore placerat maluisset an. Ad corrumpit ullamcorper per, munere gloriatur mei an. Vix ei nonumy ubique fabulas, eros salutatus vis cu, eum regione voluptaria dissentias at.</p>
<p>Inani quaeque nam ne, cu usu simul maiestatis. At nostro posidonium usu. Puto scaevola philosophia ius ex. Sed eu dicam vulputate, epicuri nominavi officiis mei at. No doctus labores pro.</p>
<p>Eu est tale quot. An munere definitionem pri. Ei nonummy blandit petentium est, no mei sale dolores appetere. Error iriure cu eam, ne soleat bonorum dolores sea. Eos id oratio vulputate reformidans.</p>
</div>
<div id="rightHand">
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Mobile friendly liquid layout #7

This example combines a tiled background texture, with a radial gradient over the top. This provides the effect of lighting.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mobile friendly liquid layout #7</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<style>
body
{
font-family:Sans-serif;
width:100%;
background:url(images/patch.gif);
}
body, a, a:active, a:hover, a:link, a:visited
{
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;
}
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;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="windFarm" />
<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="http://www.effectivewebdesigns.co.uk/demo/mobile-friendly-liquid-layout-5.html#">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>

Friday, 13 May 2011

Pseudo Selectors using jQuery

There are quite a few useful pseudo selectors in CSS, but they don't all work in IE. You can overcome this problem using jQuery. Below are a few examples of how.

See demo.

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

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
font-size:1em;
line-height:1.5em;
padding:1em;
}
h1, h2
{
margin-bottom:0.5em;
}
h1
{
font-size:2em;
}
h2
{
margin-top:0.5em;
font-size:1.5em;
}
#nth-child ul, #only-child ul, #last-child ul, #empty ul, #checked, #enabled, #disabled
{
width:30%;
border-bottom:0.2em dotted #CCCCCC;
}
#nth-child span, #only-child span, #last-child span, #empty span, #checked span, #not span
{
color:blue;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#nth-child ul li:nth-child(2)").append("<span> - 2nd!</span>");
$("#only-child ul li:only-child").append("<span> - only child</span>");
$("#last-child ul li:last-child").append("<span> - last child</span>");
$("#empty ul li:empty").append("<span>Empty</span>");
$("#checked form input:checked").append("<span> - checked</span>");
$("#enabled form input:enabled").val("I am enabled");
$("#disabled form input:disabled").val("I am disabled");
$("#not form input:not(:checked)").append("<span> - not checked</span>");
});
</script>
</head>
<body>
<h1>Selector test</h1>
<h2>nth-child</h2>
<section id="nth-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>

</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>only-child</h2>
<section id="only-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>

</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>last-child</h2>
<section id="last-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>

</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>empty</h2>
<section id="empty">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>

</ul>
<ul>
<li></li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>checked</h2>
<section id="checked">
<form>
<input type="radio" name="sex" value="male" />Male
<input type="radio" name="sex" checked="checked" value="female" />Female
<input type="radio" name="sex" value="na" />Goodness knows
</form>
<br />
</section>
<h2>enabled</h2>
<section id="enabled">
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
<br />
</section>
<h2>disabled</h2>
<section id="disabled">
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
<br />
</section>
<h2>not</h2>
<section id="not">
<form>
<input type="radio" name="sex" value="male" />Male
<input type="radio" name="sex" checked="checked" value="female" />Female
<input type="radio" name="sex" value="na" />Goodness knows
</form>
<br />
</section>
</body>
</html>

Wednesday, 11 May 2011

Lessons from the coal face

I've been having a few problems with css3pie lately, but it's not their fault. I really should have read the issues page. All I can say is, despite sizing using em everywhere else, use pixels with items using css3pie.

And on to improving my HTML template. There is an excellent template at http://html5boilerplate.com, but it's a bit too big for me and I also like to get as many updates as I can without physically going to get them.

It does however, contain this line of code.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

It forces Internet Explorer to get the latest rendering engine, thus make your pages work more reliably in the terrible browser. Of course, if you asked most people which browser they use, they'll say Google or Facebook. That's where we are, so there's no point in being upset about them not using Chrome or Firefox.

And so here is my new standard HTML page. As soon as Google start hosting version 3 of Yui, I'll include that, but I can't be bothered to chase the version numbers at this stage.

<!DOCTYPE html>

<head>

<title>Sharing data from the Facebook API</title>

<!--[if IE]>

<![endif]-->

<style>

body

{

font-family:Sans-serif;

line-height:1.5em;

}

</style>

google.load("jquery", "1");

google.load("jqueryui", "1");

</script>

$(document).ready(function()

{

});

</script>

</head>

<body>

<header><h1>Header 1</h1></header>

<p>Hello World!</p>

</section>

<footer>Footer</footer>

</body>

</html>