Showing posts with label html. Show all posts
Showing posts with label html. Show all posts
Sunday, July 6, 2008
Semi Transparent .PNG Buttons
On Iconico.com and BitsDuJour.com we use semi transparent 'glassy' buttons, and similar ones are found all over the web. The nice thing about our buttons is that they are really easy to make, and don't require any JavaScript to have a rollover state. You can change the color using a stylesheet, without need to cut separate images for a highlight button. They work in all modern browsers and degrade perfectly for older browsers, and as they are simply hyperlinks they are excellent for search engine optimization.
Here are a few Examples!
All the above examples are made with just one image, and as you can see you can use any text effect and color that you want
So fire up your copy of Adobe PhotoShop and follow along.
First up, make a new image for your button, ours is 120pixels by 46 pixels. You'll need to turn on the Guides, which can be found on the 'View' menu under 'Show' and then 'Guides'.
Create several guides, ours are 4 pixels in from the edge, and then two more guides 26 pixels in from each edge.
Then using the Elliptical Marquee tool select the left area and the right area. You'll need to hold down the 'Shift' key to make the second selection.
Now shift to the Rectangular Marquee tool and again hold down shift. Select the area between your two ovals so you have the following area selected.
Press 'Delete' to clear the selected area, showing the background. Note we're at 200% magnification here, your actual button will be half the size.
We'll now make another layer below our white layer and fill it in blue, just so we can see what we're doing. We won't actually use this layer in the final button.
Next up we make a layer between the blue and the white layer for the dark fade. Using the Gradient Fill tool we fill from Black to Transparent.
That done we'll select the white layer again and using the Magic Wand tool we'll select the hole. Then from the 'Select' menu we choose 'Modify' then 'Contract' and make the selection smaller by 2 pixels.
We'll now make our final layer for the hilight. Switching back to the Gradient Fill tool we'll make a fill on this layer from White to Transparent. Note you can chop the bottom off of the hilight using the Elliptical Marquee tool if you want a higher gloss button.
Now all that remains is to hide the blue layer as we don't need it in our final button, and then we'll save the image as a .PNG, which is the file we'll use on our webpage.
Your layers should look something like this.
Ok, so close PhotoShop and switch to your favorite text editor to start in with the HTML. What we need to do is make a link and give it the class 'GlassyButton'. In our stylesheet we define the background-image as our .png graphic that we created above. As the .png is transparent the blue background-color shows through. The ':hover' state simply has a different background color, so without fuss we have a rollover state for our button. We've also specified a ':active' state which will be a darker blue, shown when the button is pressed and the mouse is moved away.
A couple technical notes on the css, we do need to use 'float:left;' in order for Firefox not to shrink the image to the size of the text, you can instead use 'display:block;' if that works for you.
You can specify any color or size of font that you like, and easily put in rollover text effects. The css line 'line-height:46px;' controls the position of the text vertically.
So what about Internet Explorer 6! Well IE6 doesn't support .png background images so they easiest solution is to plug in a copy of pngFix and with a couple lines of Javascript older browsers will show everything without a problem.
Download .PNG
Here are a few Examples!
All the above examples are made with just one image, and as you can see you can use any text effect and color that you want
So fire up your copy of Adobe PhotoShop and follow along.
First up, make a new image for your button, ours is 120pixels by 46 pixels. You'll need to turn on the Guides, which can be found on the 'View' menu under 'Show' and then 'Guides'.
Create several guides, ours are 4 pixels in from the edge, and then two more guides 26 pixels in from each edge.
Then using the Elliptical Marquee tool select the left area and the right area. You'll need to hold down the 'Shift' key to make the second selection.
Now shift to the Rectangular Marquee tool and again hold down shift. Select the area between your two ovals so you have the following area selected.
Press 'Delete' to clear the selected area, showing the background. Note we're at 200% magnification here, your actual button will be half the size.
We'll now make another layer below our white layer and fill it in blue, just so we can see what we're doing. We won't actually use this layer in the final button.
Next up we make a layer between the blue and the white layer for the dark fade. Using the Gradient Fill tool we fill from Black to Transparent.
That done we'll select the white layer again and using the Magic Wand tool we'll select the hole. Then from the 'Select' menu we choose 'Modify' then 'Contract' and make the selection smaller by 2 pixels.
We'll now make our final layer for the hilight. Switching back to the Gradient Fill tool we'll make a fill on this layer from White to Transparent. Note you can chop the bottom off of the hilight using the Elliptical Marquee tool if you want a higher gloss button.
Now all that remains is to hide the blue layer as we don't need it in our final button, and then we'll save the image as a .PNG, which is the file we'll use on our webpage.
Your layers should look something like this.
Ok, so close PhotoShop and switch to your favorite text editor to start in with the HTML. What we need to do is make a link and give it the class 'GlassyButton'. In our stylesheet we define the background-image as our .png graphic that we created above. As the .png is transparent the blue background-color shows through. The ':hover' state simply has a different background color, so without fuss we have a rollover state for our button. We've also specified a ':active' state which will be a darker blue, shown when the button is pressed and the mouse is moved away.
<html>
<head>
<title>Glassy Buttons</title>
<style>
a.GlassyButton, a.GlassyButton:link
{
width:120px;
height:46px;
float:left;
color:#fff;
font-size:15px;
font-weight:bold;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
line-height:46px;
background-image:url(Glassy-Button.png);
background-color:#4982F7;
}
a.GlassyButton:active {background-color:#3B68C6;}
a.GlassyButton:hover {background-color:#709EFF;}
</style>
</head>
<body>
<h4>Glassy Buttons</h4>
<a href="http://www.icoblog.com" class="GlassyButton">IcoBlog</a>
</body>
</html>
A couple technical notes on the css, we do need to use 'float:left;' in order for Firefox not to shrink the image to the size of the text, you can instead use 'display:block;' if that works for you.
You can specify any color or size of font that you like, and easily put in rollover text effects. The css line 'line-height:46px;' controls the position of the text vertically.
So what about Internet Explorer 6! Well IE6 doesn't support .png background images so they easiest solution is to plug in a copy of pngFix and with a couple lines of Javascript older browsers will show everything without a problem.
Download .PNG
Monday, May 19, 2008
New Site Design for Iconico.com
To coincide with the launch of icoBlog.com we've put up a new design for iconico.com. We wanted to fix a couple of visual issues with our earlier layout which has served us since 2006. The new design we're calling 'Tablet' and looks something like this:
The main problem that we had with the earlier design was that the little sections seems to float on the page background, without being anchored together as a cohesive page. We added an encompassing semi-transparent tablet and aligned the entire page centrally. We also removed the hard boxed lines around each page section, replacing this with a full sidebar and a white content panel, hopefully the result is a lot less harsher with the dark blue borders gone and the orange accent color used more liberally. Generally we wanted to make the site a little friendlier, and a little less like the old style portal webistes with boxes everywhere.
You can see here the 2006 design which has the "floating boxes" problem:
Next came a redesign of our logo. There's always been a little confusion in how to pronounce iconico. I've always said "eye-Conic-o", with the stress on the first "C", but often people pronounce it "eyeko-Neeco" with the stress on the "N". My reason for the former pronunciation was that I always wanted an "iconic company", hence the name. Then there are some people who pronounce it "EE-ko-NEE-ko", but that's just silly. Anyway, part of the logo change with the new orange "O' at the end is to visually help in the pronunciation. In addition it works for icoBlog, and another site that we'll be launching soon. You can see below that our logo has remained pretty much unchanged since 2005, with this earlier design:
You'll notice liberal use of semi-transparent backgrounds in the new design, which is something that we've wanted to do for quite some time now, and have been using on a lot of our consulting client's projects to great effect. These are accomplished using PNG images, which are supported naively in Firefox, Opera, Safari and Internet Explorer 7. We use the marvelous pngFix library for jQuery for downgrade browser support. What that does is automatically re-write the CSS code to use Microsoft's css filters so that the backgrounds show up in IE6 and IE5.5. You will notice that the image backgrounds do pop into place, so it's not a seamless load of the page, but with only 3% of our visitors using IE6 or earlier we thought this was a fine compromise to make, and a really neat solution. If you really want to see the transparency in effect have a look at the three holes that we've used to separate items in the sidebar. If you resize the page you'll see that the page background flows underneath. That's all done with PNG transparencies, and after years of pushing GIFs and JPGs it's a real pleasure to be able to code.
To make the latest change to the site we actually only touched about six files and twenty or so images. Evey page was left exactly the same. This is all down to a central CSS file, and a hand made template system. Below is a 2002 version of the site, which had pretty much the same HTML structure as we're using today, although the navigation has undergone some major renovation the pages themselves have not need to be updated. Just goes to show that it plans to think ahead when structuring your HTML.
The main problem that we had with the earlier design was that the little sections seems to float on the page background, without being anchored together as a cohesive page. We added an encompassing semi-transparent tablet and aligned the entire page centrally. We also removed the hard boxed lines around each page section, replacing this with a full sidebar and a white content panel, hopefully the result is a lot less harsher with the dark blue borders gone and the orange accent color used more liberally. Generally we wanted to make the site a little friendlier, and a little less like the old style portal webistes with boxes everywhere.
You can see here the 2006 design which has the "floating boxes" problem:
Next came a redesign of our logo. There's always been a little confusion in how to pronounce iconico. I've always said "eye-Conic-o", with the stress on the first "C", but often people pronounce it "eyeko-Neeco" with the stress on the "N". My reason for the former pronunciation was that I always wanted an "iconic company", hence the name. Then there are some people who pronounce it "EE-ko-NEE-ko", but that's just silly. Anyway, part of the logo change with the new orange "O' at the end is to visually help in the pronunciation. In addition it works for icoBlog, and another site that we'll be launching soon. You can see below that our logo has remained pretty much unchanged since 2005, with this earlier design:
You'll notice liberal use of semi-transparent backgrounds in the new design, which is something that we've wanted to do for quite some time now, and have been using on a lot of our consulting client's projects to great effect. These are accomplished using PNG images, which are supported naively in Firefox, Opera, Safari and Internet Explorer 7. We use the marvelous pngFix library for jQuery for downgrade browser support. What that does is automatically re-write the CSS code to use Microsoft's css filters so that the backgrounds show up in IE6 and IE5.5. You will notice that the image backgrounds do pop into place, so it's not a seamless load of the page, but with only 3% of our visitors using IE6 or earlier we thought this was a fine compromise to make, and a really neat solution. If you really want to see the transparency in effect have a look at the three holes that we've used to separate items in the sidebar. If you resize the page you'll see that the page background flows underneath. That's all done with PNG transparencies, and after years of pushing GIFs and JPGs it's a real pleasure to be able to code.
To make the latest change to the site we actually only touched about six files and twenty or so images. Evey page was left exactly the same. This is all down to a central CSS file, and a hand made template system. Below is a 2002 version of the site, which had pretty much the same HTML structure as we're using today, although the navigation has undergone some major renovation the pages themselves have not need to be updated. Just goes to show that it plans to think ahead when structuring your HTML.
Subscribe to:
Posts (Atom) 
