PRACTICING THE NEW CSS3 FEATURES

This page shows some examples about the main new features introduced by CSS3.
The sample CSS properties contained here regard following features:

  • Round border: using the BORDER-RADIUS property
  • Shadow border: using the BOX-SHADOW property
  • Text shadow effect: using the TEXT-SHADOW property
  • Background alpha-value: using the BACKGROUND: rgba() property
  • Border images: using the BORDER-IMAGE property
  • Columns layout: using the COLUMN-COUNT property
To see the CSS definitions click on the show code label below, or have a look to the HTML source of this page.

Border class
Shadow class
Text-shadow class
Alpha class (1)
Alpha class (2)
Alpha class (2)
Border images
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas malesuada purus vitae elementum. Suspendisse tincidunt imperdiet tempus. Nam non nunc odio, dignissim mattis lorem. Ut porttitor, quam quis commodo ullamcorper, risus justo molestie lectus, vitae mattis lacus justo vel nibh. Mauris massa leo, cursus vitae eleifend in, dignissim suscipit magna. Praesent eu nunc et eros tristique interdum. Ut suscipit augue id enim ornare id imperdiet mauris congue. Etiam egestas facilisis dui, quis porttitor metus fermentum eu. Cras molestie nisi vitae neque blandit id ornare magna.
Show code