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.
✓ CSS Gradients✓ Floats ✓ Filters in Photoshop
Other People's Work:
Here are examples of work inspired by this tutorial.
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: + + I.
✗ Then hit Delete 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 …
✓ … 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:
Last Step: Save and Upload your Work ~
✓ If you have a web server, save your pages, upload them and attach the link …