はてなブックマーク

I don’t get to work on a lot of new sites nowadays, but I recently got the opportunity to set one up from scratch. For most sites I built when I was still running an agency, I would use some form of CSS Reset, most often Normalize.css, but I figured that this time round I could do with a few basics, like box sizing and resetting margins on the body, and call it a day. Since browsers are pretty con

This is a small experiment with the new CSS transforms in Firefox 3.5 and Webkit. — loading spinners using html, css and javascript. Tested in Firefox3.5 and Webkit. Feel free to use them. By Kilian Valkhof. See the source code to enable css animations instead of javascript rotation. Bars:

With the soon-released FireFox 3.1, three of the four major browsers support text-shadow. That leaves just Internet Explorer with the lack of text-shadow. I have already taken care of that problem, but decided to wrap it up in a nice automated jQuery plugin. How it works #One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we

The modern browsers all have rgba(), giving you a semi-transparent background colour while keeping the foreground elements (text, images) fully opaque. But if you want to use that in your design, what about IE? Here’s how to do it. A while ago I madea design with lot’s of semi transparent areas (I know, stupid me, it’s only 2010 after all) and solved that in modern browsers with rgba(). All fine a

How to build a fast, simple list filter with jQuery Sometimes you want users of your web-app to quickly filter a list down. For example, a web-app I’m currently working on features a page listing two dozen countries, and I want users to find the country they are looking for as fast as possible. This article shows you how little code is needed to add this in a fast, progressively-enhanced way using

While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone. CSS transforms #CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions,

Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods. If you’re not familiar with Cufón, check out my previous article: Cufon vs. Typeface.js, which one is better? or this article: Exploring Cufón, a sIFR alte

Without a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a lot of ways to position an element, all with various (dis) advantages. This series of articles will thrive to explain the possibilities you have in positioning. It doesn’t only cover positioning, but also properties that define layout such a

In part one and part two we’ve discussed the positioning, display and floats properties of CSS2. In the final part of this series, we’ll discuss the new options CSS3 gives us: The advanced layout module and the grid positioning module. CSS3 is built up out of individual modules. The advanced layout module and the Grid layout module both are quite similar, and it’s reasonable to assume that they ge