Sunday, 25. November 2007, 03:47:40
filigree, redesign, css3
You may have noticed a few changes with the style of this blog. I wanted to keep the site similar so that it is still recognisable, yet refresh it as I thought it have become a bit stale. I always wanted a image in the header and the main background as it was a bit bland. Not being a graphic artist, I wasn't best suited to drawing something myself.
After going to the Diesel store in Oslo, and later in New York City, I liked the wallpaper they had in parts of the store. It's a bit like your grand mothers wallpaper, but in moderation in looks kind of cool. Then when I saw what Truls (one of our web designers) did with a similar design for our Rock Opera event in San Francisco, I though it'd be an idea to use something similar. Unfortunately it is hard to use as having such a design really hurts your eyes when repeated and trying to read body text. I'm also not the most skilled at turning an image like that into something that can tile. Fortunately, when checking out Chris Messina's blog he had made a similar pattern and went through the trouble of making it tiled. Not wanting that good work go to waste, and as it was released under a Creative Commons licence, I decided to reuse this, to see what it'd look like. The original file can be found here. I wanted a lighter version for the header and a darker, almost black version for the background, so I broke out Preview (I told you I was a great graphic artist) and played with the levels. I'm not 100% happy with the result yet, so I think I'll have to play around with it a bit more to get the colours right. I'd prefer the header image background to be a bit more white, with the detail still visible, and maybe the main background a bit lighter so it can be seen a bit better (the colour isn't set up so well on my monitor however). I don't want to make it too visible as it will effect readability and give all my readers a headache. Hopefully that isn't a problem at the moment?
I also used the CSS3 background-size property to resize the image. This will currently only work in the latest Opera, Safari and Konqueror. I might resize the image later, but it is nice to play around with CSS3 and it is not essential that the image is the correct size. I also used text-shadow to make the drops caps, titles and blog post dates stand out a bit more. You may notice in Safari or Firefox that there are a few rounded corners, but this is the only concession made to the Web 2.0 design style.
I was also never very happy with the tag cloud, which was more or less left the same as the default styling on MyOpera. Instead of the huge text, I reduced each tag size to a similar size (1.4 - 1em) and used various levels of opacity to make the less important tags fade out. Of course this wont work in browsers that don't support this, like IE, but it degrades nicely anyway.
What does everyone think of the changes?
Friday, 12. January 2007, 03:02:10
text-shadow, box-shadow, css3, redesign
...
Although you'll probably see very little change (If I haven't screwed up) I've made a few changes behind the scenes to the CSS on this blog. When originally designing the CSS it was planned to have a image for every article, so I wrote the CSS selector for the drops cap to style the first letter of the paragraph after the articleImage div. This didn't quite work as planned, as I found I didn't always have time to find a image to each post. To keep the drops cap, I had to add an empty div of the same class, and do a nasty inline style to set it to display:none. This was far from ideal and messed up the markup. I've played around with the CSS, and eliminated the need for the extra div when there is no image by chaining the first-letter pseudo class after the first-child pseudo class. It is still not ideal as the different markup in the full article view means I needed a separate rule for that page, and to keep the original rule for when a image is present. I'll work on improving the rule when less tired in the morning. It still works on all the same browsers, and degrades gracefully when first-letter is not supported (IE6 for example).
The other changes may be easier to spot, depending on your browser. I've had text-shadow on the blog for a while, but now I've added border-radius and box-shadow to the CSS from CSS3. These are all currently not supported by the latest release of Opera. As the specs have not been finalised there are a number of issues. First, the browsers that support these properties use the browser specific prepend to the official property name. WebKit adds -webkit- and Mozilla adds -moz-. I've added both of these and the official none-prepended names. This stops the CSS from validating, but there could be arguments that it is a bug in the validator not to validate these. The second issue is that Gecko and WebKit render border-radius differently. Gecko allows one to set different, or no radius for each corner in one statement. WebKit only allows one size but allows more control of the radius by specifying the x and y radius value. Different corner values can be specified in WebKit using -webkit-border-top-right-radius for example. WebKit also renders the corners much more smoothly than Gecko at present. Again, the page degrades gracefully when these properties are not supported, as it looks like it always did before I added them. Opera and other browsers will start applying them when support is added in the rendering engine. If vendor specific prepends are added then I'll add them to the CSS too. I'm hoping the specs will be finalised soon so that the vendor specific versions can be removed from the stylesheet and each browser will use the official names. Places changes have been made include the side bar, about page and the comment boxes, along with a shadow on the main content area.
My next job is to re-write the stylesheet so that it is not based on an existing default layout. This saved time in the beginning, but adds a lot of extra CSS that is needed to override unwanted styles and creates a lot of little issues, including forcing the selectors to be much more specific. It also makes page loading times slower.
[EDIT] I've now added a resize property to the comments textarea. This has been set to only resize vertically, so that it doesn't break the layout. Multicolumn layout also been added to one of the posts.
WIDGETIZE
