CSS3 Transparency and Rounded Corners

Objectives

In this lesson, students will learn:

  • How to use the browser specific styles with vendor prefixes:
  • How to make partially transparent pictures and colors:
    rgba( ) and opacity property
  • How to create rounded corners using the border-radius property

Vendor Prefixes

Transparency
Rounded Corners

Transparency
The key difference between the two declarations is this:
Opacity sets the opacity value for an element and all of its children;
RGBA sets the opacity value only for a single declaration.


Resources
Vendor Prefix
CSS Opacity / Transparency
CSS3 Rounded Corners


Files to Download
Dog
Lime

Advertisements