Transparent Colors in Dreamweaver

I wanted my website for this class to reflect my personality in its aesthetic design. I’m a fairly linear thinker; I like for things to be very organized and streamlined, divided up neatly into boxes and lists. For my website, I got the idea to use containers in CSS to make each heading and paragraph inside its own personal space, and color coded the containers on each page according to their respective colors on the navigation (Home) page. The About page is pink, the Photo page is purple, and so on.

I did this by making containers in CSS of the appropriate dimensions and specifying the font and size and everything. I chose the colors for each container using the color select option (for background-color) in Dreamweaver:

Image

I did pink for the first heading on the home page and all the headings and text on my About page. I chose the color I wanted using the first and second sliders (color and lightness):

Image

But the third slider, I discovered, controls transparency. I adjusted it and made the pink boxes more transparent. Then I clicked on the RGBa option in the bottom of the color choosing box:

Image

This shows the amount of Red (255), Green (76), and Blue (0) coloring in my chosen shade. The last number is the opacity (.70 or about 70% opacity). Then I copied and pasted the color code into the CSS objects/containers for all of my headings and everything that corresponded to the About page (which I wanted to be pink). Then I did the same thing for all my other pages, choosing different colors for each page but 70% opacity for each.

The result looks really cool. It gives a little bit of depth and dimension to the page while still keeping the elegant, streamlined design I wanted. It was really easy and it kept my page simple while not being too plain.

J.E.B.

Advertisements

3 thoughts on “Transparent Colors in Dreamweaver

  1. Hi!

    So in class you showed me how to do this but you said you used a different version of Dreamweaver. I’m having trouble finding where to change the opacity in CS6 (the version we have on the school computers). You’ll see on this version that it doesn’t automatically let you adjust each color but rather just gives you a code. Do you have any suggestions/ know how to do this in CS6? I’d really appreciate the help.

    Thanks!

    TS

    • Okay so I found a website called http://www.color-hex.com. In the search bar at the top, just type in the #000000 hex code and click search, and it will give you all the color information with many different types of color codes including RGB. Then you can just type that into the CSS and put the transparency % after the RGB code.

  2. This helped me a lot for my website design. I am using transparent boxes in the background of certain things and this made my life a lot easier! You’re right that it adds a lot of depth! Thank you for the tip!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s