30 March 2008
If you've been here before you might have noticed the new design. I got inspired yesterday and thought I should have one if those hip dark wallpaper pattern inspired blog designs.
If you still see my old default design, the Tech Blue
, just click Dark Pattern
at the top of the page.
I started off by finding a suitable pattern for the background. I found this one:
... at theinspirationgallery.com, inverted it and used curves to make the pattern a dark grey.
To increase the readability I added a see-through (40 % opaque) black to the main section using the following CSS3 declaration:
#main {background-color: rgba(0, 0, 0, 0.4);}
This is what it should look like:
So far, only Firefox 3 and Safari 3 have support for semi-transparent colours (RGBA/HSLA), but I think the text is fairly readable even if you don't get the darker background. Hopefully the number of Firefox 3 users will increase to about 20 % when it is released this summer, thanks to the auto-update feature of Firefox 2.
I've also changed the font to Lucida Sans Unicode (Lucida Grande on the mac), inspired by John Lilly's blog. I decided to use it for both titles and text.
And here's what a quote looks like:
I may not have gone where I intended to go, but I think I have ended up where I needed to be.
Douglas Adams
Overall I'm really pleased with the new look. Do shout if you find any annoying bugs.
Labels: CSS, web design
20 December 2007
This is seriously good news for everyone who is planning on making a website in the coming 10 or so years.
What does it mean? Well, here are a few things:
- The IE team must have started working on IE8 roughly at the same time as they started work on IE7.
- Finally, IE will support CSS min- and max-widths. (Which I use on this blog to regulate the width of this main column.)
- Loads less IE layout bugs: Web designers and web developers will be happier at work in the coming decade.
However, there is a big however. The IE team speaks of some kind of switch to make IE8 work in IE8 Standards Mode
. Let's just hope they didn't choose a non-standard way for websites to request standards mode... (I.e. I hope they're going to stick with the transitional vs. strict doctypes for quirks mode vs. standards mode.)
Labels: browsers, CSS, internet explorer, web design
21 October 2006
Some of these CSS3 previews show just how far behind Internet Explorer is when it comes to the latest and greatest in CSS3. Nice features such as HSLA colours are already being implemented by other browsers!
HSLA colours are a very nice thing indeed. Instead of defining a colour as Red, Green and Blue, web designers of the future will be able to choose Hue, Saturation and Lightness, as well as Alpha, an opacity value.
That means it will be much easier to guess-pick colours when you're coding. Also, making a colour semitransparent will be a very nice possibility for backgrounds. (No more semitransparent 1px png graphics!)
Then we have rounded borders, which is already being used around the web, since it degrades nicely (into square corners).
Another promising feature of CSS3 is columns. Currently, only Mozilla browsers (Firefox 1.5+) support this in any way. The idea is that you will be able to set a column width as well as spacing, and the browser will calculate how many columns to fit across the screen. Alternatively, you can define how many columns you want, and the browser will adjust their width to fit the space provided. A List Apart has a very nice article on the subject.
If you're really intersted, have a look at what the W3C are working on right now, the different modules and their specs. CSS3 is still work in progress, so only a couple of the modules are even close to the recommended status. (I.e. implement now!
status.
Labels: browsers, CSS, firefox, internet explorer, mozilla, web design
30 July 2006
After redesigning my photography website today, I noticed that Opera 9 has a fairly serious rendering bug:
I don't understand what I've done to make it do that... The CSS for H1 is here:
h1 { font: 220% Georgia, "Gill Sans MT", "Trebuchet MS"; margin: 0.5em; letter-spacing: 0.25em }
h1 a { border-radius: 0.5em; -moz-border-radius: 0.5em; padding: 0.2em 0.4em; background: #eee; opacity: 0.5 }
h1 a:hover { opacity: 0.65 }
Maybe Opera applies
h1 * { display: random }
by default?
Labels: browsers, CSS, opera, web design
20 February 2006
The bug for rgba and hsla css colours has just been fixed on the Firefox trunk
. That means it will be released with Firefox 3, in about a years time.
Can't wait till we can start playing around with semi-transparent colours... Also, the hsl colour model is very nice – making it possible to think in hue, saturation and lightness when choosing colours. Very nice :-)
It's just a shame that Firefox 3 is so far away.
Edit: Fixed an error. (Had written brightness instead of lightness.)
Labels: browsers, CSS, firefox, mozilla, web design
19 November 2005
I have created a few alternative colour themes/style sheets. Just for fun really. (Choose your colour at the top of the page.) Your browser should remember which one you had selected on your last visit.
I've also moved all the CSS out into sepearate stylesheets to reduce the amount of space used on my webspace, as well as to make design tweaks simpler in the future.
Labels: CSS, web design
01 October 2005
Fini Alring has a great demo of CSS3 columns. It's making me drool. For those who don't have Firefox 1.5 beta there are screenshots.
Labels: CSS, firefox, web design
22 September 2005
After having played about with a three-column CSS layout, I decided to use the design for my blog.
So, here's the result! There may be some minor polishing work left to do, but I think I'm mostly done.
I used Firefox for testing while I was building the design. Then I checked the result in Opera (no problems) and lastly in Internet Explorer. I made one small adjustment to the CSS for IE, in order to make links the right colour. (It seems IE doesn't understand the inherit value for links.) Something I decided not to do for IE was swap the max-width property (which IE doesn't understand) of the posts for the width property. Doing so would break the scalability of the design. I'd rather make it clear to users of Internet Explorer that they're using an outdated browser...
So, If you're reading this in Internet Explorer, and wondering what this design really should look like - try Firefox instead. You'd be doing yourself, me, and every single web designer in the whole world a huge favour.
I also added a favicon for anyone who may have bookmarked the site.
Update: Just for the heck of it I made a semi-transparent white PNG image for the background of links when hovered. That way I don't need to find different suitable hover colours for the different background colours. Also, if I want to change the colour-scheme later on it will be much easier.
Labels: browsers, CSS, firefox, internet explorer, web design
20 September 2005
After having read the first few chapters of Lie and Bos's book Cascading Style Sheets
(3rd ed.) I was inspired to play around a bit with some of the nice things available in CSS.
Unfortunately many of these nice CSS features (such as the sibling or adjacent selector - me wants it very much!) don't work at all in Internet Explorer 6.
Anyway, I put together a three-column layout based entirely on CSS, which a) is completely based on the users default font size and b) makes use of the full screen width. Actually, to my surprise, the basic layout seems to work quite OK even in rusty old IE6. Here's what I've put together so far. Feel free to use all or parts of it if you should want to.
Can't wait 'til the standards compliant browsers have a more substantial market share, so we can start using adjacent/sibling selectors seriously. They are truly wonderful for making good-looking typography.
Comments on this design, or other advanced CSS stuff, are more than welcome.
Oh. And one other thing I'm looking forward to play with is CSS3 colours, which will be allowed to be semi-transparent: colours with an opacity value. Sounds pretty neat, eh? Can only imagine it will be totally so.
Update 2005-09-26: As you may have noticed, I decided to use the three-column layout I was playing with here as the base for my new blog design...
Labels: browsers, CSS, internet explorer, web design
30 July 2005
Chris Wilson of the IE Team has just posted a list of bugs that have been fixed for Beta 2 of IE7. It's a list which will greatly reduce the number and severity of headaches within the web developer community. Check it out:
In IE7, we will fix as many of the worst bugs that web developers hit as we can, and we will add the critical most-requested features from the standards as well. Though you won't see (most of) these until Beta 2, we have already fixed the following bugs from PositionIsEverything and Quirksmode:
- Peekaboo bug
- Guillotine bug
- Duplicate Character bug
- Border Chaos
- No Scroll bug
- 3 Pixel Text Jog
- Magic Creeping Text bug
- Bottom Margin bug on Hover
- Losing the ability to highlight text under the top border
- IE/Win Line-height bug
- Double Float Margin Bug
- Quirky Percentages in IE
- Duplicate indent
- Moving viewport scrollbar outside HTML borders
- 1 px border style
- Disappearing List-background
- Fix width:auto
In addition we've added support for the following
- HTML 4.01 ABBR tag
- Improved (though not yet perfect) <object> fallback
- CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
- CSS 2.1 Fixed positioning
- Alpha channel in PNG images
- Fix :hover on all elements
- Background-attachment: fixed on all elements not just body
I'm looking forward to seeing how IE7 will render my web gallery, which makes use of floats and fixed-position divs.
I'm also very much looking forward to the day when we can make websites from scratch and see our CSS code just work in all the major browsers... And the following may sound strange coming for a Firefox addict and advocate, but I truly hope that Microsoft puts a huge marketing campaign behind IE7 once it has shipped so it as quickly as possible replaces IE6 (where still in use) on Windows XP. Firefox will have the older Windows versions for lunch, and through continuous innovation it will probably keep growing on the XP & Vista versions too.
Update: Now if only Gecko would get support for soft hyphens, I would be a truly happy geek...
Labels: browsers, CSS, firefox, internet explorer, mozilla, web design
30 May 2005
Just received my (free!) copy of Håkon Lie and Bert Bos's book on Cascading Style Sheets (Cascading Style Sheets - Designing for the Web, 3rd ed.). Very nice!
I was sent a copy for free in exchange for a user review over at amazon.com, which I feel is a great deal :-)
This (the third) edition has been updated to fully cover the details of CSS 2.1. Without having read the book properly yet, it seems to be a very useful and complete guide and reference.
Beforehand I thought the book would only be a technical (code-centered) guide to CSS, but it turns out to contain many practical design tips as well. I would say it is useful for both beginners and advanced website designers. (I thought I knew basically what there was to know about CSS, but the book has already tought me several new and useful things.)
The book is split into logical sections, and for each CSS property discussed there are symbols indicating which browsers support the property in question.
Reading this reminds me how much I love using stylesheets for website design...
Ok, this is getting a little out of hand here. I'll try to think of something negative and add it to this post at a later date... :-)
Labels: CSS, web design
Full-text blog feed
