Downloadv1.1

Widgets

CSS Cement includes lots of optional widgets that can be turned on and off and can have many options configured.

Because everything in here is optional your CSS file will only be as big as it needs to be.

Badges

Badges are useful when you want to show the number of items something contains such as the number of emails in a folder or items in a basket.

blah blah 1 blah blah 10 blah blah 100 blah blah 1,000

Bar charts

Most bar chart solutions rely on Javascript, not any more.

X Axis Y Axis
Result number 1
52%
Result number 2
20%
Result number 3
10%
Result number 4
8%
Result number 5
8%
Result number 6
2%

Calendar

Chat boxes, messaging or quotes

Comments or live chat can be displayed as speach bubbles.

Ah'll learn thi breadcake god's own county.
Tha what shu' thi gob.
Aye big girl's blouse t'foot o' our stairs. Chuffin' nora tha knows bloomin' 'eck sup wi' Tha daft apeth shu' thi gob breadcake. Aye big girl's blouse t'foot o' our stairs. Chuffin' nora tha knows bloomin' 'eck sup wi' Tha daft apeth shu' thi gob breadcake
Im dahn t'coil oil.
Tha daft apeth shu' thi gob breadcake michael palin

Corner ribbons

Made popular a few years ago, ribbons can be a good way to highlight a feature or mark something as special.

top left
top right
bottom left
bottom right

abaht how much shu' thi gob tha daft apeth. Any rooad. Mardy bum shu' thi gob. Shu' thi gob nay lad nobbut a lad t'foot o' our stairs. Shu' thi gob nay lad. Aye be reet shu' thi gob how much nah then.

Nay lad. Michael palin ah'll gi' thi summat to rooer abaht breadcake eeh. Dahn t'coil oil th'art nesh thee tell thi summat for nowt.

abaht how much shu' thi gob tha daft apeth. Any rooad. Mardy bum shu' thi gob. Shu' thi gob nay lad nobbut a lad t'foot o' our stairs. Shu' thi gob nay lad. Aye be reet shu' thi gob how much nah then.

Nay lad. Michael palin ah'll gi' thi summat to rooer abaht breadcake eeh. Dahn t'coil oil th'art nesh thee tell thi summat for nowt.

abaht how much shu' thi gob tha daft apeth. Any rooad. Mardy bum shu' thi gob. Shu' thi gob nay lad nobbut a lad t'foot o' our stairs. Shu' thi gob nay lad. Aye be reet shu' thi gob how much nah then.

Nay lad. Michael palin ah'll gi' thi summat to rooer abaht breadcake eeh. Dahn t'coil oil th'art nesh thee tell thi summat for nowt.

abaht how much shu' thi gob tha daft apeth. Any rooad. Mardy bum shu' thi gob. Shu' thi gob nay lad nobbut a lad t'foot o' our stairs. Shu' thi gob nay lad. Aye be reet shu' thi gob how much nah then.

Nay lad. Michael palin ah'll gi' thi summat to rooer abaht breadcake eeh. Dahn t'coil oil th'art nesh thee tell thi summat for nowt.

Dialog boxes

Sed quis enim nisl.

Feature boxes with optional caption

Hover effects and captions can be added to a plain old image to make a feature of it.

Forum threads

A clean and simple way to style a user forum.

abaht how much shu' thi gob tha daft apeth. Any rooad. Mardy bum shu' thi gob. Shu' thi gob nay lad nobbut a lad t'foot o' our stairs. Shu' thi gob nay lad. Aye be reet shu' thi gob how much nah then.

Nay lad. Michael palin ah'll gi' thi summat to rooer abaht breadcake eeh. Dahn t'coil oil th'art nesh thee tell thi summat for nowt.

abaht how much shu' thi gob tha daft apeth. Any rooad. Mardy bum shu' thi gob. Shu' thi gob nay lad nobbut a lad t'foot o' our stairs. Shu' thi gob nay lad. Aye be reet shu' thi gob how much nah then.

Nay lad. Michael palin ah'll gi' thi summat to rooer abaht breadcake eeh. Dahn t'coil oil th'art nesh thee tell thi summat for nowt.

Gallery

Portfolios, brochures and photo sharing sites can all make use of a gallery feature.

Highlighted content box

Need to make something stand out? A highlight box is what you need.

abaht how much shu' thi gob tha daft apeth. Any rooad. Mardy bum shu' thi gob. Shu' thi gob nay lad nobbut a lad t'foot o' our stairs. Shu' thi gob nay lad. Aye be reet shu' thi gob how much nah then.

Nay lad. Michael palin ah'll gi' thi summat to rooer abaht breadcake eeh. Dahn t'coil oil th'art nesh thee tell thi summat for nowt.

Loading…

Progress bar

A new and not often used feature of HTML 5 is the progress bar.

Tables

Tables are never much fun to style so we have taken some of the effort out of it with a number of different options. Many of the options below can be combined together to create different styles such as horizontal borders on a comparrison table or a hover effect on a stripey table.

Comparrison tables

Header Header Header Header Header Number
Footer Footer Footer Footer Footer 123
Content Content Content Content Content 999
Content Content Content Content Content 1
Content Content Content Content Content £1000,000
Content Content Content Content Content 100,000

Alternating stripes

Header Header Header Header Header Number
Footer Footer Footer Footer Footer 123
Content Content Content Content Content 999
Content Content Content Content Content 1
Content Content Content Content Content £1000,000
Content Content Content Content Content 100,000

Hover over rows

Header Header Header Header Header Number
Footer Footer Footer Footer Footer 123
Content Content Content Content Content 999
Content Content Content Content Content 1
Content Content Content Content Content £1000,000
Content Content Content Content Content 100,000

Horizontal borders

Header Header Header Header Header Number
Footer Footer Footer Footer Footer 123
Content Content Content Content Content 999
Content Content Content Content Content 1
Content Content Content Content Content £1000,000
Content Content Content Content Content 100,000

All borders

Header Header Header Header Header Number
Footer Footer Footer Footer Footer 123
Content Content Content Content Content 999
Content Content Content Content Content 1
Content Content Content Content Content £1000,000
Content Content Content Content Content 100,000

Static Tabs

Tabbed content can be great when you need to split content up and want to avoid long scrolling pages.

abaht how much shu' thi gob tha daft apeth. Any rooad. Mardy bum shu' thi gob. Shu' thi gob nay lad nobbut a lad t'foot o' our stairs. Shu' thi gob nay lad. Aye be reet shu' thi gob how much nah then.

Nay lad. Michael palin ah'll gi' thi summat to rooer abaht breadcake eeh. Dahn t'coil oil th'art nesh thee tell thi summat for nowt.

Tags

Tags are great for filtering data.

Zoomer