Summary:

CSS Header in Dreamweaver

    ●   Make a Gradient Background for your header using only CSS.

    ●   Then find an image you can use in your header, modify it in Photoshop, and float it left or right.


Learn About:

CSS GradientsFloats Filters in Photoshop

  •   This tutorial is part of the Home Sweet Home Portfolio and What in the World? Web Design Projects.

 

 

Other People's Work:

Here are examples of work inspired by this tutorial.

Julia's Portfolio

Maria's Portfolio






Malibu



Step #1: Open your Styles Sheet in Dreamweaver ~

Open your Style sheet …

… scroll down to the bottom of your CSS code and click there.


Step #2: Create a New Style ~

Create a class called .header-box by typing the following:


Step #3: Border Width ~

Copy this code …

	
    background: radial-gradient(#03F, #000);
	background: -webkit-radial-gradient(#03F, #000);
	background: -moz-radial-gradient(#03F, #000);
	background: -ms-radial-gradient(#03F, #000);
	

… and paste it here:


Step #4: Add the Class to your # div ~

Change the color to match your theme.


Step #5: Hex Code Colors ~

Go to: http://www.w3schools.com/tags/ref_colorpicker.asp and pick a color …

OR - if you chose your colors in the Kuler Colors , open it and find the Swatches panel …


Step #6: Change your Colors ~

… change the Hex code numbers and replace the gradient colors to match your theme.


Step #7: Find a Picture you can Use in your Project ~

Find something you can USE IN YOUR PROJECT:

 

… if you're working on your portfolio open a picture of your face …

 

 

 

 

 

… OR, if you're making a map, find an image that represents your destination, like the Eiffel Tower, the Sydney Opera House or something that would look good on your map…

… whatever project you're working on, open the image in Photoshop


Step #8: Where You Gonna Put It?

Now Think: WHERE IS THE IMAGE GOING? In your header:

So it has to be a certain size, right? How tall is your header? Go check it:


Step #9: Crop Tool ~

So get the Crop Tool or hit the keyboard shortcut letter (c) …

… and crop your image so it fits inside your header.


If you're working on your portfolio project, crop your face so it will fit inside your header.


Step #10: Lasso Around your Image ~

Get the Lasso Tool or hit the keyboard shortcut letter (L) …

… and trace around your image.


You can use also use the Magnetic Lasso Tool:


Step #11: Feathering

Go to: Select » Modify » Feather and set the Feather Radius to whatever works for you …

 

 

You don't have to use 25! If you're not sure what the Feather Radius should be, just try it and see.

 

You can always undo it and try again …

 

Step #12: Select Inverse

Now select the inverse by going to:  Select > Inverse or hitting: + shift key+ I.

Then hit Delete delete key and the feathered area should disappear leaving a smooth transition between the two images.



Step #13: Poster Edges Filter ~

Go to: Filter > Filter Gallery

… go to: Artistic » Poster Edges.


Step #14: Contrast ~

Try going to: Image > Adjustments > Brightness/Contrast and change the Brightness Value and the Contrast until you get something you like.


Step #15: Save the Image as a .png ~

Then go to: File > Save for Web … and change the document format as png-24


Step #16: Root Folder ~

Hit Save and put the file in the root folder of your project …


Step #17: Open your header Tag in CSS~

Click inside the header box …

body tag

… and go to: Image > Insert …

… and locate the image you saved in your root folder.


Then type a short description of the image …


Step #18: In-Line CSS ~

Click inside the closing /> tag of the image.


Step #19: In-Line CSS ~

Type    s   t   y    and watch for the code hints to pop up …

… so it looks like this:


Step #20: Float ~

Click between the parentheses and type the letter f to bring up the code hints again select float …

… select left or right depending on which side of the div you want your image.


Float the image to one side and make room for Text:

81_CSS_text-size_Dw.htm or 56_gradient_text_Dw.htm


Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the link …


Other Resources: