tagged with: tutorials

CSS Tip - Using Link Anchor Pseudo Classes

in css by fyd on 28 Apr 2008

Let's take a look at styling anchor tags, or links, using CSS. We will be going over the CSS pseudo-classes that are used with links - link, visited, hover, and active. First, let's take a look at the link pseudo-class in CSS.

:link - this pseudo-class is used to style a normal unvisited link. When you are styling links you should put this pseudo-class first.

a:link
{
color: #339966;
}

Notice that we use the HTML tag, or selector, a because that is how a link is represented in HTML. The :link represents the pseudo-class. Then you set your properties between the curly braces. This CSS will change all the unvisited links to a green color.

:visited - this pseudo-class is used to style a visited link. When you are styling links you should put this pseudo-class second.

a:visited
{
color: #00ffff;
}

You will see that most sites will set the visited link color to the same color as the normal a:link color.

:hover - this pseudo-class is used to style the mouse over effect of a link. When you are styling links you MUST put this after a:link and a:visited.

a:hover
{
color: #FF0000;
}

:active - this pseudo-class is used to style an activated link element. When you are styling links you MUST put this after a:hover.

a:active
{
color: #FF00FF;
}

This effect is seen while clicking the link. You will find the a lot of sites will style a:hover and a:active the same.

Putting it together in the HTML.

<html>
<head>

<title>Link and pseudo-classes</title>

<!– Embedded Styles –>
<style type="text/css">
a:link
{
color: #339966;
}

a:visited
{
color: #00FFFF;
}

a:hover
{
color: #FF0000;
}

a:active
{
color: #FF00FF;
}

</style>

</head>

<body>
<p>
<a href="#">A Link</a> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed <a href="#">diam nonummy
nibh</a> euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.
</p>

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

You can see how the styles effect the links. You can also combine these anchor CSS pseudo-classes with regular CSS classes. This can help you style links differently throughout the page.

a.className:link, a.className:visited
{
color: #ff0000;
text-decoration: none;
}

a.className:hover, a.className:active
{
color: #00ff00;
text-decoration: underline;
}

The above CSS shows you how to add a class name to the pseudo-classes and how to style multiple elements at the same time. className can be whatever you want to name your class. You can put the :link and :visited pseudo-classes together by adding a comma between declarations. The HTML would look like this:

<p>
<a class="className" href="#">A Link</a> Lorem ipsum
dolor sit amet, consectetuer adipiscing elit,
sed <a class="className" href="#">diam nonummy nibh</a> 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

All you need to do is add class="className" to the anchor tag.

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Styling links using CSS is easy - just remember to put the pseudo-classes in the correct order - :link, :visited, :hover, :active.

The HTML

Popularity: 17% [?]

|2| Comments

CSS Tip - Different Color Borders

in css by fyd on 25 Apr 2008

A quick CSS tip. Don't want your css border to have the same color for every side. Well, you can make each side have a different color - it's easy.

.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}

Some text in the box

Let's take a closer look at the css border properties. We start off by creating a border: that has a 3px 'stroke' that is solid and the color black. The next property we use is border-color:. The format here is TOP, RIGHT, BOTTOM, LEFT - or clockwise around the square starting from the top. Even though we set a color in the border: property, we put border-color below it which gives it precedence - or it 'overwrites' the border's color.

Need the HTML - I used an embedded stylesheet here, but this will work the same in an external stylesheet.

<html>
<head>
<title>CSS Different Colored Border</title>

<style type="text/css">
.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}
</style>
</head>

<body>

<div class="box">
<p>
Some text in the the box
</p>
</div>

</body>
</html>

Popularity: 7% [?]

|0| Comments

CSS Custom Search Field or Textfield

in css by fyd on 10 Apr 2008

Tired of those normal old text field boxes? Well, we are going to create our own custom text field. You can use it on a form or for your search field on your blog. We will start out by simply using CSS to customize the color of the text field's background and border. It's simple, but it can make a big difference and help your search field or form fit in with the design of your site.
(more…)

Popularity: 67% [?]

|4| Comments

CSS Gradient Background Fade

in css by fyd on 02 Apr 2008

A quick and simple way to use a gradient background for you web site. Make the gradient look like it is fading out with no weird lines - just smoothness. It's really quite easy to do using CSS to edit the body property of the HTML document.

We will start off with the HTML. So, open a new document - I'll be saving mine as fade.html. Get the basic HTML shell written out and go ahead and add a link to a stylesheet - style.css. Now here is how we will layout the page for presentation purposes.

<html>
<head>
<title>Gradient Background Fade</title>
link to stylesheet
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="main"> main container
<p>Place holder text</p>

<div id="leftSide">left demonstration 
</div>

<div id="rightSide">  right demonstration 
<h1>Right Section</h1>
</div>
</div>
</body>
</html>

Note: if you copy and paste this you need to take out the 'main container', 'left demonstration', 'right demonstration' text - they are not to be in the code they are just comments I made.

Just a quick layout to show a couple uses of the gradient fade. Before we get to the CSS we need to make(or get) an image for the background. You can use Photoshop to create a simple gradient

In Photoshop create a new file - I'll make mine 10px wide by 400px high.
Pick the colors you want to use for your gradient - Take note of whatever the bottom color of the gradient is - we will need it later. If you double click on the color in the Tools pallet you can copy the hexadecimal number (# followed by six digits). Fill your file with the gradient and save it. Or right-click and save the images I used.
gradient gradient gradient

Now to the CSS

body
{
/*the color here #2c2721 was the bottom color
of my gradient image - a seamless fade*/
background: #2c2721 url(img/bg3.gif) repeat-x;
}

/*just a container to hold things*/
#main
{
	margin: auto;
	width: 700px;
	height: 600px;
	background: #ffffff;
}

#main p
{
	padding: 10px;
}

/*the area to the right with a gradient fade*/
#rightSide
{
	float: right;
	margin-right: 10px;
	height: 500px;
	width: 200px;
        /*#ffffff is the bottom color in gradient*/
	background: #ffffff url(img/rightbg.gif) repeat-x;
}

#rightSide h1
{
	color: #fff;
	margin-left: 5px;
}

/*left area with fade example*/
#leftSide
{
	float: left;
	height: 500px;
	width: 200px;
        /*#ffffff is bottom color in gradient*/
	background: #ffffff url(img/bg.gif) repeat-x;
	margin-left: 10px;
}

All the extra CSS is just formatting to show the examples. The background: is the property we need to worry about to make the gradient fade work. Use repeat-x to make it show up all the way across the page, but not repeat down the page.

The HTML
The CSS

download
Download HTML, CSS, and Images

Not the prettiest example, but you get the idea - pick the colors you want and make it look good.
example

Popularity: 51% [?]

|2| Comments

Photoshop Tutorial - Web 2.0 Button

in photoshop by fyd on 19 Mar 2008

web 2.0 button
We are going to create a snazzy web 2.0 glossy button. I am using Photoshop CS2, but I'm sure these techniques will work in most versions. The size you make the button is up to you and should be customized to fit the site you are building. In this Photoshop tutorial we are going to be using tools like the gradient tool, marquee tool, pen tool, text tool, a pattern, and more.

We will be using a stripe pattern in the background of the button, so if you didn't complete the pattern in the web 2.0 header tutorial you can download it here.

download
Download Stripes Pattern

Let's get started.

File Setup

Open up Photoshop and create a new file. Like I said, the size is up to you - I will be making mine 200px X 50px.

Create a new layer and name it bg.

Rounded Corners or Not

First, grab the gradient tool.

Set the Foreground color to black.

Set the Background color to 50% gray.

Using the gradient tool click and drag from the bottom to the top - so that the black is at the bottom of the button.
background

If you want the button to be rectangular then skip to adding a stroke.

If you want the button to have rounded corners follow these steps.

Grab the Rounded Rectangle Tool rounded rectangle

At the top set the Radius: to 10px and make sure Paths is selected.
rounded rectangle

Start in the upper left corner and pull out the shape to the lower right corner.

Right click and select Make selection… Feather Radius: 0 and click OK
rounded rectangle

Next hit ctrl+shift+i to invert the selection and hit delete on your keyboard and now the corners are rounded.
rounded rectangle

Add A Stroke

Whether you rounded your corners or not, let's add a stroke to the bg layer.

Double click on the bg layer to open the Layer Style window.

Click on stroke and set size to 1px, Postion: to Inside, and the Color: to black.
stroke

Add the Stripes

Create a new layer and name it stripes.

clickctrl+left-click on the bg layer's Layer Thumbnail to create our selection.

Go to Edit->Fill… make sure Use: is set to Pattern

Now to load the stripes pattern you downloaded. Follow the directions on the image below then browse to the place you saved the stripes pattern and load it in - it will show up at the end of the list of patterns. Click it and hit OK.
fill

opacitySet the Opacity of the stripes layer to about 20%.
stripes

Add the Text

Grab the Text Tool (keyboard shortcut 't').

Set the options to Myriad Pro for the font Bold and 24pt - I used a light gray for the color.
text

Select the text and change the Vertical and Horizontal scale to match the image below.
text

Add the Highlight

Create a new layer and name it highlight.

Using the Pen Tool create a path similar to the image below.
Then right-click and pick Make Selection…
Click OK and fill it with white.
pen tool

Once again ctrl+click on the bg layer's Layer Thumbnail to make it our selection.

With the highlight layer still active hit ctrl+shift+i to invert the selection and hit delete on your keyboard.

Change the opacity of the layer to about 15%.
highlight

Text Reflection

shew… text reflection anyone.
Right-click on the text layer Home and select Duplicate Layer… and click OK.

Go to Edit->Transform->Flip Vertically

Hold down shift and drag the reflection down below the text.

Adjust the Opacityof the reflection to 40% or so or add a layer mask which ever you like. And there you have it - were are done with our Web 2.0 style button.
button
Download the psd file for this Web 2.0 style button and get an extra stripes layer so you can have to colored stripes. To change the color just ctrl+click on the Layer Thumbnail to create the selection and fill it with the color you want.

button
Grab the Photoshop file and the image file

download
Download Files

Popularity: 40% [?]

|2| Comments

Next Page »