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
Gradients
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
Resizing
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.
Heading
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.