Artículos de la categoría Javascript

<ul class="post-list">
<!-- Post 1 -->
	<li>
  <a href="#">
    <span class="post-comments">
     <span class="post-comments-number">0</span>
    </span>
    Nombre del artículo
    <span class="post-dates">27 - 6 - 2010</span>
   </a></li>
<!-- Post 2 -->
	<li>
  <a href="#">
    <span class="post-comments">
     <span class="post-comments-number">6</span>
    </span>
    Nombre del artículo 2
    <span class="post-dates">26 - 6 - 2010</span>
   </a></li>
<!-- Etc --></ul>

El código CSS para imitar el resultado de la segunda imagen de la izquierda es el siguiente:

ul.post-list li a {
	min-height:40px;
	padding:14px 10px;
	font-family:Helvetica;
	font-size:20px;
	font-weight:bold;
	border-bottom:1px solid #D9D9D9;
	color:#000;
	text-decoration:none;
	display:block;
}

ul.post-list li a span.post-comments {
	margin:0 0 0 10px;
	min-width:18px;
	height:28px;

	color:#FFF;
	text-align:center;
	border:2px solid #FFF;
	-webkit-box-shadow: 0 0 5px #888;

	float:right;
	display:block;
	-webkit-border-radius:14px;
}

ul.post-list li a span.post-comments span.post-comments-number {
	padding:3px 5px;
	min-width:18px;
	height:22px;

	background: -webkit-gradient(linear, left top, left bottom, from(#DE7B7E), to(#CB2A29), color-stop(0.5, #D76368), color-stop(0.5, #CF2A27));
	color:#FFF;
	text-align:center;

	float:right;
	display:block;
	-webkit-border-radius:14px;
}

ul.post-list li a span.post-dates {
	font-size:13px;
	font-weight:normal;
	color:#666;
	display:block;
}

<div id="footer">

		<ul>
			<li class="icon-circle selected"><a href="#">Categor&iacute;as</a></li>
			<li class="icon-circle"><a href="#">P&aacute;ginas</a></li>
			<li class="icon-circle"><a href="#">Etiquetas</a></li>
			<li class="icon-circle"><a href="#">B&uacute;squedas</a></li>
		</ul>

	</div>

Y el CSS sería el que tenéis a continuación:

body, div, h1, ul {  /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
	margin:0;
	padding:0;
}

#footer {
	margin:312px 0 0 0; /* Para ajustarlo al final de la página, como en mi demostración no hay más contenido, esta línea es necesaria para posicionar el pie de página en el final de la página, así que si añadís contenido, eliminad esta línea */
	border-top:1px solid #434343;
	height:47px;
	background: -webkit-gradient(linear, left top, left bottom, fr om(#2E2E2E), to(#000), color-stop(0.5, #151515), color-stop(0.5, #000));
}

#footer ul {
	width:100%;
	height:100%;
	list-style:none;
	text-align:center;
}

#footer ul li {
	margin:1px 5px;
	padding:0 5px;
	height:45px;
	font-family:Helvetica;
	float:left;
	font-size:11px;
}

#footer ul li.icon-circle { background:url(circle-iphone.png) top center no-repeat; }

#footer ul li.icon-circle a {
	height:12px;
	display:block;
	text-decoration:none;
	color:#969696;
	padding:33px 2px 0 2px;
}

#footer ul li.icon-circle.selected a {
	color:#FFF;
	background:url(circle-iphone-selected.png) top center no-repeat;
}

#footer ul li.icon-circle.selected {
	-webkit-border-radius:5px;
	background:-webkit-gradient(linear, left top, left bottom, fr om(#494949), to(#252525), color-stop(0.5, #353535), color-stop(0.5, #252525));
}

<div id="header">
	<div id="logo_container">
		<!-- Aquí estará el logo -->
		<h1>Miweb.com</h1>
	</div>
	<div id="menu_container">
		<!-- Aquí estarán las pestañas -->
		<ul id="menu">
			<li class="selected"><a href="#">Inicio</a></li>
			<li><a href="#">Artículos</a></li>
			<li><a href="#">Páginas</a></li>
		</ul>
	</div>
	<div id="subheader">
		<!-- Aquí estará el buscador -->
	</div>
</div>

Y su CSS era:

body, div, h1 {  /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
	margin:0;
	padding:0;
}

#header {
	width:100%;
	height:150px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#75B856), to(#4C7A06));
}

#logo_container {
	width:100%;
	height:50px;
}

#logo_container h1 {
	padding:8px;
	font-family:Helvetica;
	font-size:30px;
	color:#FFF;
}

#menu_container {
	width:100%;
	height:50px;
}

#menu {
	width:100%;
	height:50px;
	padding:0;
	margin:0;
	list-style:none;
}

#menu li {
	height:38px;
	margin:2px 5px 0 5px;
	padding:5px;
	float:left;
}

#menu li a {
	height:28px;
	padding:5px;
	font-family:Helvetica;
	font-size:20px;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	display:block;
}

#menu li.selected {
	background: -webkit-gradient(linear, left top, left bottom, fr om(#FFF), to(#FEFEFE));
	-webkit-border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
}

#menu li.selected a {
	color:#000;
}

#subheader {
	width:100%;
	height:50px;
	background: -webkit-gradient(linear, left top, left bottom, fr om(#FEFEFE), to(#C0C0C0));
	border-bottom:1px solid #666;
}

Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.

<div id="footer">
	<div id="prefooter">
		<!-- Aquí estará el buscador -->
	</div>
	<div id="footer_menu_container">
		<!-- Aquí estarán las pestañas -->
		<ul id="footer_menu">
			<li class="selected"><a href="#">Inicio</a></li>
			<li><a href="#">Artículos</a></li>
			<li><a href="#">Páginas</a></li>
		</ul>
	</div>
</div>

Y el CSS, así:

body, div, h1 {  /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
	margin:0;
	padding:0;
}

#footer {
	margin:256px 0 0 0;
	width:100%;
	height:100px;
	background: -webkit-gradient(linear, left top, left bottom, fr om(#75B856), to(#4C7A06));
}

#footer_menu_container {
	width:100%;
	height:50px;
}

#footer_menu {
	width:100%;
	height:50px;
	padding:0;
	margin:0;
	list-style:none;
}

#footer_menu li {
	height:38px;
	margin:-1px 5px 2px 5px;
	padding:5px;
	float:left;
}

#footer_menu li a {
	height:28px;
	padding:5px;
	font-family:Helvetica;
	font-size:20px;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	display:block;
}

#footer_menu li.selected {
	background: -webkit-gradient(linear, left top, left bottom, fr om(#C0C0C0), to(#999));
	-webkit-border-bottom-left-radius:6px;
	-webkit-border-bottom-right-radius:6px;
}

#footer_menu li.selected a {
	color:#000;
}

#prefooter {
	width:100%;
	height:50px;
	background: -webkit-gradient(linear, left top, left bottom, fr om(#FEFEFE), to(#C0C0C0));
	border-bottom:1px solid #666;
}

Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.