La Webdosfera 2.0

71 CSS menus gratis cortesía de My Woorld

1. 11 CSS navigation menus : at Exploding Boy
2. 12 more CSS Navigation Menus. : at Exploding Boy
3. 14 Free Vertical CSS Menus : at Exploding Boy
4. 2-level horizontal navigation : demo at Duoh
5. Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
6. Accessible Image-Tab Rollovers : demo at Simplebits
7. ADxMenu : multiple menu examples at aPlus
8. A drop-down theme : at CSS Play
9. Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
10. Bulletproof Slants : demo at Simplebits
11. Centered Tabs with CSS : at 24ways
12. Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
13. Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short description, and thumbnail.
14. Creating Indented Navigation Lists : A multi-level indented list
15. Creating Multicolumn Lists : at Builder.com
16. cssMenus - 4 Level Deep List Menu : at SolarDreamStudios
17. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
18. CSS-Based Tabbed Menu : a simple tabbed menu.
19. CSS-based Navigation : demo at Nundroo
20. CSS: Double Lists : A single list that appears in two columns
21. CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
22. CSS only dropdown menu : at CSS Play
23. CSS only flyout menus : at CSS Play
24. CSS only flyout/dropdown menu : at CSS Play
25. CSS only flyout menu with transparency : at CSS Play
26. CSS only vertical sliding menu : at CSS Play
27. CSS Swag: Multi-Column Lists : at A List Apart
28. CSS Tabs : tabs without any images
29. CSS Tabs : list of various tab solutions
30. CSS tabs with Submenus : at Kalsey.
31. dTree Navigation Menu : Javascripts Tree at Destroydrop
32. Definition lists - misused or misunderstood? : appropriate uses of definition lists
33. Do You Want To Do That With CSS? - Multiple Column Lists : multi-column lists.
34. Drop-Down Menus, Horizontal Style : at A List Apart
35. Float Mini tabs : at Web-Graphics
36. Flowing a List Across Multiple Columns : A table without using tables.
37. Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
38. FreeStyle Menus : XHTML compliant, CSS-formatted menu script at TwinHelix
39. Hidden tab menu : at CSS Play
40. How to Style a Definition List with CSS : at WebReference
41. How to Style an Unordered List with CSS : at WebReference
42. How to Use CSS to Position Horizontal Unordered Lists : at WebReference
43. Hybrid CSS Dropdowns : at a List Apart
44. Inline Mini Tabs : at Web-Graphics
45. Intelligent Menus : CSS and PHP menu at PhotoMatt.net
46. Inverted Sliding Doors Tabs : at 456BereaStreet
47. Light Weight Multi Level Menu : at CssCreator
48. List Display Problems In Explorer For Windows : list hack for IE
49. Listamatic : simple lists; various styles.
50. Listamatic2 : nexted lists; various styles
51. Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
52. Mini-Tab Shapes : demo at Simplebits
53. Mini-Tab Shapes 2 : demo at Simplebits
54. More than Just Bullets : at W3.org
55. Multiple Column Lists : at css-discuss
56. A Navbar Using Lists : A lightweight nav bar at WestCiv
57. Navigation Matrix Reloaded : at SuperfluousBanter
58. Remote Control CSS : examples of lists styled differently
59. Remote Control CSS Revisited - Caving in to peer pressure : multi-column remote control
60. Rounding Tab Corners : by Eric A. Meyer.
61. Simple CSS Tabs : at SilverOrange
62. Simplified CSS Tabs : demo at Simplebits
63. Sliding Doors : at A List Apart
64. Spruced-Up Site Maps : sitemaps as lists
65. Styling Nested List : at SimpleBits
66. Suckerfish Dropdowns : at HTMLDog
67. Tabtastic : Gavin Kistner.
68. Tabs Tutorial at BrainJar
69. Taming Lists : at A List Apart
70. Turning a List into a Navigation Bar : at 456BereaStreet
71. Ultimate css only dropdown menu : at CSS Play

Compártelo

Vía Digg me entero de este fantástico tutorial sobre la propiedad Float, recomendado para los que empiezan recién a estudiar CSS o los que ya han empezado. Como se sabe, a la hora de agrupar los div de manera correcta se debe utilizar bien la propiedad Float porque si esta podemos dejar el diseño totalmente desencajado y no solo se utiliza para este caso, yo utilizo este ejemplo pero está propiedad se utiliza para muchas más cosas. El tutorial es en Ingles pero eso no es una contra ya que siempre el mejor contenido la mayoria de las veces está en Ingles.

Les dejo a continuación el indice que esta compuesto por 9 capitulos o tutoriales:

Continua leyendo »

Compártelo

Bien y como sera eso? bueno los muchachos de wafful han creado un hack que está echo solo con Html 2.0

Este hack puede detectar desde  el firefox2.0, firefox1.5, otros engines de Gecko, y Safari2, Safari3, Opera, ie, w3m, lynx, y otros browsers.

Aqui algunos Ejemplos:

Visitar Enlace

Compártelo

Nunca has pensado que si en vez de mostrar el Blogroll en una sola columna ocupabas mucho espacio? bueno a mi si me paso ahora que estoy trabajando en un nuevo theme y queria mostrar las categorias y el blogroll de manera que en una GRAN columna, osea el ancho del sidebar, pudiera agregar varias columnas y la verdad que fue un dolor de cabeza pero la solución llego de la mano de A List Apart.

La verdad que es fantastica la solución, son 4 metodos, e incluso jugando con el codigo te puede resultar si solo quieres dos columnas.

Visitar Enlace

Compártelo

CSS3 es sin lugar a dudas, una de las actualizaciones mas esperadas por los diseñadores web, las nuevas funcionalidades que la w3c está elaborando parecen que vienen para ayudar y hacerle menos imposible su trabajo. A continuación, algunas de las nuevas opciones de CSS3:

Multi-columnas

1. DIV {
2. width: 400px;
3. column-count: 4;
4. column-width: 100px;
5. column-gap: 10px
6. column-rule: none;
7. }

Continua leyendo »

Compártelo

Un pullquote es una especie de cita (blockquote) o nota que se añaden a nuestras entradas o post para resaltar alguna idea o algo que queramos destacar dentro del texto.

Este es un ejemplo de Pullquote y quiero que lo leas porque es importante

Si bien es parecido al blockquote, este se diferencia ya que no es un elemento Html sino que es una clase que utilizamos dentro de cabeceras <h4> o <h5>Veamos pues el código.
Dentro del html

1. <h4 class="pullquote">Este es un ejemplo de Pullquote y quiero que lo leas porque es importante</h4>

Dentro de nustra hoja de Estilo CSS:

1. .pullquote {
2. padding: 10px;
3. float: right;
4. width: 200px;
5. margin:10px 0 10px 10px;
6. border-top:2px solid #ffc300;
7. border-bottom:2px solid #ffc300;
8. text-align: center;
9. line-height: 22px;
10. font-family: georgia, verdana, Arial, Helvetica, sans-serif;
11. color:#ff0000;}

Veran que el codigo es muy sencillo y lo pueden modificar a gusto. Espero que les sirva

Compártelo

A menos que te limites a crear tu website de una sola pagina, necesitas diseñar un barra de navegación o menú. De hecho, el menú, es una de las partes más importantes del diseño y requiere que lo hagamos de manera correcta si queremos que los visitantes se muevan de manera fácil a través de nuestro sitio.

Continua leyendo »

Compártelo

Cuantas veces no ha pasado que al realizar el diseño de una web con css de dos columanas o más, te das cuenta de que cuando una de las columnas crece la otra no y nos queda bastante feo, porque cada columna tiene un fondo distinto y un de ellas se ve de un tamaño más chico o más grande .

Bueno si lo que quieres es una solución te aconsejo este enlace . Columnas 100% altas
Son tres metodos: 1) Faux Columns 2) efecto con <body> y <html> 3) Overflow, margin y padding. Ademas consta de una excelente explicación y un profundo analisis con las ventajas y desventajas de cada tecnica. En especial me llamo la atención el ultimo, porque los dos primeros ya los conocía.

Sin dudas, un gran Post de MeTaL_oRgY, de quien espero nuevos y excelentes posts ^_^

Compártelo