QTT: Awesome CSS3

For this quick tip I’m going to show you some of my favorite new features in CSS3. There are lots of amazing things happening with html5 and css3, but here are some of my favorite and what they do. CSS3 is not fully supported by every browser so be aware that not all these can be done in all browser but they provide some awesome effects.

Border-Radius

This is one of the best new additions to CSS. No javascript or images required for rounded corners anymore. Firefox and Safari have support for a border-radius that gives you rounded corners. This one is pretty simple to do, although Mozilla currently has a different format then Webkit at the moment and it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.roundedCorners {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
 
.topRounded {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
 
.rightRounded {
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

Along my course of using border-radius I attempted to add rounded corners directly to an image. This works as expected in Safari but Firefox does not round them. It seems Firefox has a bug in its support of border-radius on img. This isn’t supported by Internet Explorer yet so they will not see these rounded corners. However, remember, not all sites need to look the same in every browser. The other solution to rounded corners that I use when IE support is needed would be jQuery Corners.

Text-Shadow

Another new addition to css is text-shadow which can give some amazing looks to text. Pair it with @font-face and web typography has never been better. This can give you a slick and appealing letterpress look to a header. Text shadow lets you specify the x-offset, y-offset, blur and color. Check it out:

1
2
3
4

h2 {
	color: #333;
	text-shadow: 0px 2px 3px #555;
}

Pretty easy and gives you an amazing effect for text. Again this won’t be supported in older browsers, luckily the fallback is just plain text, so no problem there.
(more…)

QTT: Faux Columns

For this Quick Tip I’ll show you two easy ways, css and js, to do faux columns. This is basically having two columns (or more) in your layout and having them the same height. Here is an example of a typical 2 column layout with column height problem.

The CSS Way

The first way I’ll show you is using css, basically just a background. With this method you will have a wrapper around your columns with your background image. Your image will repeat vertical to fill the complete height of your longest column, creating a faux column look (columns that look like they are the same height). Check out the CSS Way Demo first. Here is the typical code for this method:

1
2
3

#wrapper {
	background: url(images/wrapper-bg.jpg) repeat-y 0 0;
}

How simple is that css? You can of course apply more to it like rounded corners, set the width, etc if needed. Here is the image I’m using for the demo linked above; innerWrapper-bg.jpg. As you can see its pretty simple. Its small and will just repeat for the length of the wrapper. Lets check out the html:
(more…)

QTT: CSS :hover Anchors

An attempt to not only post more but get back into posting code and design related articles, I’m labeling every Tuesday as Quick Tip Tuesday. I’ll post quick and easy tips on a wide range of topics including html, css, jquery, php, iphone dev, os x, wordpress, and kaizen cms. More code and design related posts will come along with the launch of a new site which I’ll be posting about soon.

:hover Anchors

Awhile back I started adding a little more to my anchors on some sites. I first saw this on Matt Brett’s site awhile back and have loved it since. I’ve gotten a few emails asking details on these links and they are actually pretty simple. This is basically a 3 state anchor. You can see this in action right here on PKR. Hovering over a post will cause the links in that article to stand out. Then hovering on the link itself causes a different style. Here is what the basic code looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13

.content a:link, .content a:active, .content a:visited {
	color: #888;
}
 
.content:hover a:link, .content:hover a:active, .content:hover a:visited {
	color: #888;
	border-bottom: 1px dashed #888;
}
 
.content:hover a:hover {
	color: #333;
	border-bottom: 1px solid #333;
}

Thats it, nothing else to it. The first set styles the links as your normally would. This shows when you are not hovering on the .content section. The second set styles the links when you hover on the .content section. Finally you style the link when you hover on it. I’ve setup a quick demo of this which you can check out. This demo styles the anchors on whether your hover on .content, the sidebar or the footer. If using for a blog I would normally change .content to .post (or article if your using html5). This would cause the links to change when you hover on that article and not all.

This is just a quick look at what you can do with :hover. Just think of the possibilities. A quick reminder though that this method will not work correctly on IE6. It works perfectly on IE7 and IE8 though (as you can see if you view the demo in those browsers). You can style the links as you normally would for IE6 to fall back to. So, the links would be styled, they just won’t change on .content:hover.