Mick Redman

Friday 27 May 2011

Semi opaque header on photographic background

I saw this technique recently on a designer website and thought it was a nice effect.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
padding:6em;
opacity:0.8;
filter:alpha(opacity=80);
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
font-size:6em;
color:yellow;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
</body>
</html>

Tuesday 17 May 2011

Prettier navigation blocks Horizontal

This is an effect used by designers to add a little texture to navigation block.

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;
float:left;
width:4em;
height:1em;
text-decoration:none;
background:#222222 url(images/buttonbg.png) repeat-x;
padding:1em;
border-right:0.08em solid #FFFFFF;
border-left:0.08em solid #CCCCCC;
text-align:center;
}
nav a:hover
{
background:#666666 url(images/buttonbg.png) repeat-x;
border-left: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>

Monday 16 May 2011

Use of textures for 1920s feel.

This is an example page in the style of the 1920s, I'm sure some would say art-deco. The main thing for me is the use of textures, appropriate images, borders and backgrounds.

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">
<title>Twenties</title>
<style>
@font-face {
font-family: 'RaconteurNFRegular';
src: url('fonts/raconteurnf-webfont.eot');
src: local('☺'), url('fonts/raconteurnf-webfont.woff') format('woff'), url('fonts/raconteurnf-webfont.ttf') format('truetype'), url('fonts/raconteurnf-webfont.svg#webfont6VTANDte') format('svg');
font-weight: normal;
font-style: normal;
}

html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
background:#FFD073 url(images/seamlesspaper.jpg);
color:#000000;
}
#container
{
height:60%;
margin: 0 auto;
width:920px;
}
#contentWrapper, #contentHolder
{
position:relative;
behavior: url(scripts/PIE.htc);
}
#contentWrapper
{
width:500px;
float:left;
border:8px solid #A67B25;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(scripts/PIE.htc);
opacity:0.8;
filter:alpha(opacity=80);
}

#contentHolder
{
margin:4px;
border:2px solid #000000;
-webkit-border-radius:4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

#contentHolder p
{
margin:8px;
font-family:serif;
font-size:1.1em;
line-height:140%;
color:#000000;
text-align:justify;
}

h1
{
font-family: 'RaconteurNFRegular';
font-size:4em;
color:#000000;
}

img.city
{
float:left;
width:400px;
}

#footer
{
height:40%;
clear:both;
background:url(images/cityborder.png) repeat-x;
}
</style>
</head>
<body>
<div id="container">
<h1>The Roaring Twenties</h1>
<div id="contentWrapper">
<div id="contentHolder">
<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. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<img src="images/cityArtDeco.png" class="city" />
</div>
<div id="footer"></div>
</body>
</html>

Another radial gradient background

Here is another example of using a radial gradient for a background, just because it looks nice.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radial Gradient Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
background:#FF0000;
/* url(images/check.gif); */
width:100%;
height:100%;
}
.contentHolder
{
margin:0 auto;
width:800px;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
color:#FFFFFF;
}
#topPart
{
height:200px;
}
#middlePart
{
height:400px;
}
#bottomPart
{
min-height:200px;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="gradient" />
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

Neon text using GIMP

Here is another GIMP tutorial. How to add a neon effect to text.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font effects - Neon text</title>
<style type="text/css">
body
{
font-family:Sans-serif;
background:#000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<img src="images/neonText.png" alt="neonText" />
<h1>Neon text 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 an italic text. Now type your word(s).</p>
<p>Right click on the layer with the text and choose Text to Path.</p>
<p>Go to the Edit menu and choose Stroke Path.</p>
<p>In the Stroke Path dialogue choose Stroke with Paint Tool and hit the Stroke button.</p>
<h2>Optional</h2>
<p>You may now need to resize the selection because the text comes too close to the edge and gets chopped off.</p>
<p>Go to Layer-Layer Boundry Size and increase the layer width, centreing the text within the increased layer.</p>
<h2>Back to the necessary</h2>
<p>Select Filters > Alpha to Logo >Neon and click on the OK button.</p>
<h2>Done!</h2>
</body>
</html>

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>