WNAS

logo wnas in data url

psst, one more way to get the logo without any images... And again, let's not worry about IE. They will get it right sooner or later...

Just to have some fun I tried to build a mockup of my logo in html, without images...

wnas logo in css3

I haven't done anything to make it work in IE and probably won't. If I do this, the logo will be an image in IE.

<em><i><span>wnas logo in css3</span></i></em>

I am still in doubt whether I should do this, as the css isn't exactly IE friendly. But for those of you who want to see it and maybe learn a thing or two, here is my code WITH explanations...

Code, with comments

We begin with the em that is our outer ring.

#homeTest {
	width: 98px;
	height: 98px;

We give it a width and height...

	float:left;

And we float it to the left to get it to accept a width and height.

	font-size: 1px

we hide the text in plain sight.

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

three different ways to say border-radius.

We now move onto the inner white circle.

#homeTest i {
	background-color: #fff;
	border: 1px solid #fff;

This one is the only one with different colors.

	height: 59px;
	width: 60px;

Set some width and height.

display: block;

A block accepts width and height as well.

	margin: 20px 19px 20px 20px;

Not quite symmetrically my logo is, hence the different margins...

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

And again border radius in three different accents

#homeTest i span {
	height: 36px;
	width: 36px;
	display: block;

width, height, yada yada...

	margin: 8px 9px 8px 8px;

Not quite symmetrically my logo is, it really isn't.

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

And again three different ways to say border-radius. This is getting annoying people...

	text-align: center;

Set text in center.

	color: #39c;
}

And let it blend into the background. At last we set the colors of the outer and very inner circle, as they are the same.

#homeTest, #homeTest i span {
	border: 1px solid #39c;
	background-color: #39c;
}

There you have it, my logo in a couple of lines of css. For IE I could just set up a background image and nullify the borders and background, but why bother...

Css explanation will be published tomorrow

Doubled Float-Margin Bug
Peekaboo Bug
IE 6 Duplicate Characters Bug
Internet Explorer and the
Expanding Box Problem
Guillotine Bug
The Float Model Problem
Three Pixel Text Jog
IE and Italics
Inherited margins on form elements
Quirky Percentages In IE6's
Visual Formatting Model
IE/Win Line-height Bug
IE6 Border Chaos
Disappearing List-Background Bug
Unscrollable Content Bug
Duplicate Indent Bug
Escaping Floats Bug
Creeping Text Bug
Missing First Letter Bug
Phantom Box Bug

Just some CSS3 fun I had this morning on twitter.

h1 ~ div > p span[title^='bo'] strong:last-child { 
	color: red;
}

span[title$=foo] strong:first-child { 
	font-style:italic;
}

span:not([title^='dd']) { 
	font-size:2em;
}

If you feel like it I would like to see the html in the comments...

In this site I use several html5 elements and attributes. One of them is <input type="search" /> which gives me (for instance) a search button on my Iphone. It degrades to an text kinda input so it's backwards compatible.

What it also does is look kinda ugly in safari, with rounded corners and a frigging shadow and so on.

Default rendering in safari 4 os x

Custom rendering

The way to render this is this one line of css:

input[type="search"]{
  -webkit-appearance:textfield;
  /* textfield instead of searchbox */
  border: 1px solid #39c;
  /* and a border of course but that's not relevant :) */ 
}

But for now that's it, on simple line in your css and apple no longers controls the style of your search field and you can style it (semi) consistent over browsers. A complete list of webkit specific styles can be found on Qooxdoo.org.

As I know, one disadvantage is that the search box does not longer appear as the default one in safari. But in my opinion the search box is not in usage as of now, so people are now more baffled by a strange box than they recognize the search box. In the future, however I think that this trick is no longer needed nor wanted.

I just decided to eat my own dogfood and upped wnas.nl to html5. Including some of the new elements like aside, header and such. Please let me know what you think.

NOTE

the design will be done some time next week...

I recently started using @font-face in a major website. The time has come to free ourselves from the shackles of the webfonts. I got the chance to host the fonts on a amazon s3 cloudfront instance. Really fast and with the 'bullet-proof @font-face' solution of Paul Irish I decided to give it a go.

So I started testing and everything looked very promising, even the FOUT wasn't too bad. But when we got around to implementing it in the real templates for the site, my esteemed colleague Maarten found a flaw.

It seems that the .otf file that we use isn't being read properly in Firefox, but instead gives a weird error.

Failed to load source for: http://wnas.nl/fonts/FrescoStd-Normal.otf 

Safari uses the same .otf file and displays it properly. But with this CSS:

@font-face { 
  font-family:'FrescoStdNormalRegular';
  src: url('http://wnas.nl/fonts/FrescoStd-Normal.eot');
  src: local('no local - Fresco Std Normal Regular'),local('no local-FrescoStd-Normal'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.woff') 
    format('woff'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.otf') 
    format('opentype'), 
  url('http://wnas.nl/fonts/FrescoStd-Normal.svg#FrescoStd-Normal') 
    format('svg'); 
}
#test{
	font-family:FrescoStdNormalRegular,courier;
}

FrescoStdNormalRegular,courier;

Firefox, as you can see, just doesn't render the font, can anyone help me and point out what I am doing wrong? Please let me know in the comments...

Update

It seems that this does work on my website, but not locally... Here is a test page where I get two different responses from firefox 3.5.7 on os X 10.6.2.

• on the Imac it says : The resource from this URL is not text: http://wnas.nl/fonts/FrescoStd-Normal.otf
• And the macbook pro says: Failed to load source for: http://wnas.nl/fonts/FrescoStd-Normal.otf

Get the source from here and let me know what happens on your machines through the comments or twitter.

#WIN

Thanks to Jeroen who at least does some research, before asking the rest to help, we have a cause and a solution. On the mozzilla page about font-face it states:

By default, Firefox 3.5 only allows fonts to be loaded for pages served from the same site.

So you should set this in your .htaccess file and you're right as rain.

# example Apache .htaccess file to add access control header
 
<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Thanks everybody for helping, I hope someone else benefits from this as well. I just learned something new, the main reason I really like my job!

A nice and small plugin to create a semanticly step list.

Javascript

(function($) {
  $.fn.extend({
    steps : function() {
      $(this).find('li').each( function ( i ){ 
        $(this).prepend('<span class="step">'+(i+1)+'</span>');
      })
    }
  });
})(jQuery);

$('ol.steps').steps();

CSS

ol.steps li { 
  float: left;
  padding: 5px;
}
ol.steps li span.step { 
  border: 1px solid red;
  -webkit-border-radius: 20px;
  -moz-border-radius: 10px;
  line-height:18px;
  width: 20px;
  height:20px;
  margin-right: 5px;
  display:inline-block;
  text-align:center;
  color:#fff;
  font-weight:bold;
  background-color:#f00;
}

Sure, I have heard about font-smoothing and how not having it, really screws up your rendering. But hearing it and seeing it on your own xp installation is a different thing. I just saw this on my machine and I just had to share it with you.

• Safari on OS-X has the best rendering in my opinion

  

• Rendering the default font, instead of just showing white is better in Firefox 3.5

  

• Even IE 7 does quite a decent job.

  

• As allways, IE 6 screws up bigtime

  

But hey, screw IE6 I say. Not really, just go and check out this possible solution. I am just now testing it and would like to know what you use or prefer..

Right now I am working on a redesign of this site. Since I believe in open communication, I will be doing this redesign live. So no testing behind closed doors and so on.

I will be doing this live for all to see.

Please let me know what you think..
( and yes the theme will be made public... )

Update

strange, Habari just reverted to the default theme overnight, this is why I am back to k2...

Update 2

Happily hacking away at some css, while trying to set up a proper html5 structure. This is very interesting as it is a break from the old div's with id's and classes. That I got covered, now I am in new territory. Wish me luck...