Advanced CSS

50 Awesome Animations made with CSS3

See this site for great CSS tricks

Link Psuedoclasses

There are a lot of things you can do to add to the overall design of your site. One important detail is how you style your links. Today, we will go over the type of selector that allows us to do this: the pseudoclass

a:link    Applies a style to unclicked or unvisited links
a:visited   Applies a style to links that have already been clicked
a:hover    Applies a style when the mouse pointer is over the link
a:active   Applies a style when the mouse pointer is pressed

Psuedoclasses are indicated by the colon(:) character

CSS Transparency

A few people have asked about this, so I did some research. Here are the best links I could find for you, and if we have time next week, we’ll do a demo.

The W3C explanation

Different browsers define transparency differently, so here are some articles to help with that:

CSS Transparency in All The Browsers

CSS Transparency Settings for All Browsers
By: Chris Coyier

Update: the use of RGBa in CSS

Dreamweaver Tutorial – Transparent Overlays
Part 1 | Part 2

Step One

Download this image.

Step Two

  1. Create a folder called transparency
  2. Inside of that, create a file called index.html using Dreamweaver
  3. Also create 2 additional folders, called docs and images
  4. Create a style sheet, name it styles.css, and save it in the docs folder
  5. Link styles.css to index.html
  6. Drop the image you downloaded into the images folder

Step Three

  1. Open index.html and enter the following html:
    <div id="mainbox">
     <div id="transbox">
     <p>Enter some text here.</p>
  2. Now open styles.css and add the following css:
    #mainbox {
     background-image: url(../images/daisy_sm.jpg);
     height: 400px;
     width: 500px;
     position: relative;
    #transbox {
     background-color: #0A1D0A;
     height: 200px;
     width: 300px;
     filter: alpha(opacity=70);
     opacity: 0.7;
     position: absolute;
     left: 86px;
     top: 64px;
    #transbox p {
     font-family: Georgia, "Times New Roman", Times, serif;
     color: #FFF;
     font-size: .85em;
     padding-right: 20px;
     padding-bottom: 20px;
     padding-left: 20px;

When you view the html, you should see something like this:

Articles used to write this lesson:

CSS Image Opacity / Transparency


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s