10 técnicas Reset CSS que te serán muy útil a la hora de diseñar tus plantillas web. Estas técnicas para resetear CSS te permitirán evitar que los elementos que componen tu web descuadren la página por completo, cuando visiten tu sitio utilizando diferentes Navegadores. Recomendado
Enlace 10 técnicas Reset CSS
Las que ya conocía:
Free CSS Drop-Down Menu, un Framework que nos permitirá montar menús desplegables a nuestros proyectos web de forma sumamente simple. En cuanto a estilos, posee múltiple opciones para adaptarlos lo mejor posible a las estructuras de tus proyectos. Para IE6 necesitas cargar jQuery, incluido también el pack. Sin duda es una muy buena opción para organizar tanto contenido de navegación que puedas llegar a tener. El archivo a descargar posee todos los ejemplos.
Fuente webmasterlibre | carlosleopoldo
Si están pensando en mostrar alguna clase de estadística en sus web, porque no hacerlo también utilizando CSS. Sixrevisions, nos muestra 8 atractivas formas de hacerlo y cada una de ellas con opciones en particular.
Via Anieto2k - Mas ejemplos en Sixrevisions
Ejemplo: Ver demo online - - Idea by Apples to oranges
Images utilizadas en el Ejemplo: Imagen 1 - imagen 2 (guardar como)
Montando nuestras graficas
Si han estado siguiendo algunas de las tendencias en los themes WordPress Premium, probablemente habrán notado que los dos niveles en menú de navegación se han ido convirtiendo en algo muy popular o frecuente de ver, quizás más aun, en aquellos diseños estilo magazine que suelen poseer muchas secciones con información. Este estilo de menú puede utilizarse en infinidad de maneras, pero lo más común es mostrar las paginas principales, donde al posar nuestro ratón sobre uno de los títulos nos mostrara en un segundo nivel todas las subpáginas que contenga dicha sección. Como lograrlo en worpdress? de esta forma:
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>
un poco de estilo
#nav {
background:#577da2;
border-bottom:1px solid #FFF;
height:32px;
}
#nav li {
margin-right:25px;
}
#nav li, #subnav li {
float:left;
list-style:none
}
#nav a, #nav a:visited {
color:#FFF;
text-decoration:none;
font-weight:bold
}
#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
{
background:#295887
}
#subnav {
background:#e6eef7;
border-top:2px solid #577da2;
border-bottom:2px solid #cad8e6;
height:28px;
}
#subnav li {
border-right:1px solid #295887;
padding:0 7px;
}
#subnav a, #subnav a:visited {
color:#295887;
text-decoration:none;
font-weight:bold
}
#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
text-decoration:underline
}
Mas informacion darrenhoyt
Ver Demo
Codigo
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&display=latest&size=s&layout=h&source=user&user=14412260@N08"></script>
</div>
count=4 Cantidad de fotos a mostrar
user=14412260@N08 nuestro ID de usuario
Agregando estilo
Si desean darle diferentes estilos a los párrafos de sus proyectos web, Typechart será un sitio indispensable para visitar. Typechart es un sitio que nos presenta diversas formas de resaltar el contenido de nuestro blog, jugando con las propiedades de nuestras fuentes. Lo bueno es que nos permite ver en tiempo real como se verían nuestras fuentes tanto en Windows como en MAC. Y lo mejor de todo, es que una vez que hemos encontrado una idea original podremos obtener el código CSS que nos permitirá luego, obtener en nuestros proyectos online los mismos resultados. Encontraran cantidad de opciones y ejemplos, que podrán poner a prueba en sus futuros diseños.
Enlace Typechart
Via webappers
Date Badges and Comment Bubbles for Your Blog, una atractiva forma para resaltar nuestros últimos artículos, añadiendo icono de fechas y, a continuación, burbujas en el numero de nuestros comentarios. La idea es muy original, y sin duda, ayudara a resaltar aun más el contenido de este tipo de secciones destinadas para este fin.
Ver demo en Yoast - Mas info css-tricks
Nuestro estilo
p.date span { display: none; }
/************************************************
* iconos para cada mes *
************************************************/
.month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
.month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
.month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
.month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
.month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
.month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
.month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
.month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
.month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
.month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
.month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
.month12 { background: url(images/cal_12.gif) no-repeat 0 0; }
/************************************************
* Burbuja con numero de comentarios*
************************************************/
.shield {
position: relative;
}
.commentscloud {
position: absolute;
text-align: center;
top: -4px;
left: 22px;
width: 30px;
height: 24px;
padding: 3px 0;
background: url(images/bubble.png) no-repeat 0 0;
}
Implementarlo en wordpress
Siguenos desde tu lector de feeds favorito.
Recibe los artículos en tu casilla de correo electrónico.
Set de Iconos para organizar todos tus archivos WP en tu ordenador Formato .Ico y Png
Set de Iconos con estilo Jeans, para resaltar los RSS de tu blog. Formato Png y en varios Px
Set de Iconos para tus RSS inpirados en la Marca Levis. Formato Png y en varios Pixeles.
