Design Lunatic

CSS3 Featured Posts Widget

A featured posts widget is a great thing to have at the top of your site, because it’s a wonderful way to add some interactivity to your site. And if this “featured posts widget” is done in CSS3… well, I don’t think it’s even necessary to say how awesome that is.

HTML

Yes, believe it or not, you are going to need to need some HTML before you can start using CSS3.

<div id="featuredposts">	
	
	<section id="lefttitles">
		<ul>
			<li>
				<a href="#post1">
				<img src="test1.jpg">
				<h3 class="leftheader">CSS3 Image Gallery</h3>
				</a>
			</li>
			
			<li>
				<a href="#post2">
				<img src="test1.jpg">
				<h3 class="leftheader">CSS3 Accordion</h3>
				</a>
			</li>
			
			<li>
				<a href="#post3">
				<img src="test1.jpg">
				<h3 class="leftheader">CSS3 Hover effect</h3>
				</a>
			</li>
			
			<li>
				<a href="#post4">
				<img src="test1.jpg">
				<h3 class="leftheader">Jquery Search</h3>
				</a>
			</li>
			
			
		</ul>
	</section>
		
	<section id="bigview">
	
		<ul>
			<li>

			</li>
			
			<li>

			</li>
			
			<li>

			</li>
			
			<li>

			</li>
			
		</ul>
		
	</section>
	
</div>

The div with an id of “featuredposts” is basically the main container div. It holds all of our content. The section with an id of “lefttitles” is what holds the left part of the widget. In other words, it contains the 4 titles and their respective thumbnails. The “bigview” section contains the post that the user has just clicked on.

However, since we’re using “:target” to make the widget interactive, we’re going to need some dummy divs that will just hold the content and make us be able to “:target” it.

<section id="bigview">
	
	<div id="post1">
	<div id="post2">
	<div id="post3">
	<div id="post4">
	
		<ul>
			<li>

			</li>
			
			<li>

			</li>
			
			<li>

			</li>
			
			<li>

			</li>
			
		</ul>
			
	</div>
	</div>
	</div>
	</div>
		
	</section>

Wonderful. We’re almost done with the HTML. One last thing: the “bigview” actually needs some content.

<section id="bigview">
	
	<div id="post1">
	<div id="post2">
	<div id="post3">
	<div id="post4">
	
		<ul>
			<li>
				<img src="test1.jpg">
				<h3 class="bigheader">CSS3 Image Gallery</h3>
				<p class="text">Odio tortor, in sagittis urna, cras duis sed, augue, lundium et magna vel eros lectus! Enim risus rhoncus, massa turpis! Etiam nunc aliquam enim! Dignissim amet! Sagittis sed vut risus, magna cras in natoque, egestas turpis, in amet eu, integer! Facilisis cursus! Lundium cum vut turpis a montes. Nunc enim, a montes, sociis augue elementum magna nisi, in in massa, integer hac amet, augue porttitor amet, magna ac, dis lacus. Cum in? Adipiscing cras vel proin integer et augue habitasse nunc nisi egestas urna? Ut tristique aenean egestas nascetur sed, integer, sagittis nisi scelerisque elementum, elit? Proin nisi et, ut! Ut ultricies, phasellus dis est velit magnis vel, nunc porta placerat nunc quis turpis, proin sed pellentesque ac, tincidunt, quis.</p>
			</li>
			
			<li>
				<img src="test1.jpg">
				<h3 class="bigheader">CSS3 Accordion</h3>
				<p class="text">Odio tortor, in sagittis urna, cras duis sed, augue, lundium et magna vel eros lectus! Enim risus rhoncus, massa turpis! Etiam nunc aliquam enim! Dignissim amet! Sagittis sed vut risus, magna cras in natoque, egestas turpis, in amet eu, integer! Facilisis cursus! Lundium cum vut turpis a montes. Nunc enim, a montes, sociis augue elementum magna nisi, in in massa, integer hac amet, augue porttitor amet, magna ac, dis lacus. Cum in? Adipiscing cras vel proin integer et augue habitasse nunc nisi egestas urna? Ut tristique aenean egestas nascetur sed, integer, sagittis nisi scelerisque elementum, elit? Proin nisi et, ut! Ut ultricies, phasellus dis est velit magnis vel, nunc porta placerat nunc quis turpis, proin sed pellentesque ac, tincidunt, quis.</p>
			</li>
			
			<li>
				<img src="test1.jpg">
				<h3 class="bigheader">CSS3 Hover Effect</h3>
				<p class="text">Odio tortor, in sagittis urna, cras duis sed, augue, lundium et magna vel eros lectus! Enim risus rhoncus, massa turpis! Etiam nunc aliquam enim! Dignissim amet! Sagittis sed vut risus, magna cras in natoque, egestas turpis, in amet eu, integer! Facilisis cursus! Lundium cum vut turpis a montes. Nunc enim, a montes, sociis augue elementum magna nisi, in in massa, integer hac amet, augue porttitor amet, magna ac, dis lacus. Cum in? Adipiscing cras vel proin integer et augue habitasse nunc nisi egestas urna? Ut tristique aenean egestas nascetur sed, integer, sagittis nisi scelerisque elementum, elit? Proin nisi et, ut! Ut ultricies, phasellus dis est velit magnis vel, nunc porta placerat nunc quis turpis, proin sed pellentesque ac, tincidunt, quis.</p>
			</li>
			
			<li>
				<img src="test1.jpg">
				<h3 class="bigheader">Jquery Search</h3>
				<p class="text">Odio tortor, in sagittis urna, cras duis sed, augue, lundium et magna vel eros lectus! Enim risus rhoncus, massa turpis! Etiam nunc aliquam enim! Dignissim amet! Sagittis sed vut risus, magna cras in natoque, egestas turpis, in amet eu, integer! Facilisis cursus! Lundium cum vut turpis a montes. Nunc enim, a montes, sociis augue elementum magna nisi, in in massa, integer hac amet, augue porttitor amet, magna ac, dis lacus. Cum in? Adipiscing cras vel proin integer et augue habitasse nunc nisi egestas urna? Ut tristique aenean egestas nascetur sed, integer, sagittis nisi scelerisque elementum, elit? Proin nisi et, ut! Ut ultricies, phasellus dis est velit magnis vel, nunc porta placerat nunc quis turpis, proin sed pellentesque ac, tincidunt, quis.</p>
			</li>
			
		</ul>
			
	</div>
	</div>
	</div>
	</div>
		
	</section>

Just some simple Lorem Ipsum, nothing fancy.

CSS3

Finally, the fun part. First, grab a copy of this wonderful CSS reset. Once you’ve copy-pasted that into your stylesheet, read on.

We’re going to start off with some basic styling.

a {
text-decoration: none;
}

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#featuredposts {
overflow: hidden;
background: white;
border: 1px solid #CACACA;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 3px 1px #ebebeb;
-moz-box-shadow: 0px 0px 3px 1px #ebebeb;
box-shadow: 0px 0px 3px 1px #ebebeb;

width: 800px;
height: 415px;
margin: 0 auto;
margin-top: 100px;
}

Honestly, the only really important things here are the “featuredposts” width, height, and “overflow: hidden: declarations. The “overflow: hidden” is necessary so that the user doesn’t see the other posts until they click on the title.

Now, the “lefttitles” styling.

#lefttitles {
width: 300px;
float: left;
overflow: hidden;
}

#lefttitles a {
color: #515151;
}

#lefttitles li {
padding-top: 15px;
padding-left: 15px;

-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
height: 70px;
padding-bottom: 20px;
}

#lefttitles li:hover {
background: #eeeeee;
}

#lefttitles img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}

.leftheader {
font-size: 20px;
line-height: 70px;
padding-left: 10px;
float: left;
}

The CSS3 here is super basic… padding, margins, and a bit of text styling. There’s also some CSS3 transition code, as well as a “border-radius” declaration.

Now, the “bigview” styling.

#bigview {
border-left: 1px solid #CACACA;
padding-left: 15px;
width: 484px;
float: right;
}

#bigview ul {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}


#bigview li {
height: 415px;
}

#bigview img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 15px;
float: left;
width: 100px;
height: 100px;
}

#bigview h3 {
float: left;
font-size: 28px;
width: 364px;
line-height: 130px;
padding-left: 20px;
}

Once again, CSS3 transitions for the “bigview ul”, so that it appears to “slide” when the user clicks on a title. The image also has a border-radius. Everything else is basic.

Well, we’ve got the layout styling over with. Now, we can make this widget work.

#post1:target ul {
margin-top: 0px;
}

#post2:target ul {
margin-top: -415px;
}


#post3:target ul {
margin-top: -830px;
}

#post4:target ul {
margin-top: -1245px;
}

Remember the “leftitles” section that contains the titles? Well, if you take a look at those, they are all links to “#post” and then a number. This is where the “:target” selector comes in. When a link is clicked, the “ul” animates so that the visible post is changed.

That’s all for this tutorial. If you have any questions or comments, feel free to use the comment form below.