font-weight: 400;
font-size: 1rem;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #555;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga", "kern";
text-rendering: optimizelegibility;
background-color: #fff;
Showing posts with label font. Show all posts
Showing posts with label font. Show all posts
Tuesday 29 May 2018
Tuesday 10 February 2015
Using Font Awesome icons and jQuery to show form loading in Twitter Bootstrap page
Font Awesome is a really useful tool for adding icons to your website. It also comes with animated icons which can be used to show when your form is waiting for a response. In the example below, I have created a basic Twitter Bootstrap page. The page has a form. When the form is submitted, there is a delay in its response. During the delay, I use jQuery to show a Font Awesome animated icon.
First the Twitter Bootstrap page with the differences in red:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Font Awesome Animated Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<i class="fa fa-circle-o-notch fa-spin"></i>
<form action="response.php" method="POST">
<input type="text" name="yourname" id="yourname" placeholder="Enter your name" />
<button type="submit">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
(function()
{
var thisForm = $('form');
var i = $('i');
i.hide();
thisForm.submit(function()
{
i.show();
thisForm.hide();
$.post(thisForm.attr('action'),thisForm.serialize(),
function(data)
{
thisForm.empty().html(data);
i.hide();
thisForm.show();
});
return false;
});
})();
</script>
</body>
</html>
Now my response.php
<?php
sleep(2);
echo 'Hello '.$_POST['yourname'];
?>
First the Twitter Bootstrap page with the differences in red:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Font Awesome Animated Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<i class="fa fa-circle-o-notch fa-spin"></i>
<form action="response.php" method="POST">
<input type="text" name="yourname" id="yourname" placeholder="Enter your name" />
<button type="submit">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
(function()
{
var thisForm = $('form');
var i = $('i');
i.hide();
thisForm.submit(function()
{
i.show();
thisForm.hide();
$.post(thisForm.attr('action'),thisForm.serialize(),
function(data)
{
thisForm.empty().html(data);
i.hide();
thisForm.show();
});
return false;
});
})();
</script>
</body>
</html>
Now my response.php
<?php
sleep(2);
echo 'Hello '.$_POST['yourname'];
?>
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>
<!--[if IE]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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>
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>
<!--[if IE]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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>
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>
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>
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>
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>
Wednesday 23 March 2011
Resize chosen fonts dynamically
Again, I can't take much credit for this. The real credit goes to the author of this blog entry http://www.pukkared.com/2010/10/resizing-text-with-jquery-and-window-resize/. I have just made a few changes and calls for my own purposes. Namely, passing which fonts I would like to resize, what the original size should be and what size the page should be before resizing begins. Enjoy!
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic font resize</title>
<style>
body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.resizeFonts = function(fontName, originalFontSize)
{
var originalWinWidth = $(window).width();
var ratioOfChange = 50;
$(fontName).css('font-size', originalFontSize);
$(window).resize(function()
{
var winWidth = $(window).width();
var widthDiff = winWidth - originalWinWidth;
if(widthDiff > 0)
{
var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);
var newFontSize = originalFontSize + pixelsToIncrease;
$(fontName).css('font-size', newFontSize);
}
else
{
var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);
var newFontSize = originalFontSize - pixelsToDecrease;
$(fontName).css('font-size', newFontSize);
}
})
}
$(document).ready(function()
{
$(window).resize(function() {
if($(this).width() < 800)
{
$(this).resizeFonts('h1',20);
$(this).resizeFonts('p',10);
}
});
});
</script>
</head>
<body>
<h1>Big Mick's Recipe Book</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. 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>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic font resize</title>
<style>
body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.resizeFonts = function(fontName, originalFontSize)
{
var originalWinWidth = $(window).width();
var ratioOfChange = 50;
$(fontName).css('font-size', originalFontSize);
$(window).resize(function()
{
var winWidth = $(window).width();
var widthDiff = winWidth - originalWinWidth;
if(widthDiff > 0)
{
var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);
var newFontSize = originalFontSize + pixelsToIncrease;
$(fontName).css('font-size', newFontSize);
}
else
{
var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);
var newFontSize = originalFontSize - pixelsToDecrease;
$(fontName).css('font-size', newFontSize);
}
})
}
$(document).ready(function()
{
$(window).resize(function() {
if($(this).width() < 800)
{
$(this).resizeFonts('h1',20);
$(this).resizeFonts('p',10);
}
});
});
</script>
</head>
<body>
<h1>Big Mick's Recipe Book</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. 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>
</body>
</html>
Monday 8 November 2010
Font combinations test #2
As promised the example below is a good way to test out which web safe font combinations are going to work. You simply need to comment out the fonts you don't want to use from the font-family tags in the CSS. In the case of the headers, you should also consider changing the font-weight to bold. Once you are happy. You need to think about colours. I get my colour combinations from the excellent http://colorschemedesigner.com.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Combination #2</title>
<style>
body
{
/* font-size:62.5%; */
font-size:80%;
}
h1, h2, h3, h4
{
font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family:'Times New Roman', Times, serif;
font-family: Georgia, Serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family:Impact, Charcoal, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:Century Gothic, sans-serif;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family:'Arial Black', Gadget, sans-serif;
font-family:'Arial Narrow', sans-serif;
font-family:Verdana, Geneva, sans-serif;
font-family:Copperplate / Copperplate Gothic Light, sans-serif;
font-family:Gill Sans / Gill Sans MT, sans-serif;
font-family:'Trebuchet MS', Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent:-0.8em;
font-size:1.5em;
}
p
{
font-size:1.25em;
margin-top:1.25em;
margin-bottom:1.25em;
}
input
{
font-size:1.0em;
}
small
{
font-size:0.75em;
}
span
{
font-style:italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Paragraph. 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>
<blockquote>Blockquote. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<strong>Strong. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</strong>
<ul>
<li>Unordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Ordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<input type="text" name="name" id="name" value="input" tabindex="1" /><br />
<small>Small. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</small>
<span>Span. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
<p class="justified">Paragraph justified. 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>
</body>
</html>
Font combinations test #1
The example below is a good way to test out which web safe font combinations are going to work. You simply need to comment out the fonts you don't want to use from the font-family tags in the CSS. In the case of the headers, you should also consider changing the font-weight to bold. Once you are happy. You need to think about colours. I get my colour combinations from the excellent http://colorschemedesigner.com. I'm going to follow this blog up with a similar example, this time reversing the sans-serif and serif fonts.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Font Combination #1</title>
<style>
body
{
/* font-size:62.5%; */
font-size:80%;
}
h1, h2, h3, h4
{
font-family:Impact, Charcoal, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:Century Gothic, sans-serif;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family:'Arial Black', Gadget, sans-serif;
font-family:'Arial Narrow', sans-serif;
font-family:Verdana, Geneva, sans-serif;
font-family:Copperplate / Copperplate Gothic Light, sans-serif;
font-family:Gill Sans / Gill Sans MT, sans-serif;
font-family:'Trebuchet MS', Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family:'Times New Roman', Times, serif;
font-family: Georgia, Serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent:-0.8em;
font-size: 1.5em;
}
p
{
font-size:1.25em;
margin-top:1.25em;
margin-bottom:1.25em;
}
input
{
font-size:1.0em;
}
small
{
font-size:0.75em;
}
span
{
font-style:italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Paragraph. 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>
<blockquote>Blockquote. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<strong>Strong. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</strong>
<ul>
<li>Unordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Ordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<input type="text" name="name" id="name" value="input" tabindex="1" /><br />
<small>Small. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</small>
<span>Span. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
<p class="justified">Paragraph justified. 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>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Font Combination #1</title>
<style>
body
{
/* font-size:62.5%; */
font-size:80%;
}
h1, h2, h3, h4
{
font-family:Impact, Charcoal, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:Century Gothic, sans-serif;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family:'Arial Black', Gadget, sans-serif;
font-family:'Arial Narrow', sans-serif;
font-family:Verdana, Geneva, sans-serif;
font-family:Copperplate / Copperplate Gothic Light, sans-serif;
font-family:Gill Sans / Gill Sans MT, sans-serif;
font-family:'Trebuchet MS', Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family:'Times New Roman', Times, serif;
font-family: Georgia, Serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent:-0.8em;
font-size: 1.5em;
}
p
{
font-size:1.25em;
margin-top:1.25em;
margin-bottom:1.25em;
}
input
{
font-size:1.0em;
}
small
{
font-size:0.75em;
}
span
{
font-style:italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Paragraph. 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>
<blockquote>Blockquote. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<strong>Strong. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</strong>
<ul>
<li>Unordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Ordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<input type="text" name="name" id="name" value="input" tabindex="1" /><br />
<small>Small. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</small>
<span>Span. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
<p class="justified">Paragraph justified. 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>
</body>
</html>
Monday 25 October 2010
Centre a DIV, interpret font sizes and snipplr
I have been subscribed to http://snipplr.com recently. It's very good. It's a sort of social networking site for coders. Below are a couple examples of things I got from the site this morning contained in the same page. The first technique is how to centre a DIV inside another DIV. Very useful.
The second technique is to set the font size within the body CSS body reference to 62.5%. The result is that when you apply font-size:1em later, this translates to 10px. font-size1.2em is equal to 12px etc. Very useful too.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centre a DIV inside a DIV</title>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#outer
{
margin:0 auto;
width:800px;
background:#000000;
}
#inner
{
width:50%;
margin:auto;
background:#FF0000;
}
p
{
font-size:1.2em;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"><p>Hello World!</p></div>
</div>
</body>
</html>
The second technique is to set the font size within the body CSS body reference to 62.5%. The result is that when you apply font-size:1em later, this translates to 10px. font-size1.2em is equal to 12px etc. Very useful too.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centre a DIV inside a DIV</title>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#outer
{
margin:0 auto;
width:800px;
background:#000000;
}
#inner
{
width:50%;
margin:auto;
background:#FF0000;
}
p
{
font-size:1.2em;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"><p>Hello World!</p></div>
</div>
</body>
</html>
Wednesday 20 October 2010
Basic font stack
Here is an example of a basic font stack using tried and tested design principles. They are a great start to a web design. Essentially, all you would need to do for your own site is change the font-family references with the CSS to fonts you like and you are away. Then you can start addressing colour, but the sizes are a good idea to keep, maybe just play with the overall font-size within the body declaration. Have fun!
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font stack Using Design Principles</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
line-height:140%;
font-size:85%;
}
h1, h2, h3, h4
{
font-family:Georgia, Times New Roman, Times, serif;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent: -0.8em;
font-size: 1.5em;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
input
{
font-size: 1.0em;
}
small
{
font-size: 0.75em;
}
span
{
font-style: italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Pellentesque habitant morbi <small>tristique senectus et netus et malesuada</small> 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>
<p class="justified">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <strong>Vestibulum tortor quam,</strong> 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.</p>
<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font stack Using Design Principles</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
line-height:140%;
font-size:85%;
}
h1, h2, h3, h4
{
font-family:Georgia, Times New Roman, Times, serif;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent: -0.8em;
font-size: 1.5em;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
input
{
font-size: 1.0em;
}
small
{
font-size: 0.75em;
}
span
{
font-style: italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Pellentesque habitant morbi <small>tristique senectus et netus et malesuada</small> 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>
<p class="justified">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <strong>Vestibulum tortor quam,</strong> 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.</p>
<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</body>
</html>
Thursday 16 September 2010
Simple layout #9
This one is very similar to Simple layout #8 (hope it's not a trend), but for 2 major differences. I have included a background image and colour in the header. I have increased and broadened the font of the header. These 2 small differences are to fall in line with current website trends.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #9</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#708090;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1
{
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:4em;
}
h2
{
text-align:left;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:3.4em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4145/4991020425_220a3fe3c4.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
<div id="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<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>
</div>
<div id="highlights">
<div class="highlight">
<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.</p>
</div>
<div class="highlight">
<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.</p>
</div>
<div class="highlight">
<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.</p>
</div>
</div>
<div id="footer"><p>This could be a very long footer.</p></div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #9</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#708090;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1
{
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:4em;
}
h2
{
text-align:left;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:3.4em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4145/4991020425_220a3fe3c4.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
<div id="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<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>
</div>
<div id="highlights">
<div class="highlight">
<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.</p>
</div>
<div class="highlight">
<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.</p>
</div>
<div class="highlight">
<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.</p>
</div>
</div>
<div id="footer"><p>This could be a very long footer.</p></div>
</div>
</body>
</html>
Thursday 19 August 2010
How to add interesting fonts to your page
You must have seen websites where the title or main text had a great font and thought, that's what I want for my site. Well here is how to do it.
See demo.
The first thing you need is to find the font that you want to use. I would recommend sites such as http://openfontlibrary.org/ Here at least you shouldn't get into licensing trouble. Once you have identified the font you'd like to use, you need to download it. You will probably get a .ttf file which is fine.
Not all browsers handle fonts in the same way so you need to have multiple formats of the font and the necessary code to embed it in your page reliably. To do this we use fontsquirrel fontface generator at http://www.fontsquirrel.com/fontface/generator. Check the 'Agreement' box first. Click on the 'Add fonts' button and upload your font. You will then be returned with a kit. The kit contains the fonts in all the formats you need and the necessary CSS code you need to embed it in your page.
Here is an example of the results:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Nice fonts</title>
<style type="text/css">
@font-face
{
font-family: 'KarmaRegular';
src: url('fonts/karma-webfont.eot');
src: local('☺'), url('fonts/karma-webfont.woff') format('woff'), url('fonts/karma-webfont.ttf') format('truetype'), url('fonts/karma-webfont.svg#webfont4iIQLJby') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-family: 'KarmaRegular';
font-size:4em;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
See demo.
The first thing you need is to find the font that you want to use. I would recommend sites such as http://openfontlibrary.org/ Here at least you shouldn't get into licensing trouble. Once you have identified the font you'd like to use, you need to download it. You will probably get a .ttf file which is fine.
Not all browsers handle fonts in the same way so you need to have multiple formats of the font and the necessary code to embed it in your page reliably. To do this we use fontsquirrel fontface generator at http://www.fontsquirrel.com/fontface/generator. Check the 'Agreement' box first. Click on the 'Add fonts' button and upload your font. You will then be returned with a kit. The kit contains the fonts in all the formats you need and the necessary CSS code you need to embed it in your page.
Here is an example of the results:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Nice fonts</title>
<style type="text/css">
@font-face
{
font-family: 'KarmaRegular';
src: url('fonts/karma-webfont.eot');
src: local('☺'), url('fonts/karma-webfont.woff') format('woff'), url('fonts/karma-webfont.ttf') format('truetype'), url('fonts/karma-webfont.svg#webfont4iIQLJby') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-family: 'KarmaRegular';
font-size:4em;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Subscribe to:
Posts (Atom)