It's possible to make text looked blurred using just CSS3. See the examples below, just hover over the first bit of text to see the possibility of using blurred text as a hover state.

Some blurred text

Some blurred text

Example:

HTML:

<h1 class="blurred">Blurred text</h1>

CSS:

h1.blurred {
	color: #FFF;
}
h1.blurred:hover {
	cursor: pointer;
	color: #666!important;
	text-shadow: 0 0 5px #444;
}

The colours need to be selected carefully, as the shadows are often a bit lighter than the foreground text colour. Shadow size also plays a role. 5px seems to be effective, but 10px can wash the colour out.

To apply the effect to a block element, you'll need to use the box-shadow property instead of the text-shadow property, but otherwise it's the the same.

For more effects, you could apply opacity to make the text a little see through and see how that works out!

If you find this useful, please check out my portfolio site.

There are just some things that no front end developer should ever forget. There are so many things that often fall to the bottom of the list when developing something for the web, none more so than the ones I'll be highlighting here. It's often easy to forget small details, but when they're in they could make a big difference, especially when it comes to SEO and accessibility.

Titles

Often in Firefox, I find myself with quite a few tags but some of them just show 'Untitled' which just isn't very useful. Some sort of identification is always welcome by the user, whether they've minimized or tabbed your page.

Background color

This is a trivial issue and probably less than 0.1% of people will ever even notice it, but I will and it's a commonly forgotten bit of CSS or HTML when white backgrounds are used.

[ read more... ]

Alex Mauzon has come up with a great way to combat the omission of the :first-child and :last-child pseudo classes in IE6. Using CSS expressions, you can run a simple check for items that need to adhere to the same rules.

Where you would use the following for standards compliant browsers:

element:first-child {
  background-color: red;
}

For IE6, you can simply use the following to check for a previous sibling:

element {
  background-color: expression(this.previousSibling==null?'red':'green');
}

The above checks for a previous sibling and where there are none, the background color is red, where there are previous siblings (every other item), the background color is green. Similarly, you can just use the following to re-create the :last-child pseudo-class:

[ read more... ]

Internet Explorer 6 is possibly the single biggest pain in my life. I can cope with anything else that's thrown at me, but development time being doubled, if not tripled, because of IE6 is just something that really tests my love of web development.

I deliberately didn't develop for IE6 when building this blogging platform because I feel that I have a responsibility to promote better browsing. As a web developer, I do understand the need for backwards compatibility, but when a new version is released, it should be embraced. Plus, it's a FREE upgrade, whether you go from IE6 to 7, to Firefox, Opera or even Safari! The fact that so many people still use IE6 is a bit of a joke. It's around 10 years old, has well known security issues, is poor at doing what it's supposed to do and just simply doesn't work!

Forget the box model issues, forget the JavaScript issues and the lack of support for PNGs and even the ridiculous reliance on ActiveX controls, the 3 pixel bug is possibly the dumbest and most annoying thing that IE has in it's code. These 3 pixels that can quite simply ruin a perfect layout. 3 pixels that go unnoticed with dummy content throughout development and testing, but surface as concerns from clients when real content is introduced.

There are some 'accepted' fixes, but I seem to have stumbled across another!

[ read more... ]

As a follow up to my previous post on stopping development for IE6, I thought I'd share my knowledge of all the 'dirty' hacks that I'd picked up for IE6 and IE7.

They're not really 'dirty', but they're not always considered to be the best method because they cause your CSS to fail validation. For me however, they're just as effective as the conditional comment that people use to exploit IE's 6 & 7 to behave in the way they like.

I have used them many times, but have recently tried to switch to the conditional comment method. I do use them during development though, because I can just dump them into the CSS and HTML through the Firebug toolbar and I don't have to constantly switch between stylesheets

[ read more... ]

That's it. No more. I don't have the time or patience to do it anymore.

Internet Explorer 6 will no longer be developed for. Well, by me anyway. Some of my most recent projects have doubled in development time because of IE6. As a result of this wasted time, I've decided to stop and just add a bit of code to each of the new builds I do.



The above shows how it will appear. A simple bit of code that only IE6 reads and displays. It may seem 'lazy' on my part, but in almost any other industry, doubling your work load just for a shrinking demographic to make the most of your product, you'd be asked to phase it out as soon as possible

[ read more... ]