Isaac Keyet » CSS

New, flashy user menus for IntenseDebate!

Isaac Keyet — Mon, 27 Apr 2009 22:43:42 +0000

A few days ago we went live with some new user menus for the IntenseDebate plugin. I’ve made the design of course, and while they’re meant to resemble the looks of the old menus in a lot of ways, there are some notable differences. The most striking change is of course the avatar being a part of the popup as this was not the case before. An enlarged avatar gives the reader a more personal and complete insight in a user profile.

The goal for the redesign was to remove non-vital elements from the menu, items that you’re probably not interested in until you know the other stuff anyway. It now shows the username in large letters, along with the reputation meter. If you have enabled your latest twitter messages, and have a description as well, now both will show – not one or the other like it was before. This is true for the IntenseDebate.com profile as well.

Of course I’m going for pixel-perfect, clean, and with fancy effects once you notice them. Hint: The “border” around the avatar is actually a semi-transparent sweet-looking box, and all buttons have fancy :hover and :active effects. All in a single CSS sprite of course. Hope you like it!

Spices for modern browsers: border-radius, box-shadow and text-shadow

Isaac Keyet — Thu, 04 Dec 2008 14:15:21 +0000

While updating the blog I remembered what Matt Thomas mentioned a while ago: I like to give people using modern browsers a little something extra to reward them. Not a direct quote, but that was the idea.

There are a few very interesting CSS3 rules that only a select few of the web browsers have yet implemented. The more interesting for pure text/box styling in my mind are border-radius, box-shadow, and text-shadow.

Remember: Only use these properties to spice up your design, don’t rely on them for your visual appearance as they’re unsupported by a large majority still.

Border-Radius

Border-radius applies nicely rounded corners to any block level element (such as a

). The syntax is really straight-forward:

.className { border-radius: 5px; }

…Where 5px defines the size of the rounded corners.

Browser support

Border-radius is actually pretty well supported by many of the major browsers. For most, it’s a “beta” feature though, and so you’ll have to use multiple lines of CSS to make it work in all browsers that supports it.

.className { /* Rounded corners in most browsers! */ -moz-border-radius: 5px; /* For Mozilla Firefox */ -khtml-border-radius: 5px; /* For Konqueror */ -webkit-border-radius: 5px; /* For Safari */ border-radius: 5px; /* For future native implementations */ }

Border-Radius Example

This is what a box with rounded corners would look like in Firefox. The light grey brown box that’s wrapping this guide also has the border-radius rule applied to it, so you can check it out yourself in Firefox 3.x, Safari 3.x or Konqueror to see it in action!

Box-Shadow

Box-shadow creates a drop shadow for a given block-level element (such as a

). The syntax is as follows:

.className { box-shadow: 1px 2px 3px #666; }

The first two values, 1px 2px define where the shadow should appear in X and Y coordinates. So 1px tells the browser to render the shadow 1px from the left side of the object, and 2px tells it to render it 2px below.

The third value, 3px sets the blur level of the shadow.

The last value, #666 simply defines the shadow’s color.

Browser support

Unfortunately, box-shadow is unsupported by most browsers out there today. To my knowledge, only Safari 3 support it, but you have to use experimental code. To kick box-shadow in for Safari, try this:

.className { -webkit-box-shadow: 1px 2px 3px #666; }

Box-Shadow Example

You can also look at the light brown box that is wrapping this guide in Safari 3 or greater to see the box-shadow in action.

Text-Shadow

Text-shadow creates a drop shadow for any text, but is practically better used for headers (such as a

). The syntax is the exact same as for the box-shadow property:

`.className { text-shadow: 1px 2px 3px #666; }`

The first two values, `1px 2px` define where the shadow should appear in X and Y coordinates. So 1px tells the browser to render the shadow 1px from the left side of the object, and 2px tells it to render it 2px below.

The third value, `3px` sets the blur level of the shadow.

The last value, `#666` simply defines the shadow’s color.

Browser support

Text-shadow is supported natively by Safari, but unsupported by every other major browser (not even in experimental properties).

Text-Shadow Example

This is a screenshot of what the title of this Text-Shadow guide looks like in Safari.

Links of interest on CSS3

CSS3.info – “All you ever needed to know about CSS3″
CSS-Tricks – Good source for tutorials, news, tips and tricks on using CSS.
456 Berea Street – Writes about web standards and general tips for designers/developers.

Hope you enjoyed this guide. Now get coding!

Tips on Using the Outline CSS Property

Isaac Keyet — Thu, 10 Apr 2008 04:35:03 +0000

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!

Check out my MyBlogLog iPhone!

Isaac Keyet — Sun, 23 Mar 2008 05:01:16 +0000

I just got done with it, and it’s just for fun. If you look in this blog’s sidebar you’ll see a shiny iPhone with my latest visitors in it.

The reason I did it was just because the new MBL widget looks so much like an iPhone. Especially if you’re using a black and white color scheme for it, which I did. Anyway, I hope you like it!

Get perfect Web 2.0 16×16px icons quickly!

Isaac Keyet — Thu, 20 Mar 2008 01:13:38 +0000

Recently I faced the problem of either creating my own 16 square pixel icons, or use others. I started looking into how other services have solved the problem, and I realized after looking at Socialthing! that the best solution is also the most obvious and simple one: Just import the site’s own favicons!

Here are some examples of great 16×16 icons from well known sites:

Facebook:
Last.fm:
CNN:
Yahoo!:
Twitter:

Almost all bigger sites out there have a favicon, so to find and download an icon just do the following:

Enter root web adress in your browsers adress field: http://www.sitename.com
Apply /favicon.ico to the adress, like so: http://www.sitename.com/favicon.ico
Hit Enter to go to the adress, and there you are. This is the perfect 16px icon for the website you’ve entered!

Pure CSS animated menu

Isaac Keyet — Thu, 22 Nov 2007 00:49:49 +0000

I’ve had this idea for a long time, to create a menu that would look animated but still being all CSS. The trick is to use the movement of the mouse over different objects to trigger other elements to change. Thanks to normal child selectors, nested elements and some padding animation is actually possible. The theory behind this is that the 1st element sets the size of the visible menu item, the 2nd changes this to a higher value, and so forth. You can also put in color changes and whatever else CSS you might want!

This is just a proof of concept, and I have no idea if it actually works in all browsers. I’ve developed this little example for Firefox 2. Mouse over the menu slowly and see what happens…

Confusing? I put in some borders in the example below, in an attempt to show off the theory behind it..

Hope you like it

border: 1px solid; magic!

Isaac Keyet — Wed, 17 Oct 2007 02:26:07 +0000

I don’t know if this is common knowledge among webdesigners, but this was all new for me. If you don’t select a color for a border, just say “border: 1px solid;” (for example) it will inherit the color of the current object. I’ve checked this in Firefox 2 and Opera 9, and it really works here.

Very interesting, at least I think so..