Today I stumbled upon the v2 of Google Web Fonts

WOW, Blown away. Typekit had better watch their toes with this beast!

http://www.google.com/webfonts/v2

Try it now! It’s everything and more! Still “only” 180 fonts but that seems to be growing insanely quick!

As a fun little experiment I’ve decided to make a HTML 5 “landing” site for local search terms.

So along comes the Web Design Chesterfield web site.

This website will focus on SEO Chesterfield, Ecommerce Chesterfield and Graphic Design Chesterfield.

The idea is to really see the difference between using HTML 5 and HTML 4 for SEO Purposes.

From new structure of HTML 5, search engines should be able to take more note on what area of a website is what.

For example, a companies address is wrapped in the <address> tag, the Navigation is wrapped in <nav> and so on.

Anyway, stay tuned for the results of the little test experiment with HTML 5

A few books I want!

If anyone has any reviews about them (if they’re good, bad or terribad!) then let me know

Transition Effect on Resizing Fonts

Elements that have -webkit-transition on them (using “all” or specifying font-size) will utilize that transition when bumping up and down size in the browser.

From testing (on Chrome atleast) the quicker the transition the smoother it is, you’d expect a 4second transition to be smoother, but it isn’t* (this maybe a chrome only issue?).

-webkit-transition: all 1s ease;
-webkit-transition: all 0.5s ease-in-out;

via Forrst: http://forrst.com/posts/WebKit_Transition_on_Resizing_Text-Xvf

Nicer Looking Type

html, body {
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
text-rendering: optimizeLegibility;
}

via Forrst: http://forrst.com/posts/Nicer_looking_type-XPZ

CSS Pinstripe Background (No IMAGE)

@pinstripe-color: #323232;

html {
background-color: #646464;
background-image:
-webkit-gradient(linear, 100% 0%, 0% 100%,
from(transparent),
color-stop(0.15, transparent),
color-stop(0.15, @pinstripe-color),
color-stop(0.50, @pinstripe-color),
color-stop(0.50, transparent),
color-stop(0.65, transparent),
color-stop(0.65, @pinstripe-color),
to(@pinstripe-color));
background-image:
-moz-linear-gradient(100% 0%,
transparent 0.15,
@pinstripe-color 0.15,
@pinstripe-color 0.50,
transparent 0.50,
transparent 0.65,
@pinstripe-color 0.65);
.background-size(60px, 60px);
background-attachment: fixed;
overflow-y: scroll;
}

.background-size(@x, @y) {
-webkit-background-size: @x @y;
-moz-background-size: @x @y;
-o-background-size: @x @y;
background-size: @x @y;
}

Apparently very bad for performance when using a Background, however buttons, header BG’s? Maybe!

via Forrst: http://forrst.com/posts/Pinstripes_with_only_CSS-X6X

Fading Text Transition Effect – Belief – Lie

See Link

via Forrst: http://forrst.com/posts/Belie_and_Lief-XPl

I’ve recently been designing and coding a new website for a project that’s going to be selling a Predator Waterproof Camera and a fantastic new Liquid Images Mask which has been rather fun and exciting.

@Minute44 suggested I try out @font-face that everyone’s been going nuts about recently, and after a few more recent reads I realised that Firefox, Safari and Chrome now supported this CSS 3 property.  Now after I got going I was feeling abit blue with the whole Microsoft Fail, however I quickly came across a fantastic TTF to EOT, which Microsoft IE will use avaliable here for free (online app).  Now if like me you have mostly OTF fonts and need them converting to TTF then this page is for you (another online app, also free).  If you’re on a Mac then FontForge is your poison!

And then just upload your fonts to the same folder as your CSS File and use something like this:

/* — Funky Fontage — */

/* For the Fail Browsers.. IE */

@font-face {
font-family: “Quicksand Book”;
src: url(QuicksandBook.eot);
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: “Quicksand Book”;
src: url(QuicksandBold.eot);
font-style: normal;
font-weight: bold;
}

/* Now for the Pro Browsers *cough*firefox*cough* */

@font-face {
font-family: Quicksand Book;
font-style: normal;
font-weight: normal;
src: url(QuicksandBook.otf) format(‘opentype’);
}

@font-face {
font-family: Quicksand Book;
font-style: normal;
font-weight: bold;
src: url(QuicksandBold.otf) format(‘opentype’);
}

/* — End the Custom Fonts — */

You’ll find a custom font running sexy on IE 7, IE 8, FireFox, Safari and Chrome at the Underwater Camera – Waterproof Camera website.

You can expect to see the next project I undertake to include some nice use of custom fonts for a superb web viewing experience whilst maintaining accessibility, compatability and SEO Friendly Source.