1. CSS3 Examples Page

This page showcases a set of CSS3 examples which are explained in further detail through a series of articles on Design Shack:
Please Note: If any of these examples are not appearing as expected, it is due to your browser not supporting CSS3 features. Safari/Webkit, Firefox and Opera support many of these features in their latest versions.

2. CSS3 Borders


This is an example of a box with gradient border

Rounded Corners

This is an example of a box with rounded borders

Shadow Borders

This is an example of a box with a drop shadow

Image Borders

This is an example of a box with an image border

3. CSS3 Text Effects

Text Shadow

This is an example of text with a shadow applied

Word Wrapping

This paragraph has long words thisisaveryverylongwordthatwouldneveractuallybe and again a longwordtodemonstratethisdesignshacktutorial

4. CSS3 User Interface


This area can easily be resized by clicking and dragging at the corner. Have a play!

Box Sizing

This box is on the left.
This box is on the right.

Outline Offset

This paragraph has a border, and then an outline around the whole element offset by 15px.

5. CSS3 Multi Columns

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.


Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit. Nullam a nibh. Nam quis diam non ligula pharetra sagittis. Maecenas rhoncus est vel tortor. Fusce in sem. Mauris in risus id lorem volutpat elementum. Pellentesque adipiscing laoreet ligula. Suspendisse erat. Donec porta auctor lacus. Vestibulum cursus, orci eget mollis ullamcorper, enim massa elementum dui, sed consequat nibh nisi eu tellus.

6. CSS3 Backgrounds

Multiple Backgrounds

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla commodo. Pellentesque mattis velit et nunc. Donec sed sem rhoncus ligula vestibulum tincidunt.

Nam gravida. Praesent leo. Etiam rhoncus, erat eu iaculis gravida, magna dui tincidunt dolor, id sodales eros pede ac risus. Quisque aliquet arcu sed sapien. Vivamus vulputate. Duis venenatis quam eget quam.

Background Size

This div has the Design Shack logo resized and placed in the top left corner of the area. Provides many more possibilities for re-using graphics and images.