Barras animadas para Windows al estilo MAC

En esta ocasión XYBERNETICOS nos presenta algunas barras animadas similares a las que utiliza los de la manzana:

• RK Launcher esta barra de herramientas lo interesante es por un lado el diseño y por otro la interactividad de los iconos que aumentan de tamaño al pasar el ratón por encima y todo ello produce una sensación de suave animación muy agradable a la vista. Enlace a la Descarga Versión 0.4 beta.

• Y’z Dock esta puede ser personalizada y puedes añadir tantos accesos directos como desees con sólo arrastrarlos encima, ordenarlos mediante separadores, modificar el tamaño y posición de la barra en pantalla y cambiar algunos elementos de diseño. Incluye además tres módulos que puedes insertar en la barra si quieres: un indicador de uso de CPU y memoria RAM libre, un reloj analógico y una papelera. Enlace a la Descarga

• ObjectDock una bella barra que se comportará como la clásica de windows, mostrándote las aplicaciones y carpetas abiertas así como los accesos directos que quieras configurar, solo que utilizando un diseño agradable. El programa incorpora unos atractivos gráficos semitransparentes para cada objeto, a ello sumándole los efectos que lo harán verdaderamente atractivo. Enlace a la  Descarga

• RocketDock en esta ocasión la barra se instala por defecto en la parte superior central del escritorio para tener acceso desde ella a unas cuantas aplicaciones de Windows. El diseño es muy atractivo y los efectos de animación le dan ese plus que lo hace aun mejor. Puedes personalizarlo cambiando temas, fuentes, colores y por supuesto añadiendo o quitando iconos a placer. Enlace a la Descarga

• FlyakiteOSX no necesitas ninguna aplicación para instalarlo. El programa reemplaza iconos de sistema, realiza pequeñas modificaciones en el Registro, instala nuevos fondos de pantalla y skins y más, hasta conseguir el atractivo y brillante aspecto del sistema Mac OS X. Enlace a la Descarga

Lista completa de menús realizados con CSS

En BLOG VECINDAD…, encuentro una buena recopilación de una lista muy completa de los menús hechos con CSS, de seguro encontrarás alguno que te guste para tu proyecto. La lista ha sido tomada de 71 CSS menus for Web Designer.

1. 11 CSS navigation menus
2. 12 more CSS Navigation Menus
3. 14 Free Vertical CSS Menus
4. 2-level horizontal navigation
5. Absolute Lists: Alternatives to Divs
6. Accessible Image-Tab Rollovers
7. ADxMenu
8. A drop-down theme
9. Bookend Lists: Using CSS to Float a Masthead
10. Bulletproof Slants
11. Centered Tabs with CSS
12. Clickable Link Backgrounds
13. Create a Teaser Thumbnail List Using CSS: Part 1
14. Creating Indented Navigation Lists
15. Creating Multicolumn Lists
16. cssMenus – 4 Level Deep List Menu
17. CSS and Round Corners: Build Accessible Menu Tabs
18. CSS-Based Tabbed Menu
19. CSS-based Navigation
20. CSS: Double Lists
21. CSS Mini Tabs (the UN-tab, tab)
22. CSS only dropdown menu
23. CSS only flyout menus
24. CSS only flyout/dropdown menu
25. CSS only flyout menu with transparency
26. CSS only vertical sliding menu
27. CSS Swag: Multi-Column Lists
28. CSS Tabs
29. CSS Tabs
30. CSS tabs with Submenus
31. dTree Navigation Menu
32. Definition lists – misused or misunderstood?
33. Do You Want To Do That With CSS? – Multiple Column Lists
34. Drop-Down Menus, Horizontal Style
35. Float Mini tabs
36. Flowing a List Across Multiple Columns
37. Free Menu Designs V 1.1
38. FreeStyle Menus
39. Hidden tab menu
40. How to Style a Definition List with CSS
41. How to Style an Unordered List with CSS
42. How to Use CSS to Position Horizontal Unordered Lists
43. Hybrid CSS Dropdowns
44. Inline Mini Tabs
45. Intelligent Menus
46. Inverted Sliding Doors Tabs
47. Light Weight Multi Level Menu
48. List Display Problems In Explorer For Windows
49. Listamatic
50. Listamatic2
51. Menus galleries in CSS and XHTML
52. Mini-Tab Shapes
53. Mini-Tab Shapes 2
54. More than Just Bullets
55. Multiple Column Lists
56. A Navbar Using Lists
57. Navigation Matrix Reloaded
58. Remote Control CSS
59. Remote Control CSS Revisited – Caving in to peer pressure
60. Rounding Tab Corners
61. Simple CSS Tabs
62. Simplified CSS Tabs
63. Sliding Doors
64. Spruced-Up Site Maps
65. Styling Nested List
66. Suckerfish Dropdowns
67. Tabtastic
68. Tabs Tutorial
69. Taming Lists
70. Turning a List into a Navigation Bar
71. Ultimate css only dropdown menu

Otros sistema de navegación de tabs por CSS

En ANIETO2K, comenta que ya existen muchos sistemas de navegación mediante tabs, pero nunca va mal tener algunos a mano para lo que pueda surgir. Ver demo.

8 menús web que no deberías perderte

En La mate por…, tenemos una recopilación de 8 menús web que uno no debería perderse, la selección viene acompañada de los ejemplos y los archivos comprimidos de cada menú, desde RoScripts.Parece que los menús al estilo Dock de Mac OS están de moda, hace unos días comentaba CSS Dock Menu y en esta ocasión hay una versión mejorada, más fluida y con mayor calidad en los iconos.

CSS Dock Menu

En ANIETO2K, nos enseña un increible menú que recuerda al más puro Dock Maquero para nuestras webs. Está realizados sobre jQuery y podemos ver lo fluido que se comporta en la demo que han puesto los chicos de nDesign. [Descargar] [Demo].

• Actualización (24/mayo/2007):

En ANIETO2K, coloca alguna opción más a este tipo de menú. Ahora podemos elegir con alguna de estas opciones, hacer click en algún elemento de los menús de ejemplo.

Listamatic, casi todos los menús de navegación mediante CSS

Si se te han acabado las ideas en lo que a listas se refiere, Max Design nos proporciona una buena colección con muchas combinaciones. Se trata de Listamatic, un típico recurso de recopilación de enlaces y utilidades, que tomando como ingredientes las listas y las hojas de estilo, hacen de él una buena referencia para ver las posibilidades de los CSS.

Constructor de menús

Jerry Anzalone, nos presenta en CSSPLAY tenemos una buena utilidad, un constructor de menús fácil de utilizar, que mediante unos pocos pasos, tienes controlado todo el proceso: enlaces, texto, color, tamaño, etc. Al final tienes el diseño completo mediante generar el HTML y su CSS.

Crear menús utilizando listas y CSS

David en COREDUMP, nos enseña en un tutorial paso a paso como crear un menú horizontal y un menú vertical utilizando el recurso de las listas. Una vez tenemos el concepto básico claro, el resto es usar nuestra imaginación para realizar menús impactantes.

Tecnicas para crear interfaces con pestaña

La técnica de pestañas ha sufrido un gran crecimiento, gracias a los desafíos que se plantean los diseñadores y creadores.

Mediante esta interfase de pestañas se pueden garantizar un acceso rápido a la información sin necesidad de abrir y cerrar docenas de ventanas al mismo tiempo. Permite que múltiples documentos estén dentro de una sola ventana y las pestañas o lengüetas se pueden utilizar para navegar entre ellos. Una idea se está utilizando con mucha frecuencia.

Con un poco de habilidad se puede crear y mejorar estos interfaces en pocos minutos. Con CSS, Javascript, DHTML, etc. casi todo es posible. La información no se carga en la ventanas nuevas, sino se carga inmediatamente con técnicas basadas en Ajax-basadas.

Puedes hechar una ojeada a algunas de las técnicas más interesantes que hemos encontrado en el Web: 14 Tab-Based Interface Techniques.

Creación de un menú desplegable con Fireworks y Dreamweaver

Bleend en un artículo muy practico en CRISTALAB, nos enseña una manera fácil de hacer un menú emergente en un documento HTML usando Adobe Fireworks y en menor medida Adobe Dreamweaver.

Para realizar este invento han utilizado las versiones 8 de los programas, a esperas del lanzamiento oficial del Creative Suite CS3.

Menú circular en CSS

En el blog ANIETO2K, encontramos una referencia a un curioso menú desarrollado en CSS que te permite darle un aspecto diferente a cualquier web.

Despues viendo la demo, ves que está muy currado, aunque le queda un detallito para ser perfecto… que aparezca al pasar por encima de alguna opción… osea hacer que el menú se convierta en un submenú.

En la página del autor teneis un tutorial de como conseguir el fantástico menú radial.

Algunos ejemplos de «tabs»

En ANIETO2K, nos muestra diferentes maneras de poner tabs o menús desplegable en tu web:

• Esta es la mejor forma, fácil, completa y lo más importante, completamente personalizable. Tutorial: Alsacreations. Demo: Aqui

• En el mismo blog, en otro post nos muestra Tabs con CSS increibles. Comenta que hace algún tiempo vieron una buena colección de tabs, y ahora trae unas cuantas más.

• Estas completamente con CSS (de lo mejor que he visto)
• +70 Tabs gratis.
• 36 técnicas de menus con tabs en CSS
• Otra con CSS, bastante innovadora

Listado de 71 menús de navegación creado úncicamente con CSS, siempre es bueno tener a mano una lista de estas.

Posts relacionados

• Menus divertidos con CSS
• Menús desplegables con CSS

• A lo que hay que añadir Tabs horizontales, que ha traves de VidaBlog, descubro un sistema para hacer tabs horizontales de forma fácil, rápida y sobretodo profesional. El sistema usado está basado en uno que yo ya había visto hace meses y use alguna vez, pero los acabados me convencen mucho.

Aqui, podeis ver algunos ejemplos de tabs realmente buenos y lo podeis decargar desde aqui.

Como usarlo

Para usar esta utilidad unicamente tenemos que disponer de las imagenes que componen los botones y del codigo CSS que se incluye en el fichero. Bastará con aplicar un id a un div que englobe toda la barra de botones para que se apliquen a ellos los estilos definidos.

El metodo para crear las tabs es usar <ul> para la definir la lista y <li> para representar cada boton o tab.

Muestrario de 53 menús de navegación basados en CSS

Los menús de la navegación tienen que ser intuitivos, exactos y fáciles de utilizar. Son probablemente el elemento más importante del diseño web, ya que se utilizan más a menudo que cualquier otro elemento de la página. Es importante cerciorarse de que tus visitantes los encuentren alrededor de la estructura del sitio, por muy complejo que sea.

En este sitio encontrarás un listado de soluciones atractivas para nuestros menús. Son 53 atractivos menús de la navegación realizados mediante CSS.

Un buen ejemplo puede ser el menú de navegación del blog realizado por el diseñador Luis Alarcón que aparece en la citada lista y salvo error u omisión es la única página que aparece en nuestro idioma.

71 menús completamente gratis para tu web

Se acabaron los bloqueos frente al código pensando en el menú, aquí tienes 71 Menús completamente gratis para tu web.

Visto en: ANIETO2K