From the Mad Lab – Building a Gallery of Content using Pure CSS

HB Admin | Mad Lab | 12 Comments

We are back with another issue of the “The Mad Lab” posts. This time we are putting the idea of arranging some visual content block – a block of HTML containing text, images, links etc – in to a super sexy interactive content gallery. Last time we created a slick image gallery display and this time we are going to tame some HTML code blocks in to a visual gallery presentation with interactive responses all using plain and pure CSS3 declarations.

Keeping up with the tradition of “The Mad Lab” posts we are experimenting with CSS and are presenting our readers with a solution that may not be practical in any manner. But they can slice, dice and mince the code to make it useful and practical for their own personal use.

This second post from “The Mad Lab” is going to be equally funny as its predecessor creation as we are making a fun filled CSS only content gallery which is going to be visually rocking with cool animations, pop out effects etc. all without using a single line of JavaScript or any other client side scripting engines. We are going to build this pure CSS Content gallery using plain HTML mark-up and CSS only.

So here is the Pure CSS Content Gallery

The goal of this session is to build a gallery of content like the one given in the screen shot below:

We are going to give birth to an imaginary back issues store for the Discover magazine and in it the back issues are going to be presented in a cool grid based display where information about each issue makes up the individual elements of the final interactive gallery. We are going to present a title, cover image, some details of the issue, and a link to the imaginary back issue order tracking system as the content for each issue of the magazine. Instead of just plainly presenting them we are going to arrange them in to an interactive and splashy gallery made up of these HTML content. Like an image gallery we are going to arrange HTML code block in to gallery items.

If you want to take a sneak peek at this gallery now, then use the demo given below.

In order to make this gallery we are going to use all the power of CSS and the new CSS3 specification and use various CSS techniques like Web-Fonts, CSS Drop Shadows, CSS Curved Borders, CSS Transition Effects and CSS 2-Dimensional Transforms. The motive of this small mad project is to make the reader familiar with some of the latest additions of features in the CSS specification.

So without any further waiting let’s get cracking.

Step 1 – The HTML Mark-up

First things First! Let’s create the mark-up for the content gallery as the initial step.

The gallery is going to be wrapped in a container and each gallery item is going to be wrapped inside a list item. Each gallery item is made up of still more HTML content in the form of H2 tags, text content, img tags and link content.

<html>
<head>
<meta charset="utf-8">
<title>Back Issues Gallery aka The CSS3 Content Gallery</title>
</head>
<body>
<h1>Discover Back Issues Department</h1>
<div id="container"><div id="container2">
<ul id="gallery">
<li> <h1>January 2010</h1><img src="./gallery/1.jpg" align="left"><h2>The Year In Science Special</h2> <br/><p><b>100 Top Stories of 2009 </b>- A special report on 100 astonishing discoveries from the past year the ideas and breakthroughs that are reshaping our understanding of the world. </p><p><b>20 Things You Didn't Know About Dwarf Planets </b>- A special report on 100 astonishing discoveries from the past year the ideas and breakthroughs that are reshaping our understanding of the world. </p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>March 2010</h1><img src="./gallery/2.jpg" align="left"><h2>The Time Travel Special</h2> <br/><p><b>How to travel through time? </b>- Time travel seems paradoxical only because it conflicts with our notions of free will</p><p><b>Who are you calling Bird Brain? </b>- The amazing smarts of
crows, jays, and other corvids are forcing scientists to rethink when and why intelligence evolved.</p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>April 2010</h1><img src="./gallery/3.jpg" align="left"><h2>Einstein Special</h2> <br/><p><b>3 Radical Theories challenge his ideas of space and time</b>- For many years we have assumed that the laws of the universe have never changed and never will. But what if that is not so? What if evolution is at work not only in biology but also in the cosmos?</p><p><b>20 Things you didnt knew about Viruses</b>- Viruses are not alive: They do not have cells, they can-
not turn food into energy, and without a host they are just inert packets of chemicals</p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>May 2010</h1><img src="./gallery/4.jpg" align="left"><h2>New Facts about Moon</h2> <br/><p><b>Machine Dreams</b>- The movies have brainwashed us into thinking that robots should look like people, but the revolution isn't turning out that way. How are the machines changing, and how will they change us?  </p><p><b>The Body Shop</b>- No longer the fancy of science fiction, androids are here right now - draped in fleshlike rubber and programmed to ease our fears.</p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>June 2010</h1><img src="./gallery/5.jpg" align="left"><h2>Clean Energy Special</h2> <br/><p><b>It's Alive</b>- Is anything stirring on the dusty surface of the Red Planet? A few bold scientists say we need speculate no longer: We have already found strong evidence of life on Mars. </p><p><b>Leaf Power</b>- Breakthrough research is making our energy supply cleaner, safer, and more secure. Scientists are even learning to master nature itself - re-creating
photosynthesis in the lab.</p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>July 2010</h1><img src="./gallery/6.jpg" align="left"><h2>Invisible Planet</h2> <br/><p><b>Dinosaur Footprints</b>- The dinosaurs are long gone, but
their tracks remain,  telling strange tales of where the creatures went and how they lived.</p><p><b>The Gene Healer</b>- First he made a machine that can
read DNA at lightning speed. Now Leroy Hood wants to reach into the genome to revolutionize medicine.</p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>September 2010</h1><img src="./gallery/7.jpg" align="left"><h2>The Next Frontier</h2> <br/><p><b>Is evolution making us dumber?</b>- The dinosaurs are long gone, but their tracks remain,  telling strange tales of where the creatures went and how they lived.</p><p><b>How to build a Super Nova</b>- First he made a machine that can read DNA at lightning speed. Now Leroy Hood wants to reach into the genome to revolutionize medicine.</p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>October 2010</h1><img src="./gallery/8.jpg" align="left"><h2>Special Anniversary Issue</h2> <br/><p><b>Thirty Years that changed Everything</b>- The dinosaurs are long gone, but their tracks remain,  telling strange tales of where the creatures went and how they lived.</p><p><b>Life under the Bubble</b>- First he made a machine that can read DNA at lightning speed. Now Leroy Hood wants to reach into the genome to revolutionize medicine.</p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>November 2010</h1><img src="./gallery/9.jpg" align="left"><h2>Did Life begin in Space?</h2> <br/><p><b>Is evolution making us dumber?</b>- The dinosaurs are long gone, but their tracks remain,  telling strange tales of where the creatures went and how they lived.</p><p><b>Confessions of a Bionic man</b>- First he made a machine that can read DNA at lightning speed. Now Leroy Hood wants to reach into the genome to revolutionize medicine.</p><a href="#">Purchase From Back Issues Dept</a></li>
<li> <h1>December 2010</h1><img src="./gallery/10.jpg" align="left"><h2>The Coming Plague</h2> <br/><p><b>The Biggest Secret in Astronomy</b>- The dinosaurs are long gone, but their tracks remain,  telling strange tales of where the creatures went and how they lived.</p><p><b>Eye to eye with our Ancestors</b>- First he made a machine that can read DNA at lightning speed. Now Leroy Hood wants to reach into the genome to revolutionize medicine.</p><a href="#">Purchase From Back Issues Dept</a></li>
</ul>
</div></div>
<div id="msg">Pure CSS3 Content Gallery - Each of the Content blocks which are nicely arranged inside this content gallery where not fed with Javascript Snippets or where not tamed using Javascript libraries. They where trained to do so using Pure CSS :) </div>
<div id="footer">
All the images and text used in this gallery are the property of Discover Magazine
<h2>Pure CSS3 Content Gallery - by the labs of <a href="http://www.hbirddesigns.com">Humming Bird Media</a></h2>
</div>
</body>
</html>

This is our basic mark-up for the content gallery. And it will result in a page like the screen shot given below, which looks pretty mundane.

Step 2 – Basic CSS

Now we are going to give our gallery some order of presentation with some basic CSS declarations.

*
{
	margin:0;
	padding:0;
}
body
{
	text-align:center;
	background-image:url('bg.jpg');
}
#container
{
	width:580px;
	margin:0 auto;
	margin-top:30px;
}
#container2
{
	height:auto;
	float:left;
	border:3px solid #333;
	background-image:url('wood.jpg');
	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	position:relative;
	padding-bottom:20px;
}
ul#gallery
{
	width:100%;
	margin-top:20px;
	position:relative;
	z-index:1px;
	list-style-type:none;
}
ul#gallery li
{
	float:left;
	background-color:#fff891;
	padding:0;
	list-style:none;
	text-align:left;
	padding:15px;
	overflow:hidden;
	margin:5px;
	height:500px;
	width:400px;
	padding-top:30px;
}

With this piece of CSS our gallery is starting to take shape.

We have removed the list-wise display of the list items and have floated each of the list items to the left so that each content block pertaining to each issue will be shown in a neat grid. But since the original item is going to take up about 500px in height and 400px in width the grid is not quite aligned right now. We are going to take care of that with some negative margins next.

For each of the list item we are going to apply:

margin-top:-200px;
	margin-left:-200px;
	margin:-120px;
	margin-top:-150px;
	margin-bottom:-160px;

Hmm, that looks more like a grid!

Step 3 – More CSS!

Some text based styling are applied to each list item content:

font-family:"Kaufmann";
	font-size:17px;
	color:#333;
	word-wrap:break-word;

and introduce two web fonts to our page

@font-face
{
	font-family:'Kaufmann';
	src:url(./Tt0726m_.ttf);
}
@font-face
{
	font-family:'Copperplate';
	src:url(./COPGOTHB.ttf);
}

The use of a web font has added such a drastic difference now to our content gallery.

Now let’s place each of the issues of magazines in their correct place of the grid by applying a CSS transform on them in the form of scaling them to a small size. For a bit of spice we have added a slight half degree turn for each magazine content item. This is accomplished using:

-webkit-transform: scale(0.4) rotate(-0.5deg);
	-moz-transform: scale(0.4) rotate(-0.5deg);
	-o-transform: scale(0.4) rotate(-0.5deg);
	transform: scale(0.4) rotate(-0.5deg);

That’s more like it.

Now lets spruce this content grids with some shadows and transition hooks.

-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
	box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.7);
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;

And let’s add some styles to the elements inside each content grid item with some CSS:

ul#gallery li b
{
	font-size:17px;
}
ul#gallery li p
{
	font-size:17px;
	margin:15px;
}
ul#gallery li h1
{
	font-family:"Copperplate";
	font-size:25px;
	text-align:center;
	color:#000;
	margin-top:-10px;
	margin-bottom:20px;
}
ul#gallery li h2
{
	font-size:19px;
}
ul#gallery li a{
	font-size:22px;
	font-weight:bold;
	text-decoration:none;
	float:right;
	color:blue;
}
ul#gallery img
{
	text-align:left;
	margin:10px;
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin-top:0;
}

More bright and more organized now!

Our CSS declaration until this point will be:

@font-face
{
	font-family:'Kaufmann';
	src:url(./Tt0726m_.ttf);
}
@font-face
{
	font-family:'Copperplate';
	src:url(./COPGOTHB.ttf);
}
*
{
	margin:0;
	padding:0;
}
body
{
	text-align:center;
	background-image:url('bg.jpg');
}
#container
{
	width:580px;
	margin:0 auto;
	margin-top:30px;
}
#container2
{
	height:auto;
	float:left;
	border:3px solid #333;
	background-image:url('wood.jpg');
	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	position:relative;
	padding-bottom:20px;
}
ul#gallery
{
	width:100%;
	margin-top:20px;
	position:relative;
	z-index:1px;
	list-style-type:none;
}
ul#gallery li
{
	float:left;
	background-color:#fff891;
	padding:0;
	list-style:none;
	text-align:left;
	padding:15px;
	overflow:hidden;
	margin:5px;
	height:500px;
	width:400px;
	padding-top:30px;
	margin-top:-200px;
	margin-left:-200px;
	margin:-120px;
	margin-top:-150px;
	margin-bottom:-160px;
	font-family:"Kaufmann";
	font-size:17px;
	color:#333;
	word-wrap:break-word;
	-webkit-transform: scale(0.4) rotate(-0.5deg);
	-moz-transform: scale(0.4) rotate(-0.5deg);
	-o-transform: scale(0.4) rotate(-0.5deg);
	transform: scale(0.4) rotate(-0.5deg);
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
	box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.7);
		-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
ul#gallery li b
{
	font-size:17px;
}
ul#gallery li p
{
	font-size:17px;
	margin:15px;
}
ul#gallery li h1
{
	font-family:"Copperplate";
	font-size:25px;
	text-align:center;
	color:#000;
	margin-top:-10px;
	margin-bottom:20px;
}
ul#gallery li h2
{
	font-size:19px;
}
ul#gallery li a{
	font-size:22px;
	font-weight:bold;
	text-decoration:none;
	float:right;
	color:blue;
}
ul#gallery img
{
	text-align:left;
	margin:10px;
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin-top:0;
}

Now let’s add some interactivity to our content gallery. We are going to hook in to the mouse hover event of each gallery content block and make the content zoom up to the user in to its original size so that user can read the content in it and can interact with the links presented in each content.

This can be easily done using:

ul#gallery li:hover
{
	-webkit-transform: scale(1) rotate(-1deg);
	-moz-transform: scale(1) rotate(-1deg);
	-o-transform: scale(1) rotate(-1deg);
	transform: scale(1) rotate(-1deg);
  	z-index:10000;
}

We are making the list items to scale to their original size with the CSS 2-D Transform scale method on mouse hover and the results are looking good.

The image inside the content item is added a bit of character of its own by the following CSS

ul#gallery li:hover img
{
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	width:auto;
	height:auto;
	text-align:left;
}

Now all that is left is to add some CSS to take care of the rest of the elements in the page and our Pure CSS content gallery is done.

h1
{
	font-family:"Kaufmann";
	font-size:45px;
	color:#ccc;
	text-shadow:0px 1px #777;
	margin-top:70px;
}
#msg
{
	clear:both;
	font-family:"Kaufmann";
	font-size:25px;
	padding-top:15px;
}
#footer
{
	margin-top:20px;
	font-family:"Kaufmann";
	font-size:17px;color:pink;
}
#footer h2
{
	font-family:"Copperplate";
	font-size:13px;
	color:pink;
	text-shadow:0px 1px #666;
	margin-top:10px;
}

The full CSS for the content gallery will look like:

@font-face
{
	font-family:'Kaufmann';
	src:url(./Tt0726m_.ttf);
}
@font-face
{
	font-family:'Copperplate';
	src:url(./COPGOTHB.ttf);
}
*
{
	margin:0;
	padding:0;
}
body
{
	text-align:center;
	background-image:url('bg.jpg');
}
#container
{
	width:580px;
	margin:0 auto;
	margin-top:30px;
}
#container2
{
	height:auto;
	float:left;
	border:3px solid #333;
	background-image:url('wood.jpg');
	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
	position:relative;
	padding-bottom:20px;
}
ul#gallery
{
	width:100%;
	margin-top:20px;
	position:relative;
	z-index:1px;
	list-style-type:none;
}
ul#gallery li
{
	float:left;
	background-image:url('paper1.gif');
	background-color:#fff891;
	padding:0;
	list-style:none;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
	box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.7);
	text-align:left;
	font-family:"Kaufmann";font-size:17px;color:#333;
	word-wrap:break-word;
	padding:15px;
	overflow:hidden;
	margin:5px;
	height:500px;width:400px;
	-webkit-transform: scale(0.4) rotate(-0.5deg);
	-moz-transform: scale(0.4) rotate(-0.5deg);
	-o-transform: scale(0.4) rotate(-0.5deg);
	transform: scale(0.4) rotate(-0.5deg);
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	margin-top:-200px;
	margin-left:-200px;
	margin:-120px;
	margin-top:-150px;
	margin-bottom:-160px;
	padding-top:30px;
}
ul#gallery li b
{
	font-size:17px;
}
ul#gallery li p
{
	font-size:17px;
	margin:15px;
}
ul#gallery li:hover
{
	-webkit-transform: scale(1) rotate(-1deg);
	-moz-transform: scale(1) rotate(-1deg);
	-o-transform: scale(1) rotate(-1deg);
	transform: scale(1) rotate(-1deg);
  	z-index:10000;
}
ul#gallery li h1
{
	font-family:"Copperplate";
	font-size:25px;
	text-align:center;
	color:#000;
	margin-top:-10px;
	margin-bottom:20px;
}
ul#gallery li h2
{
	font-size:19px;
}
ul#gallery li a{
	font-size:22px;
	font-weight:bold;
	text-decoration:none;
	float:right;
	color:blue;
}
ul#gallery img
{
	text-align:left;
	margin:10px;
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin-top:0;
}
ul#gallery li:hover img
{
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	width:auto;
	height:auto;
	text-align:left;
}
h1
{
	font-family:"Kaufmann";
	font-size:45px;
	color:#ccc;
	text-shadow:0px 1px #777;
	margin-top:70px;
}
#msg
{
	clear:both;
	font-family:"Kaufmann";
	font-size:25px;
	padding-top:15px;
}
#footer
{
	margin-top:20px;
	font-family:"Kaufmann";
	font-size:17px;color:pink;
}
#footer h2
{
	font-family:"Copperplate";
	font-size:13px;
	color:pink;
	text-shadow:0px 1px #666;
	margin-top:10px;
}

Here is the Pure CSS Gallery in its all glory:

Conclusion

That’s it. That brings us to an end to our second experiment on ‘The Mad Lab’. We will be back with more JavaScript, CSS and HTML crazy ideas in the upcoming editions of this corner.

Rate this post:
Loading ... Loading ...
HB Admin's Gravatar icon

Author: HB Admin

Admin of Humming Bird Designs Blog

102 articles posted by HB Admin.

Related Posts

  1. From The Mad Lab – A CSS3 & jQuery based Sliding Door Content Gallery
  2. From The Mad Lab – A CSS3 & jQuery based Japanese Paper Fan Image Gallery
  3. From The Mad Lab – Having Fun by making a pure css image gallery
  4. Avoid unwanted HTML markup for styling a webpage using CSS3 Selectors – Humming Bird Web Developer Classroom – Mastering CSS3
  5. How to make your website flexible across a range of target devices – A Simple Introduction to CSS3 Media Queries
SUBSCRIBE
Enjoyed this post? Subscribe to HB BLOG.

COMMENTS (12)

ADD A COMMENT

Name (required)

Email (required)

Website

Reload Image

Comments