En The Design Superhero encuentro un tutorial que nos explica claramente como crear un menú horizontal con Css de forma muy sencilla. Ideal para aprender de una vez como tener un sistema de navegación para nuestro sitio, y una vez nos manejemos mejor, poder modificarlo a nuestro gusto.

Lo primero es crear el HTML, que estará formado por algo como esto:
——————————
<ul id=”button”>
<li> <a href=”#”>Inicio</a></li>
</ul>
——————————

Donde la segunda línea es una de las opciones del menú, en este caso “Inicio”.

Seguimos con el CSS, que es lo que le dará estilo al menú. Como será un menú horizontal, deberemos poner:
——————————–
#button li {display:inline;}
——————————–

Y solo queda comenzar con Css a darle color y forma al menú.

A todo esto nos ayuda el tutorial, que logrará obtener un diseño como el que vemos en la imagen. Así que los invito a que lo visiten.

Hoy en día prácticamente todos los blogs tienen un menú para darle la posibilidad al lector de leer por lo menos su perfil, y ofrecer un medio de contacto, entre otras cosas. Lo bueno de WordPress, es que te permite agregar algo mas elaborado, como un menú doble, en el cual eligiendo una de las opciones, aparecen las que estén incluidas (por ejemplo, click en “Desarrollo” y aparece : HTML, PHP y CSS). En Catswhocode nos enseñan como crear un menú doble para WordPress.

Se divide en tres partes: El PHP que irá incluido en nuestro “header.php”, el CSS que agregaremos a nuestra hoja de estilo, y en el caso de querer asegurarnos compatibilidad con IE6, finalizamos con un poco de Javascript, también en nuestra hoja de estilos. No es nada complicado tenerlo, ya que podemos copiar y pegar el código que nos ofrecen en el sitio. Y para darle estilo, solo vamos a necesitar saber algo de Css.

ShutterStock 11091337 & ShutterStock 9519811 | 2 EPS Vector Files | Size 1.5 Mb

Descargar

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

Leyendo SigT me encuentro con este tutorial, interesante para aquellos que no deseen utilizar javascript para crear el efecto de Ligthbox, pueden usar esta técnica utilizando únicamente CSS.

Pueden ver el resultado final de este tutorial. Trata solamente de mostrar 2 divs al momento de dar “clic” uno el overlay que hará que nuestra pantalla se haga un poco más oscura y content que será donde mostraremos nuestro contenido.

Enlace: Emanueleferonato