Mick Redman

Monday, 16 May 2011

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>

Tuesday, 10 May 2011

How to add the .htc mime type to your Apache website

I have been updating my blog to include demo versions of the pages. A number of my blog entries include the use of css3pie which uses a file called PIE.htc to render css3 content in IE. Having stuck the demo pages on Effective Web Designs, I discovered that PIE.htc was not delivering the goods as it normally does.

After a bit of surfing, I found that it may be to do with not serving the .htc mime type. After a bit more surfing, I discovered that this could be achieved by setting the mime type within your .htaccess file, if you are using the only web server which matters (Apache).

This is the line you need for your .htaccess file.

AddType text/x-component .htc

I hope this also opens up all sorts of mime type possibilities to you.