Realicé el rediseño para de Ella de Grupo Dutriz, participé en la elaboración de los PSD para tres páginas que son portada, sección y blog, la programación del sitio fue algo realizado en equipo de trabajo.

Portada

Sección

Blog

Puede ser colocado en cualquier página de nuestro template (index.php, single.php, page.php), lo importante es que hará ver diferente cada categoría.

La función es:

<div id="<?php $category = get_the_category();
echo $category[0]->category_nicename;?>">

La función está diciendo que el nombre de la categoría es el ID del div, en ese caso dependiendo de la categoría el estilo será distinto.

Por lo tanto nuestro CSS deberá asignar una ID con el mismo nombre que la categoría, claro esta que tomará el nombre slug y por lo tanto si nuestra categoría tiene dos palabras o tres como nombre las tomará sin espacio y con un guión medio en lugar de este, tampoco aceptara las mayúsculas, por ejemplo si el ID se llamara portfolio, la aplicación sería la siguiente:

<div id="<?php $category = get_the_category();
echo $category[0]->category_nicename;?>">
<li>
<h2><a href="<?php the permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h2>
<?php the_content('Leer Más');?>
</li>
</div>

Este mismo código sería interpretado por nuestro navegador de esta manera:

<div id="portfolio">
<li>
<h2><a href="titulo">titulo</a></h2>
<p>Texto</p>
</li>
</div>

Y el CSS tendría que ser escrito de esta manera para afectarlo:

#portfolio {background: #121212;}
#portfolio {list-style: none;}

Debo decir además que le hice una consulta a Source autor del blog de dinvaders, sobre como sería si en un dado caso lo que yo deseo es mostrar un contenido diferente en una categoría y no un estilo diferente, por ejemplo un sidebar diferente o mostrar la foto del autor solo en una categoría específica, y la diferencia entre la función anterior y esta es un condicionante:

<?php if (in_category('ejemplo') { ;?>
<!-- contenido que quieres que aparezca en la categoria -->
<?php } else { ;?>
<?php } ;?>

Si se desea que se muestre en varias categorías:

<?php if (in_category(array('ejemplo-1', 'ejemplo-2', 'ejemplo-3')) ) { ;?>
<!-- contenido que quieres que aparezca en las categorias -->
<?php } else { ;?>
<?php } ;?>

Lo único a suplantar es el espacio donde dice ejemplo, es prácticamente automático.

Y en el caso de mostrar un avatar pues la diferencia es solo intercambiar la función por la del avatar:

<?php if (in_category('ejemplo')) { ;?>
<?php echo get_avatar( get_the_author_meta('user_email'), 60); ?>
<?php } else { ;?>
<?php } ;?>

En caso de no funcionar in_category se intercambia por is_category.

Fuente: Diferentes estilos css por categoría

CSS Text Wrapper, encontré en la red esta herramienta que podría ser muy útil en el caso que tuviésemos que contornear un texto en html a una forma que no sea vertical, para esos casos podría ser esto una excelente opción. Dejo un ejemplo de como funciona y agrego el video del tutorial. Aún está en fase beta pero es una idea que va por buen camino.

Border-radius

Si hay algo que nos ahorrará esta propiedad es tiempo, el mantenimiento y edición de un sitio que utiliza esquinas redondeadas con el css3 se ha vuelto mucho mas facil, gracias a la w3c contamos ahora con esta nueva opción, el codigo podemos escribirlo de la siguiente forma: para mozilla firefox -moz-border-radius, para safari y google chrome -webkit-border-radius, ejemplo el siguiente div:

Utiliza las siguientes líneas de código:

estilo. {
padding: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px 10px 10px 10px;
background-color: #FFFF99;
border: 1px solid #FFCC00;
}

De la mimsa manera podemos hacer diferentes variantes entre cada una de las cuadro esquinas:

estilo{
-moz-border-radius-topleft:  10px;
-webkit-border-top-left-radius:10px;
border: 1px solid #000;
padding: 5px 5px 5px 15px;
}

estilo{
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-right:10px;
padding: 5px 5px 5px 15px;
}

border: 1px solid #000;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
padding: 5px 5px 5px 15px;

estilo{
border: 1px solid #000;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
padding: 5px 5px 5px 15px;
}

estilo{
border: 1px solid #000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
padding: 5px 5px 5px 15px;
}

estilo{
border: 1px solid #000
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
padding: 5px 5px 5px 15px;
}

Parte de las innovaciones que trae  CSS3 son los efectos de sombra, esto nos ahorrará mucho trabajo del que se hacía con photoshop al tener que estar cortando imágenes con el efecto de sombra ya aplicado, de ahora en adelante solo bastará con escribir unas lineas de css y ya podremos hacer el mismo efecto, pero al igual que muchas cosas nuevas que aparecen este solo es compatible con los últimos navegadores.

Las dos variantes de drop shadow son una dedicada a texto que es text-shadow, y para los divs y párrafos utilizaremos box-shadow, ambos con uso similar pero con sus diferencias.

Text-shadow

Esta propiedad de css3 es utilizada del la siguiente manera:

.texto-sombra{
font:bold 24px Arial, Helvetica, sans-serif;
color:#FF9900;
text-shadow: 2px 2px 2px #000;
}

Resultado del css

La propiedad text-shadow como su nombre lo dice solamente afecta al texto, no puede afectar a cajas o divs, los dos primeros atributos son para el deplazamiento vertical y horizontal, el tercero es el radio del desenfoque y el último el color de la sombra.

Ejemplo con texto seleccionable:

Text shadow

El siguiente es box-shadow que afecta a las cajas sea párrafos y divs:

Box-shadow

La utilizamos de la siguiente forma:

font:bold 36px Arial, Helvetica, sans-serif;
color:#fff;
background:#FF9900;
padding:20px;
width:250px;
-moz-box-shadow: 3px  3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;

Aplicandolo en directamente en el html editable el resultado sería el siguiente:

box shadow

La utilización al igual que en el en anterior, las dos variantes del principio son para desplazamiento vertical y horizontal, el tercero es para el radio de la sombra y el último es para el color de la sombra. La propiedad -moz es para Firefox, -webkit es para Safari y Chrome, y la final es para los navegadores que ya admiten la propiedad.

Este ejemplo también puede mezclarse con la otra propiedad nueva que es border-radius:

box shadow

Hace unos días publiqué un template para una agencia de viajes (de hecho en mi post atenrior), ahora lo he materializado para visualizarlo completamente en HTML, utilizando CSS y un utilicé de javascript para algunos detalles, igual que el anterior no lo realice para una empresa en particular si no por exploración gráfica, le hice un cambio de color a la imágen del fondo y lo hice azúl, también armoniza de esa manera.

Haca clic sobre la imágen para ver el website