seanmonstar

Jun 22 2010
Jun 8 2010

At Least Pad the Default Button Styles

Some people like to style buttons to their own design, ensuring they look the same cross browser or enhance the site theme. Others are perfectly fine with a <button /> being rendered differently depending on browser and operating system combination. I understand both sides. Sometimes a styled button can look really nice. Other times, it just makes sense to leave it at default, because users are used to seeing buttons the way their OS always displays them.

As long as buttons have a consistent look across the site, I’d say both are just as usable. If you’re in the latter camp, leaving button styles to the browser, please, oh please, at least add some padding to the buttons. The default button styles leave the border right on top of the text, making it very annoying to read the text of the button.

Here’s a screenshot from Remember the Milk on the left, and my addition of padding on the right.

input[type="submit"], input[type="button"], button {
	padding: 3px 5px;
}

Just a few pixels, but the difference is huge. You can now read the text of each button with ease. Please, don’t forget the whitespace.

Apr 12 2010

IE Opacity Ignores Positioned Children

The CSS2 Opacity property doesn’t work in the current versions of Internet Explorer - through IE8. However, it has provided a way to achieve similar results with a different method, using IE’s filter property. Javascript frameworks usually work this in for you when you try to set an elements opacity in a cross-browser fashion.

It should come as no surprise that there are bugs that arise from this filter property. One is that the filter doesn’t cascade to children that have their position as anything besides static.

This has been talked about in several places all over the internets, and even recently in the MooTools User Group, but it seemed worthy of documenting if only for my own purposes. You can see for yourself with this demo at jsFiddle.

A way to fix this has been suggested multiple times as well: You can set the positioned element to inherit the filter. Unfortunately, the instance where I ran into this bug proved unsolvable, because I actually needed that filter property to do something besides inherit. Nonetheless, if you’re simply trying to fade out and find that part of it isn’t fading in IE, this will solve it. This, and apparently some sort of change to the layout of the element is also required. You could change its display to inline-block, but some felt that setting contentEditable to true to be the least intrusive on changing the layout. I’m not so sure I agree, but here is it anyways.

#relative {    
	position: relative;    
	filter: inherit;
}
Apr 29 2009

Use CSS Borders for 3D Effects

Recently, I’ve been more in favor of using the browsers rendering instead of background images to achieve looks, since that reduces bandwidth and loading times , and also increases maintainability . I used to slice images that would give something a shadow or button type of a look, but have moved more towards just making the browser do it. I wanted to share some examples of effects and how easy it is to do so.

3D Buttons

As a smaller example, I’ll show the buttons I put together for the Blazonco admin post index page. Rather simple, but I wanted to achieve that effect you’ve seen in older buttons. You know, where the top part is light than the bottom, so it looks slightly raised out of the application. And then on hover, I swap the border colors, giving the look of being pushed in.

I threw a darker color on the bottom and right sides. The above picture shows normal (left) and hover (right). Of course, Print Screen hides the cursor (which I found weird). And here’s the relevant CSS:

 a.button {
    background-color:#fff;
    border-width:1px;
    border-style:solid;
    border-bottom-color:#aaa;
    border-right-color:#aaa;
    border-top-color:#ddd;
    border-left-color:#ddd;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}  

Having it in CSS allowed me to easily test out the results , and tweak the color slightly as I decided one side was too dark or too light. And I also was able to easily experiment with how round I wanted the button. When using images for all this, you’d have to make the changes in Photoshop, and save it and upload it again. So a major gain is in how easy it is to maintain .

Shadows

I had the joy of turning a comp with mutliple rounded corner boxes and shadows and the like into a working web-site not long ago. I originally thought that these boxes would also need to be expandable, and I wondered how to achieve this in a feasible way. I settled on using various CSS3 techniques instead of image slices with sliding door techniques.

The end result was as such:

In the boxes, I used a gradiant slice for the background, and then used only border and border-radius to obtain a kind of 3D look. Here’s the CSS:

 .module {
    background:#fcfcfc url('images/module.png') repeat-x left bottom;
    border:1px solid #ccc;
    border-bottom:2px solid #bbb;
    border-top:1px solid #ddd;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}  

By making the border bigger and darker on the bottom, and lighter and thinner on the sides and top, I gave it a pseudo-shadow. The benefits of this over an image is that it only took 1 element to style (the div), and it could easily expand in any direction without running out of image.

Since it was using CSS3 techniques, it was squared in Internet Explorer, but continued to look good. This is an important factor of progressive enchancement , since I made sure to use CSS that looked nice in older browsers.

CSS Feature Detection?

One last rule I would have liked to add but never did was using Safari’s drop shadow property. That would have achieved an even nicer looking shadow in Safari. The reason holding me back, was that I’d already used border’s to accomplish this effect, and didn’t want to try to remove them for Safari. This would have required some Safari CSS hacks, since I currently don’t know of a way to do CSS feature detection.

It’d be cool if you could do something as such (I’m going to steal some Javascript syntax):

 if(-webkit-box-shadow) {
    .module {
        border:none;
        -webkit-box-shadow:5px 2px 2px #bbb;
    }
}  

Do any of you have any suggestions on how to properly achieve that with current technologies? And I’m not interested in server-side sniffing. That’s obvious, and sub-optimal.

Apr 9 2009

Tables vs CSS? Really?

I’ve seen several big name web-sites point out this argument about whether or not CSS is worse for making web-sites than tables were, and I’m honestly getting sick of it . Some (self-proclaimed?) bigwigs in the web industry are even saying it’s easier to use tables and that’s what they’re going to use for now. I assume everyone knows the reasons for using standards, semantic html, cascading stylesheets, and the like instead of tables. The benefits are enormous. But is it really too hard?

First, No, It’s not hard.

Honestly, writing HTML semantically is super easy. All you’re doing is defining content. That block of text is a paragraph. The first line is a heading. That list is, gasp, a list! That’s the easiest part. Then, after you’ve defined content logically, you open up a CSS file and style away.

Anyone who’s had to transform a design into CSS a few times and knows most CSS properties available knows it’s not hard at all! It takes a couple hours to turn a design into a web-site. But perhaps I’m biased - I get it . I get CSS. What about people who don’t? I can see that, certainly not everyone excels at the same things. So some people might have much more of a difficult time wrestling with the browsers box model. For people like that, here’s what’s up:

Web-sites Aren’t For You

If you can’t understand or work with the new technologies of an industry, then likely, this industry isn’t for you . Can someone honestly call themselves a web professional if they can’t use the tools the web requires?

It’s equivalent to someone learning programming, and asking them to build a game in Java, for instance. If they could not wrap their mind around Object-Oriented design, would it be sufficient for them to say “I’m just going to write one gigantic function, because it’s easier than trying to understand all that Object junk.” …. Fired.

But You Love Web-sites

Perhaps you can’t work with CSS very well, but you still love web-sites. Ok, so you don’t have to leave the industry, but realize what you can and cannot do! If you’re a designer, and you make pretty things, don’t bash CSS because you find it easier to just press Slice in Photoshop. Stick to making pretty combinations of pixels, and let someone else do it.

Or maybe you’re a developer (I’d find this much rarer, but who knows), and you can’t be bothered with the stupid standards of browsers. It’s too non-standard or non-programmery for you. That’s fine. Stick to optimizing the database and give the front-end people quick and efficient queries. Stick to your thing.

But just because something is hard for you, doesn’t mean the proper response is do it the stupid-er way.

Mar 27 2009

When Are CSS Frameworks Good

There are loads of CSS frameworks out there, and plenty more of articles telling you that they are the devil and don’t use them. I agree with these articles as a whole. So what am I trying to say? Frameworks can be good? It depends.

Make You Own

Don’t go and grab any of the gillions of CSS frameworks out there. No, this post is actually about your own CSS framework . Personally, as I’ve sliced a multitude of designs, there’s certain class names and ID’s I like to use. I have a preference on the semantic mark-up for a set of elements. And most web-sites are structured the same, with slight variations.

It’s therefore, quite easy to keep a base CSS file, which I call framework.css, that already has done the things I do every single design. Things like floating 2 or 3 columns together, giving proper padding and margin that I always use.

framework css

Style as Generally as Possible

Something else that makes your own CSS really powerful, is trying to use classes (when you need them) to identify elements . And also, styling elements with the least specific rules you can manage . This way, when new html is inserted (by the client, or even yourself) your CSS hopefully already applies. If you made a box that goes on the left, and styled it pertaining to it’s ID, what happens when you add a new box underneath? Were you (or the client) hoping it would be just like the box above it? How much better it would have been if you had been less specific.

Have you built up your own framework that you continue to use?

Jun 17 2008

Image Replacement and Backgrounds

Having been around the CSS playground for a while now, I’ve seen the different techniques of image replacement, and I’d like to share my methods of doing so, and why I do so.

Heading Replacement

Sometimes, we really love a font or layer style so much, we decide we just have to make our headings to be images. Most commonly, this includes the H1 of the web-site, the logo. Considering the logo has a distinct and perfect look to it, quite rightfully it should usually be an image.

The Spanning Pool

There’s the handy IMG tag for us to use, but when thinking semantically, it’s better off keeping headings in heading tags. The goal is to give text-readers the proper text inside the heading, but for modern browsers to show the image in all its glory. It seems quite common, though, to keep a SPAN tag inside the heading to achieve the image replacement. Let me first show you what not to do.

<h1><span>McArthur GFX</span></h1>
h1 {
background:url('images/logo.jpg') no-repeat;
height:100px;
width:300px;}span {
display:none; /* wtf mates? */}

This method does accomplish the proper aesthetic result, but has a few imperfections.

Firstly, we have an extra span tag inside the H1 tag. Not too big of deal. But it’s unnecessary, and therefore improper. Secondly, making the text have the property display:none may actually affect some text readers to the point that the all-important heading is ignored!

Text-Indent

Conversely, we can use the CSS property text-indent to accomplish the same aesthetic goal, and leave the text in its proper display.

<h1>McArthur GFX</h1>
h1 {
background:url('images/logo.jpg') no-repeat;
height:100px;
text-indent:-9999px; /* the bbq sauce */
width:300px;}

This essentially throws the text 10,000 pixels to the left, which is of course larger than any monitor (currently… wow that’ll be one big sucker). But when text readers look through the HTML, the text-indent is considered an entirely aesthetic change, and won’t affect them.

Partial Image Replacements

There are plenty of occasions where we can create a background of an element with a nice gradiant or pattern and want it in the live version. But there’s going to be lots of elements using the same background. So we’ll use a similar technique as above, but just leave out the text indent.

<ul id="nav">
<li><a href="">A Cool Link</a><li>
<li><a href="">A Cold Link</a><li>
<li><a href="">A Warm Link</a><li>
<li><a href="">A Hawt Link</a><li></ul>

It’d stink to make the image and save it for every single instance with different text. So we just save the background, apply the background, and keep the text over it, so now we can change the text whenever we want. It can say anything too!

#nav li {
background:('image/bg_link.jpg') no-repeat;
height:20px;
width:80px;}

This will give all of the changeable links in #NAV to have the same button image. Great for adding new links, and changing old ones. And great on bandwidth and loading time, because now the visitor only needs to download one image to have the background for all.

The Pattern / Gradiant

What if your links simply have gradiant, or pattern of scan lines or something similar? We can make one teeny change to our CSS, and reduce bandwidth and loading even more!

#nav li {
background:('image/bg_link.jpg') repeat-x; /* the fast lane */
height:20px;
width:80px;}

Save the gradiant as 1px by Xpx, depending on how long the gradiant changes. Or smallest dimension possible to contain the repeating pattern. With the dimension of 1px x 100px, that is massively smaller in file size than 100px by 100px, for example.

An added benefit to a repeating background is having the possibility of variable width. With a fixed width background for buttons, we must keep the text under a certain length or expect certain aesthetic doom. With a repeating background, you can remove the WIDTH property and let the buttons have a natural length based on the text.