Css Posts

6 posts tagged with css

I spent an evening adding 'progressive' loading of the title images to my blog.

The title images for this blog are 3840 × 2160 and a hefty ~650K each. That's entirely intentional; as a photographer I wanted them to look as sharp as possible and take advantage of high pixel density screens.

The only downside of hi-res photos is that even with a good internet connection, you can still see the photo loading as the browser reads the JPEG. It's visually jarring and way too reminiscent of the web, circa 2000s.

A reasonable solution is to first download a smaller lower-resolution version, then load the full resolution image on top of that. So the user sees something relatively quickly, without the visual contrast of an image loading on a blank background. continue reading…

After today's news that the <blink> tag will be deprecated in Firefox, I decided to re-implement it in html5 / CSS3 (no Javascript required). Now it's all modern again, you are free to use <blink> liberally in your web application.

Be sure to give attribution for the above code, so your users will know where to go to thank me…

Edit: Just to demonstrate that it works!

Inspect the code if you don't believe me...

The company I work for, 2Degrees, is looking for a front-end developer to join our team.

Are you a CSS monkey?

We need a CSS monkey with a good working knowledge of browser quirks and the ability to get even IE6 looking good (although you don't have to like it). It would help if you don't run away screaming from Javascript and can play well with the code monkeys.

More details are below. Email the address at the bottom of the job description, and mention this blog!

Would you like to do something genuinely useful with your client side development skills - UI, XHTML, CSS (JavaScript, AJAX)

2degrees is an exciting, fast-paced, well-funded Web2.0 environmental networking business based in Oxford. continue reading…

When writing the image wrapping script, I came across a difference between Firefox and Opera. Basically, when there are small floated divs in a vertical stack, the text to the right will be aligned to the topmost div in Firefox, even if the divs underneath extend farther than the topmost div. Opera handles this situation better and places the text after the maximum extents of the floated divs. Take the following HTML:

<div style="float:left;clear:left;width:100;height:8px;background-color:#55f;" ></div>

<div style="float:left;clear:left;width:120;height:8px;background-color:#66f;" ></div>

<div style="float:left;clear:left;width:140;height:8px;background-color:#77f;" ></div>

<div style="float:left;clear:left;width:160;height:8px;background-color:#88f;" ></div> continue reading…

One of the things that used to annoy me about working with CSS, is that I had a mental block about margin and padding. I could never recall which was which, because the two terms mean pretty much the same thing; an arbitrary space around text. Frankly I think the creators of CSS should have used have called them inner-margin and outer-margin, or inner-padding and outer-padding. I'm sure there is a good reason for using the terms margin and padding (I'm guessing its from typesetting nomenclature), but to me they feel arbitrary and may have well have been called bob and jane.

I like the idea of tag-clouds and tags in general, but I had problems making them look good in becontrary.com. I experimented with changing the relative size and blending colors, as well as with the huge number of visual tweaks you can do with CSS, but the amorphous blob of words just didn't seem to fit with the nice neat columns I had. Until, that is, I sorted the tags by popularity, which made it a lot neater and enhanced the effect of blending the font size / color. I don't know why it didn't occur to me before. I don't see many sites doing this, most tag clouds are sorted alphabetically.

The image below shows a tag-cloud sorted by popularity (left) and just alphabetically (right). Which one do you think looks better?

(Click for a larger image.)