How to Apply Opacity/Transparency in CSS3

The opacity or transparency is a new effect in CSS3. Designers are really in the early stages of experimenting with this effect. In CSS3, transparency is defined by assigning a value to the opacity property. A fully opaque object completely obscures whatever is behind it; objects that aren’t fully opaque are partially see-through, or transparent.

Defining semitransparent backgrounds for page layout elements with CSS3 presents some exciting options for web designers. Semitransparent backgrounds are often used, for example, in drop-down lists. There, the drop-down menu elements have .5 opacity assigned (they are 50 percent transparent). As a result, the underlying page content remains visible when a menu drops down.

The opacity property is defined with a value ranging from 0 (completely invisible) to 1 (fully opaque; not transparent at all). So, for example, an opacity value of .8 makes an object 80 percent opaque, and so on.

The opacity property does not require prefixes for different browsers. The syntax is simple:

opacity: .x

The drop-down list shown, for example, is defined as such:

.menu_box {
      background-color: #999;
      padding: 2px;
      color: #333333;
      opacity: .5;
}

Web Design & Development Glossary

AJAX

asynchronous JavaScript and XML. A technique used in web page development.

Web Design & Development Glossary

API

application programming interface. A set of rules programs use to communicate with each other.

Web Design & Development Glossary

color stop

A special element that indicates a color to be added to a gradient.

Web Design & Development Glossary

FTP

File Transfer Protocol. A network protocol useful for transferring files in a client-server relationship.

Web Design & Development Glossary

HTML

HyperText Markup Language. The predominant language for building web pages.

Web Design & Development Glossary

HTTP

HyperText Transfer Protocol. The primary networking language for the Internet.

Web Design & Development Glossary

PHP

PHP Hypertext Processor. A scripting language that works well within HTML.

Web Design & Development Glossary

socket

A technology that allows remote computers to maintain a persistent connection in order to communicate with each other.

Web Design & Development Glossary

sprite

An graphic object on a web page that will be manipulated in real time.

Web Design & Development Glossary

SQL

Structured Query Language. A programming language useful in managing relational databases.

Web Design & Development Glossary

stateless protocol

An Internet procedure that completely breaks the connection between the client and the server after a transaction, meaning that the next transaction will require an entirely new connection.

Web Design & Development Glossary

Telnet

A network protocol useful in interactive, text-oriented communications.

Web Design & Development Glossary

W3C

World Wide Web Consortium. The organization that sets international standards for the World Wide Web.