Colors help our eyes determine detail. Sometimes, however, multiple colors can disguise details that we do not naturally see. Using shades of one color to wash out a photo or art piece can add to the overall impact and bring out details we might have missed.

This process of either eliminating all color or reducing the color palette to hues within a single shade is generally referred to as monochromatism. In the below examples of monochromatic photos and art, we included images in which the artist focuses your attention using careful color selection. This is not necessarily a single color, even though the word monochromatic means literally one color. Some monochromatic photos bend the rule a bit and incorporate one additional color to the primary shade used.

And don’t confuse monochromatic with black and white, either. While black and white is certainly in the genre, other colors can be used to create a specific mood or draw your eye to various elements of the piece. So let this collection expand your definition of monochromatic a bit and inspire you to reconsider color selection and emphasis in your own work.

Anime Monochrome

Source

Green Bathroom

Source

National Geographic Wallpaper

Source

Watered Album Cover

Source

Monochrome Camels

Source

Yellow Nature Wallpaper

Source

Red Sunset

Source

Green Forest

Source

Black Car

Source

2 Untitled Gouache on Wood Panel Paintings by Lori Ellison

Source

Butterfly on Leaves

Source

Monochrome by Oless (Olivier Stevens)

Source

Hyde’s Mill by NikonD3user1

Source

Monochrome 2 by Oless (Olivier Stevens)

Source

Monochrome 3 by Oless (Olivier Stevens)

Source

Brig o’Balgownie, Aberdeen by PeskyMesky (Graeme Wilson)

Source

Slipstream and Labyrinth II by David Mann

Source

E-Type Monochrome by blueandwhitehoops

Source

Tree in Red by Sunmallia

Source

Time for Reflection by John Bennett of Light and Dreams Photography

Source

Fog Lights byJohn Bennett of Light and Dreams Photography

Source

High on Grass by John Bennett of Light and Dreams Photography

Source

Urban Life by Sunnydayze

Source

Anna Samenina of Muse/NYC by ArtDictator (Adam Regan Photography)

Source

Night Drive by Sunnydayze

Source

Meltaway and Northern White by James Lecce

Source

Burr Oak Redux Monochrome by Notley Hawkins

Source

Green Monochrome Flowers by Lowell Nesbitt

Source

You might also like…

Inspirational and Free Downloadable Photography Magazines →
Beautiful Examples of Photoshopped Smoke Art and Technique Tutorials →
Amazing Images That Could Be HDR – But are definitely Not →
Tutorials for Creating Beautiful HDR (High Dynamic Range) Imagery →
Amazing Examples of Conformal Photography. How do they do this? →
50 Beautiful HDR Images from 50 World Cities →
Beautiful Examples of Photoshopped Smoke Art and Technique Tutorials →
Creative Photography Examples using the Polar Panorama Effect →
Creative and Inspirational Photographs – Distil Ennui →
Examples of Stylish Sabatier (or Solarised) Effect Photography →
Amazing Examples of Conformal Photography. How do they do this? →

The social news community Digg has been online since 2004 and rapidly grew in popularity leading up to the 2008 elections. Come 2011 the Digg team performed an overhaul on the system and completely revamped the site layout. This also broke the friends system, allowing big-name publishers to game the front page. This upset many powerhouse users who were furious with the major changes.

Over time the site has slowly moved back towards its roots as a user-powered news community. And although the domain has lost some credibility, their design skills are still impeccable. So in this tutorial I want to explain how we can build a similar layout using static HTML5 and CSS3 properties. I won’t have time to cover every detail but you can download my attached source code and play around on your own.

Live PreviewDownload Source Code

Building the Header

I’ll tackle major areas in the layout beginning at the top and working down. For starters the heading band has a couple interesting features, namely the navigation links and search form. Here’s the first portion of the code:

<div id="header-wrap">
	<header class="clearfix">
		<a href="#" class="logo">Diggy</a>

		<nav class="clearfix">
			<a href="#" class="sel">Top News</a>
			<a href="#">Newswire</a>
			<a href="#">Newsrooms</a>
		</nav>

As you can tell I’m using a wrapper div to house the entire blue background. However the content is placed inside an HTML5 <header> tag which is centered at 1000px width. For the top navigation I’ve also included the <nav> tag with internal anchor links.

#header-wrap { height: 48px; background-color: #14589e; border-bottom: 1px solid #0d4f92; }
#header-wrap header { display: block; width: 1000px; margin: 0 auto; padding: 7px 15px 5px 15px;  }

#header-wrap header nav a {
margin: -2px 1px -5px 0;
padding: 0 10px;
height: 40px;
line-height: 49px;
display: block;
font-size: 1.3em;
font-weight: bold;
color: #fff;
float: left;
}
#header-wrap header nav a.sel {
background-color: #194989;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#header-wrap header nav a:hover {
background-color: #194989;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
cursor: pointer;
}

It’s so much easier to setup block-style links and float them right next to each other. Also I’ve taken advantage of the CSS3 rounded corner properties, both on these links and for the categories list. Even the register and login buttons are using rounded corners. They look fantastic and have been a luxury up until now.

Categories List

Instead of setting up another nav element I’ve instead used an unordered list of links. The categories block underneath the header is actually placed inside another div with the ID #core-content. This centers the rest of our page to the 1000px width while also letting the background flow 100% of the browser window.

I copied over most of the important CSS properties for this section. It’s easy to get lost, but the links do look incredible. In fact, both the containing div and unordered list have bottom borders. This gives off the illusion of a double division line.

#core-content .categories { border-bottom: 1px solid #ccdcef; padding-bottom: 2px; }
#core-content .categories ul { border-bottom: 1px solid #ccdcef; padding: 10px 0; list-style: none; width: 100%; }
#core-content .categories ul li { margin-right: 8px; float: left; }

#core-content .categories ul li a { display: block; float: left; font-size: 1.2em; line-height: 1.1em; border: 1px solid transparent; color: #105cb6;  font-weight: bold; padding: 5px 9px 7px; text-decoration: none; }
#core-content .categories ul li a:hover { text-decoration: underline; }
#core-content .categories ul li.sel {  }
#core-content .categories ul li.sel a { background-color: #e3e8f4; border-color: #ccdcef;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }

Listing the Articles

The frontpage links list is probably Digg’s official calling card. You can tell these individual blocks consist of quite a bit of markup – but it’s fairly simple to explain.

<!-- begin story 1 -->
<div class="story clearfix">
	<div class="diggbtn">
		<div class="badge">
		<a href="#" class="count-wrap"><span class="numcount"><span>60</span></span></a>
		<a href="#" class="diggit"></a>
		</div>
	</div>

	<div class="story-content">
		<div class="media"><a href="#"><img src="images/thumbs/s01.png"></a></div>
		<div class="details">
			<h2><a href="#">Obamas kick off campaigning with rallies in must-win states</a></h2>
			<p>
			<a href="#" class="sourcedomain">reuters.com</a>
			<a href="#" class="teaser">— WASHINGTON (Reuters) - With his wife at his side and Air Force One as a campaign plane, President Barack Obama holds his first political rallies <span class="timestamp">2 mins ago</span></a>
			</p>
		</div>
		<ul class="meta">
			<li class="submitter">via <a href="#">Mikeymicron</a></li>
			<li class="comment"><a href="#">2 Comments</a></li>
			<li class="save"><a href="#">Save</a></li>
			<li class="bury"><a href="#">Bury</a></li>
		</ul>
	</div>
</div>

The wrapping div for each article has a class of .story. Inside are two more story classes: .badge for the voting bade and .story-content for everything to the right side. This would include the title, description, meta links, and thumbnail photo if available.

All of the styles for these elements are segregated into their own section of the stylesheet. The yellow digg badge uses a static BG image with dynamic text for the voting numbers. But overall there are way too many styles to go over, many of which do not contain anything new or interesting. But I have copied just the beginning portion for your reference.

/** stories **/
#core-content #left-col .story { display: block; border-bottom: 1px solid #ccdcef; padding: 10px 0; margin-bottom: 10px; }

#core-content #left-col .story .story-content { margin-left: 66px; }
#core-content #left-col .story .story-content .details { margin-bottom: 7px; }
#core-content #left-col .story .story-content .details h2 { display: block; font-size: 1.65em; line-height: 1.2em; margin-bottom: 8px; text-decoration: underline; font-weight: bold; }
#core-content #left-col .story .story-content .details h2 a { text-decoration: underline; }
#core-content #left-col .story .story-content .details h2 a:hover { text-decoration: none !important; color: #121212; }

#core-content #left-col .story .story-content .details p { margin-bottom: 12px; }
#core-content #left-col .story .story-content .details p a { color: #666;  }
#core-content #left-col .story .story-content .details p a:hover { color: #898989; }
#core-content #left-col .story .story-content .details .sourcedomain { border-bottom: 1px solid #cedbf1; color: #5f88ce; }
#core-content #left-col .story .story-content .details .sourcedomain:hover { color: #5f88ce; }
#core-content #left-col .story .story-content .details .timestamp { font-size: 0.9em; color: #999; }

Pagination Buttons

There is a small block located after all of the stories containing pagination links. This is also setup with an unordered list attached with special class names. I copied over the basic HTML in the snippet below.

<!-- paged navigation -->
<ul class="paged-navigation">
	<li class="prev"><a href="#" class="btn-default disabled">Prev</a></li>
	<li class="num">Page 1</li>
	<li class="next"><a href="#" class="btn-default">Next</a></li>
</ul>

The next and previous links are setup to float over to the left and right side. Meanwhile the main centered number text will actively display which page number you’re currently viewing. When you cannot go back or forward anymore the buttons are given an additional class .disabled. This simply drops the opacity down 50%, making the link appear inactive.

#core-content #left-col ul.paged-navigation {
display: block;
width: 100%;
background-color: #eee;
margin: 10px 0;
padding: 7px;
padding-top: 15px;
padding-bottom: 13px;
list-style: none;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#core-content #left-col ul.paged-navigation .disabled { opacity: 0.5; cursor: default; }
#core-content #left-col ul.paged-navigation .disabled:hover { cursor: default; }

#core-content #left-col ul.paged-navigation .prev { float: left; }
#core-content #left-col ul.paged-navigation .next { float: right; }
#core-content #left-col ul.paged-navigation .prev a, #core-content #left-col ul.paged-navigation .next a {
width: 3em;
font-size: 1.1em;
padding: 6px 10px;
}

#core-content #left-col ul.paged-navigation a.btn-default {
background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#f3f3f3));
background: -moz-linear-gradient(top,#ffffff,#f3f3f3);
background-color: #f3f3f3;
border: 1px solid #aaa;
color: #333;
text-shadow: #fff 0 1px 0;
zoom: 1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-weight: bold;
letter-spacing: -0.03em;
line-height: 1.25em;
}

This is the last block piece we have before closing the main left column. The whole content div is made up of just a left and right side, plus a simple footer. The style is very minimalist and works in the same archetype as classic Digg.

Splitting Up the Footer

Looking inside the main #core-content div I’ve actually squeezed three main blocks. The left and right columns are floating next to each other inside a cleared container. Both are fitted with the HTML5 <section> tag. And we’re also using <footer> in the very bottom block of links.

<footer>
	<ul class="data">
		<li class="copy">Original Design by <a href="http://digg.com/">Digg Inc.</a></li>
		<li><a href="#">About Digg</a></li>
		<li><a href="#">Advertise</a></li>
		<li><a href="#">Partners</a></li>
		<li><a href="#">API & Resources</a></li>
		<li><a href="#">Blogs</a></li>
		<li><a href="#">Contact Us</a></li>
		<li><a href="#">Jobs</a></li>
		<li><a href="#">Help & FAQ</a></li>
		<li><a href="#">Terms of Service</a></li>
		<li><a href="#">Privacy</a></li>
		<li><a href="#">Top 100</a></li>
	</ul>
</footer>

All of the main components are fairly straightforward to understand. There are possibly some newer properties I’ve used which you have never encountered before. But with just a quick Google search you can look further into all of them.

I left the right column open so there’s much more room for different block areas. These could include popular stories or recently logged in users. Overall I wanted the layout to be simple – merely a template to pay homage to Digg’s fantastic work. And also to prove that you can really build anything in HTML5 and CSS3.

Live PreviewDownload Source Code

Conclusion

Rebuilding the Digg v4 layout from scratch is exciting and certainly fun. Their team is very talented, and I’ve always been a fan of the social news genre. As I mentioned earlier feel free to download my example source code and play around with some of the properties. It’s easy to reorganize page elements and sample them in your own layouts.

You might also like…

How to Build an Accordion Image Gallery with only CSS →
Scroll to Internal Link with jQuery →
How to Build a Sliding One Page Portfolio with jQuery →
Hoverizr – An in depth view of the jQuery plugin →
Rubber Layouts – Combining Static and Fluid Layouts →
How to Build a Fully Functional CSS3-Only Content Slider →
Resize Images in a Post with jQuery, and turn it into a plugin →
Getting Started with WordPress Shortcodes (+Examples) →

It has been well over a year since we last took a look at some of the latest CSS3 buttons techniques. And what a difference a year makes.

No longer satisfied with just using the basic CSS3 properties (border-radius, box-shadow…), many developers have progressed to using @font-face icons, animation and 3D effects. All with only CSS.

Hope you enjoy this selection:

CSS Social Buttons

CSS Social ButtonsView the Demo

Orman Clark’s Chunky 3D Web Buttons

Orman Clark’s Chunky 3D Web ButtonsView the Demo

CSS Buttons with Pseudo-elements

CSS Buttons with Pseudo-elementsView the Demo

Soft, Customizable Pressure Buttons in CSS

Soft, Customizable Pressure Buttons in CSSView the Demo

Animated Buttons with CSS3

Animated Buttons with CSS3View the Demo

Awesome CSS3 Buttons

Awesome CSS3 ButtonsView the Demo

Simple CSS3 Buttons

Simple CSS3 ButtonsView the Demo

Animated Download Button With CSS3

Animated Download Button With CSS3View the Demo

How to Create CSS3 Buttons

How to Create CSS3 ButtonsView the Demo

Free CSS3 Button Styles

Free CSS3 Button StylesView the Demo

CSS3 Google UI

CSS3 Google UI

Google+ Styled UI Buttons

Google+ Styled UI Buttons

Twittter Buttons

Twittter Buttons

CSS3 Buttons

CSS3 Buttons

CSS3 Buttons

CSS3 Buttons

Fancy 3D-Button

Fancy 3D-ButtonView the Demo

Add to Cart Buttons

Add to Cart ButtonsView the Demo

3D Facebook Button Concept

3D Facebook Button ConceptView the Demo

Animated CSS3 Buy Now Button

Animated CSS3 Buy Now Button

You might also like…

22 CSS Button Styling Tutorials and Techniques →
20 Awesome jQuery Enhanced CSS Button Techniques →
20 CSS3 Tutorials and Techniques for Creating Buttons →
CSS3 Menu and Navigation Tutorials →
25 Free Fonts Perfect for @fontface → & @fontface Icons →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
Pure CSS Alternatives to Javascript →
40 Essential CSS Templates, Resources and Downloads →

Or, you could browse our extensive CSS Archives →

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :)
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

CSSPop – The Snippet Community

The Toolbox – A Directory of Useful Single-Page Sites & Apps

Responsive IE6 – Test your site's responsiveness in IE6

BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS

A Separate Mobile Website: No Forking Way

How To Build A Real-Time Commenting System

Mastering CSS Gradients in Less Than 1 Hour

How to Make Smooth Transitions with CSS3

How to Create a Fast Hover Slideshow with CSS3

Fixed Table of Contents Drop-Down Menu (jQuery Plugin)

How to Create an Video Player in jQuery, HTML5 & CSS3

A Newbie’s Guide to Android Development

Which Responsive Images Solution Should You Use?

Getting Started With RESS

Sketch 2: A Worthy Photoshop Competitor?

How to Use Drop Shadows in Photoshop

Amazing Paper Typography

Free Vector Map Location Pins

Free Stained Paper Textures

41 Free Social Media/Networking Icons (PNG)

This Week on CodeVisually

Here are our favorite webdev resources from the past week:

Few weeks ago, we covered the European Union’s Cookie Law, and its implications on websites based in Europe. Thereafter, we have also covered the reactions to the said law. In fact, as a UK-based site, Speckyboy itself firmly stands in support of such protests against the Cookie Law.

Speaking of protests, Silktide, one of the most prominent critics of the Cookie Law and the brains behind concepts such as No Cookie Law and the popular YouTube video The Cookie Law in Under Three Minutes, has come up with a free open-source solution to the EU Cookie Law, named Cookie Consent.

In simplest terms, Cookie Consent is a Javascript plugin created specifically for websites that are required to comply with the Cookie Law. Once installed on your website, the plugin will show your users a drop down message, asking them whether or not they’d like to allow cookies or not. Neat, eh?

Apart from setting preferences for your own website, users can also set Global Preferences, which means they can enable or disable plugins for all websites in one go! As the webmaster, you can specify whether the drop down occurs from the top or the bottom of your site, and you can use custom CSS to customise its look and feel. And just in case that doesn’t make you happy, Cookie Consent is licensed under GNU GPL, so you can redistribute and modify it, if so needed.

Useful URLs

Cookie Consent Homepage →
Cookie Consent Documentation →

Over to you: what do you think of Cookie Consent and the underlying logic? Will you be using it on your website? Do share your thoughts with us in the comments.