In this tutorial we will show you how to add rounded corners to some but not all corners of a rectangle in Photoshop CS5.5. As we all know with all adobe products when it comes to adding rounded corners to a shape with the tools available it is every corner rounded or every corner squared. We will show you a work around to add just one or two rounded corners.
Although I am using Photoshop CS5.5 for this CS5 and CS4 are the same when doing this. Continue reading
In this tutorial we will show you how to round off the corners of an image or bitmap in Fireworks CS5.5 by using vector shape masks. You can apply any shape you wish to a vector shape but the most common application is for rounding corners off. I am using Fireworks CS5.5 for this tutorial but you can use any version of Fireworks without modifying the techniques involved to achieve the same result.
This is more of a tip than an actual tutorial but we will be showing you how to round off the corners of an image using just CSS3. This tip will work for all browsers except for a few older IE versions.
In this tutorial we will show you how to add one or two rounded corners to a rectangle in Fireworks CS5.5. It is pretty much common knowledge that you can only set all four corners to rounded and all need to be rounded off the same using the standard Fireworks tools. We will show a simple work around that will enable you to round those corners off while maintaining your others corners squared off. This is fairly common in web design and frustrating to most beginner web developers while wireframing in Fireworks.
In this tutorial we will look at the basics of bending a logo around a logo. We will only be looking at the basic of doing ti today. To get a menu to wrap around your logo will require you to fine tune the positioning of menu list items. Every logo is different and every menu item need to be place using CSS individually. So unfortunately there is no cut and paste solution to this problem. However we can show you the basic’s so that you can begin wrapping your menu around your logo as suits you.
This is an image of roughly what it looks like. This is a rough menu and before I used it I would refine the positioning more but it does give you an idea of what is posible using this technique.
In this tutorial we will learn how to create a staggered menu using only CSS.
Sometimes we want to break up the structure of a website to give it character and staggering a menu up and done or left and right is one possible way to do this. Usually this is done with images and CSS which is not very flexible. If we want to change a menu item we have to change out the images by hand, and all the images are place individually. Now lets look at a way to stagger a text menu up and down using only CSS and HTML. No images, And our menu should look like this when finished.
When Finished our menu will look something like this.
When a menu item with no sub-menu is hovered the hyperlink will turn a deep red but the overall menu remains the same. If a menu item with a sub-menu is hovered than the menu increases in length to show the hidden menu items. As you can see from the image above it will expand dependant on how many items are actually in the sub-menu.
In this tutorial we will be create some stylish buttons for your website using CSS3. These buttons degrade gracefully and will still look great on browsers that do not support the CSS3 standards.Simple changes to the css will change the button colors rather than having to swap images or use a sprite image and positioning.
We will be using just 1 image to give the button a shine but the color of the buttons can be changed just by altering the background color in the CSS. The image will be a 1 pixel by 20px high gradient image going from with at the top down to transparent part the way down. This way any background color we chose for the background with come through leaving the white to give our buttons a nice shining finish.
In 2 of my previous articles I covered how to create a vertical accordion menu using only CSS. In this tutorial I will be showing how to turn that around and create a horizontal accordion menu. So if you are not yet familiar with the basics of the accordion menu check out the HTML and CSS for the vertical accordion menu which we will be converting in this tutorial at the above two links.