Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /homepages/19/d364350176/htdocs/CV/wp-content/plugins/seo-ultimate/modules/class.su-module.php on line 1195

Warning: session_start(): Cannot start session when headers already sent in /homepages/19/d364350176/htdocs/CV/wp-content/plugins/simple-ajax-contact-form/sacf.php on line 299
Posts by admin | Simon Lockyer
best websites of the world

FRONT END DEVELOPER/
WEB DEVELOPER/
WEB DESIGNER/
LONDON/ SURREY/

Author Archives: admin

Great google web font combinations – Part 2

A few months ago I wrote a blog post showing 10 good combinations of google web fonts. The feedback and views of the blog post were outstanding so I have decided to write a part 2 showing some other great google web font combinations. I hope you enjoy it and do let me know if you have any suggestions!

Dosis & Ubuntu

Dosis_Ubuntu

Bitter & Source Sans Pro

bitter_Source

Bree Serif & Open Sans

Bree_Open

Playfair Display & Muli

playfair_Muli

Sansita One & Kameron

Sansita_Kameron

Nixie One & Ledger

nixie_ledger

Molengo & Lekton

molengo_Lekton

Sintony & Libre Baskerville

sintony_Libre

Monda & offside

monda_offside

AbeeZee & Grand Hotel

abeezee_Grand

Search

Social

Surrey Web Design and Development

surrey

I try to offer the very best award winning website services to my clients as i can. I try to operate on a negotiation/barter system when taking on new work with clients based in Surrey. I like to serve and help my local community and in doing so providing the most affordable web design prices I can. If you need a new website and have a service to offer you think I may benefit from please don’t hesitate to contact me, no matter what the service is.

Every website i create is bespoke to the individual client, meaning there needs to be a good understanding relationship between the web designer (me) and the client (you). I invoke the use of the very best and innovative techniques in creating my website to ensure that all of the clients needs are met.

I have recently been nominated for 6 web design awards. I try to transfer my award winning design techniques to my clients meaning they end up with only the best web design, which in turn could win awards.

Why not contact me to discuss your needs further?

Contact me

Search

Social

Free Arrow Vector Icon Pack

Since i have recently been releasing icon packs for free for public and commercial use the feedback and comments have exceeded any of my expectations. Thank you all for your kind words, i will keep designing these and releasing them while i can! This week i have designed an arrow icon pack. In the zip folder you will find the origional ai and eps along with a pdf! I hope they are of some use to you! If you would like to suggest a topic for my next icon pack drop me an email or a comment!

You can download a zip file of the arrow vectors here.

arrow-vector-icon-pack

Download Arrow Vector Icon Pack

Although my icon packs are completely free for personal use, if you would like to use them for commercial use or would like to make a small donation so that i can carry on producing free content you can do so below through paypal.




Search

Social

Free Weapons Vector Icon Pack

Recently i have been creating a few different icon packs for free download, my previous pack of weather icons had such a good reception i have decided to create a new pack of weapon icons. This includes swords, shields, spears and axe’s. Below you can download the vectors, ai and eps format are included, enjoy and let me know your thoughts!

weapons

Download

 

Although my icon packs are completely free for personal use, if you would like to use them for commercial use or would like to make a small donation so that i can carry on producing free content you can do so below through paypal.




Search

Social

Best Free Fonts – All Time Top 10

All designers have their favourite fonts that they use on a regular basis. Recently there are a group of 10 fonts that i have been using and there free! I have compiled this list of free fonts with links so that anyone who wants to download them for free can. Whilst some may argue paid for fonts add that extra bit of uniqueness to a design sometimes free fonts designers have created are just as good or even better. Please always try to credit or donate to the designer if you use there assets a lot, after all they created them for your pleasure!

Aleo Free Font

Aleo

Aleo Free Font is a contemporary typeface designed as the slab serif companion to the Lato font by Łukasz Dziedzic. Aleo has semi-rounded details and a sleek structure, giving it a strong personality while still keeping readability high. The family comprises six styles: three weights (light, regular and bold) with corresponding true italics.

By: Alessio Laiso

Download – Aleo

Nexa Free

Nexa

Nexa Slab is a geometric slab serif font whose design is based on the already popular best-seller Nexa.
The font family contains 3 basic forms: italics, obliques and uprights, each of which has 8 different weights. This visual richness makes it the ideal slab serif font family for the web as well as for print, for motion graphics, logos, t-shirts and so on. It is also great for headings, fitting nicely with both small and large typesetting text blocks.

Download – Nexa

Prime free techy

Primefreetechy

Prime is a simple typeface with a techy feel and a strict, geometric origin. I wanted to create something that offers great readability in various sizes yet still offers enough subtle differences to stand out. Basic and somewhat neutral, it can be used in a variety of ways from distinct titles to body text

By: Max Pirsky

Download – Prime

Casper

casper

By: Michael Chereda

Download – Casper

Sreda slab serif

sreda

By: Elena Kowalski

Download – Sreda Slab

Museo

museo

Download – Museo

Raleway

Raleway

Raleway is an elegant sans-serif typeface, designed in a single thin weight. It is a display face that features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than it’s neo-grotesque inspired default character set.

Download – Raleway

Lobster

Lobster

Download – Lobster

Infinity

infinity

Infinity free font, by designer Tarin Yuangtrakul, was created from the simplicity of lines and curves with round corner and cap. The name comes from guides for creating, they are similar to number 8 and infinity symbol.

Download – Infinity

Oranienbaum

Oranienbaum

Oranienbaum free font — it is a font that was designed for almost two years, two people, and then made public to everyone.

Download – Oranienbaum

Search

Social

Free Illustrator Trees Vector

trees

Recently i have been playing with Adobe Illustrator CS6 and i drew up a tree with a few different effects, as you can see in the image above. I have included the ai in the download for anyone to play with or use below!

Download

Search

Social

How to flip a div with css3 and jQuery – Tutorial

logo front
logo back

Recently I have had many comments on how I create the flipping logo at the top of this website. If you haven’t seen the effect just hover over the badge below the title. It’s fairly simple to do with CSS3 so I have written this tutorial so you guys can see how it’s done.

Planning

First of all lets just talk about the theory of what we are going to do. We need two divs that hold the two images, for the tutorial I am just going to use my logo. We need to absolutely position the divs so they are “stacked: directly on top of each other so it looks like there is only one logo. Then the magic of CSS3 transitions and transforms will give us the final effect with a little help from jQuery. Lets get started.

HTML

The following html has a container div then two divs inside it which hold the two images. The idea is that the div class “back” will be positioned behind the div with class “front”. We will then flip the divs so that the front becomes the back and the back becomes the front, with me so far?

<div class="hover panel">
	<div class="front">
		<div class="pad">
			<img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-front.png" alt="logo front" />
		</div>
	</div>
	<div class="back">
		<div class="pad">
			<img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-back.png" alt="logo back" />
		</div>
	</div>
</div>

CSS

The CSS is the really important part in this and actually its really simple.  We first make sure the divs with the images are stacked perfectly on top of each other. Like so:

.panel {
	margin: 0 auto;
	width: 130px;
	height: 130px;	
	position: relative;
	font-size: .8em;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
}
.panel .front {
	position: absolute;
	top: 0;
	z-index: 900;
	width: inherit;
	height: inherit;
	text-align: center;
}
.panel .back {
	position: absolute;
	top: 0;
	z-index: 800;
	width: inherit;
	height: inherit;
}

We then need to bring it all together and add the css3 rotation values to make the divs flip. As I wanted the image to flip horizontally we only need to modify the Y axis values (its quite fun to play with both the X and Y axis values to see what effect you can come up with).

First of all the front div we need to se the Y axis value to 0 as its being shown. The back div we need to set to be -180 as we are only flipping the div half way round to show the other.

Then its very easy to add the effect, just reverse the rotation values, so the back’s Y value becomes 0 and the front divs Y value becomes -180. It may sound confusing but its very easy. See below for the all of the CSS.

.panel {
	margin: 0 auto;
	width: 130px;
	height: 130px;	
	position: relative;
	font-size: .8em;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel .front {
	position: absolute;
	top: 0;
	z-index: 900;
	width: inherit;
	height: inherit;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.panel.flip .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.panel .back {
	position: absolute;
	top: 0;
	z-index: 800;
	width: inherit;
	height: inherit;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.panel.flip .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}

 

jQuery

All we need to add now is the jQuery that adds the class “flip” to the first div. This actives the css3 code and makes the div flip, like so:

<script type="text/javascript">
  		$(document).ready(function(){
  		   // set up hover panels
  		   // although this can be done without JavaScript, we've attached these events
  		  // because it causes the hover to be triggered when the element is tapped on a touch device
  		$('.hover').hover(function(){
  			$(this).addClass('flip');
  		},function(){
  			$(this).removeClass('flip');
  		});
  	});
 </script>

Round Up.

Really the effect is very simple. But I love minimalist design so little effects like this that aren’t always noticed but add a bit of flare are a great addition.  The full page of HTML and CSS is below. If anyone needs the files just drop me a message.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flip the div</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  	<script type="text/javascript">
  		$(document).ready(function(){
  			// set up hover panels
  			// although this can be done without JavaScript, we've attached these events
  			// because it causes the hover to be triggered when the element is tapped on a touch device
  			$('.hover').hover(function(){
  				$(this).addClass('flip');
  			},function(){
  				$(this).removeClass('flip');
  			});
  		});
  	</script>
	<style>
		.panel {
			margin: 0 auto;
			width: 130px;
			height: 130px;	
			position: relative;
			font-size: .8em;
			-webkit-perspective: 600px;
			-moz-perspective: 600px;
		}
		/* -- make sure to declare a default for every property that you want animated -- */
		/* -- general styles, including Y axis rotation -- */
		.panel .front {
			position: absolute;
			top: 0;
			z-index: 900;
			width: inherit;
			height: inherit;
			text-align: center;
			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;
			-moz-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;
			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		.panel.flip .front {
			z-index: 900;
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
		}
		.panel .back {
			position: absolute;
			top: 0;
			z-index: 800;
			width: inherit;
			height: inherit;
			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateY(-180deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;
			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		.panel.flip .back {
			z-index: 1000;
			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform: rotateX(0deg) rotateY(0deg);
		}
	</style>
</head>
<body>
	<div class="hover panel">
		<div class="front">
			<div class="pad">
				<img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-front.png" alt="logo front" />
			</div>
		</div>
		<div class="back">
			<div class="pad">
				<img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-back.png" alt="logo back" />
			</div>
		</div>
	</div>

</body>
</html>

Search

Social

CSS Sticky Footer – Making your website footer stay at the bottom of the page tutorial

Many times have I seen a beautifully designed website that is pixel perfect until you stumble on a page that doesn’t have quite enough content on the page. As a result the footer is sitting in the center of the page, it just looks silly and out of place. There have been many versions of this code circulating on the internet but this is the one I use on almost all of my projects to make sure those pesky footers stay at the bottom where they belong.

HTML

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

CSS

The following CSS really doesn’t need to much explaining its quite easy. The only thing you will need to change is the padding on the main div and the height of the footer div. This should be set to whatever height your footer is at the moment, but make the values match or it wont work.

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

IE Fix

As always IE isn’t very happy with that code.  We just need to change the style formatting on the wrap div and everything should work great.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

I haven’t included a download of the project but if anyone would like it I can always add a link just drop me a message.

Search

Social

Free Weather Vector Icon Pack

I have been using vector icon packs for years and I have always said to myself one day I will create my own and release it to the world to enjoy like so many other have done before me. Well today is the day; I have created a vector icon pack of weather illustrations. I have saved the vectors down to an .ai file as well as an .eps file. I hope you enjoy it and it is of some use to you!

Below is an example graphic of what you can get your hands on.

You can download a zip file of the vectors here.

vector-icon-pack

Download Vector Icon Pack

Although my icon packs are completely free for personal use, if you would like to use them for commercial use or would like to make a small donation so that i can carry on producing free content you can do so below through paypal.




Search

Social

CSS em Units Explained

Most web designers and web developers have relied for years on pixel values. I for one didn’t really know allot about using em values. This article will hopefully try to explain what em units are and how you could use them in your projects.

What exactly is an em value?

Formal definition from of the unit

“Equal to the computed value of the ‘font-size’ property of the element on which it is used.”

So if we have set the font size of an h1 element to 20px and then we used the following code:

H1{
	font-size: 20px;
	line-height: 1.2em;
}

this would set the line height to 20% bigger than the font size set. So it would be 24px high.

But what if you don’t set the size of your font? Generally in your CSS tree you will have set font size’s at some point, I don’t really see how you cant! But if no font size has been set the size on an em unit will result to 16px.

The only way you can learn is by doing! So lets try one more.

Say we have a div with a font size set to 20px how would you go about setting the width and the height of the div to be the same as 100px? Well 100 / 20 = 5 so you would set the height and the width of the div to be 5em like so:

.div {  
    font-size: 20px;  
    width: 5em;  
    height: 5em;  
}

A little tip – comments

Recently I have completed some work in collaboration with some other web designers and developers. To be polite the codes comments were particularly light. Its not really that necessary to comment CSS code quite as much as if you were writing in PHP or C# however in the case of using em it is really helpful. For the example above I like to comment like the example below. This really helps after a while to get your head round em units and you will be grateful when you go back to look at your CSS file in a few months time!

.div {  
    font-size: 20px;  
    width: 5em; /* 100px / 20px = 5em */
    height: 5em; /* 100px / 20px = 5em */
}

Round up

I found it quite hard to get into the habit of using em units after using pixels for such a long time. However the new releases of the popular css frameworks, Foundation.Zurb and Bootstrap include the use of em units.

While current trends in web design make use of responsive layouts I believe the use of pixels and percentages are necessary for setting container sizes etc. However the use of em units become useful when setting sizes in relation to fonts.

Search

Social


Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /homepages/19/d364350176/htdocs/CV/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048