Curvaceous or columnar?

If you are wondering how to get curvy boxes without Photoshop and nice looking page layouts with columns, then read on.

CSS3 means you can design with code!

Modify your theme style sheet with CSS3, do things with gradients, transitions and curves, and stripe tables, without going anywhere near Photoshop nor or a theme template.

 

To achieve the above, you need a little bit of css:

#pic-container {
background: #E3E3E3;
font: normal normal normal 12px/1.6em helvetica, arial, sans-serif; margin: auto;
padding: 12px;
width: 600px;
-moz-border-radius: 18px;
border-radius: 18px;}

#pic-container p {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;}

Just place the above code in the custom css editor, modify and then wrap your image in a div id called pic-container and stick the caption in a paragraph block. Older browsers may not show off your hard work, but should degrade ‘gracefully’.
Google ‘CSS3 generator’ for a head start!

By @ourlocality

@OurLocality
Publishing Locally in East Lothian since 2010
JOIN FREE