Cacoo: Excelente opción en línea para creación de diagramas

Me puse a investigar hoy acerca de alguna herramienta que me permitiera crear wireframes para un sitio web que tengo en mente. En un par de minutos aterricé en un artículo donde se recomiendan las mejores 15 herramientas para wireframes entre las cuales hay varias gratuitas y otras de pago.

Sorprendentemente, el primer lugar es una herramiente gratuita en línea que después de probarla un poco, me di cuenta que no iba a necesitar explorar el resto de la lista. Esta herramienta se llama Cacoo y es en verdad gratuita, no como las herramientas que te permiten crear lo que querías para luego darte cuenta que no puedes salvar o exportar tu trabajo, o te meten leyendas en agua.

Cacoo se puede utilizar para todo tipo de diagramas, y asombra su facilidad de uso y diversas opciones que ofrece. En particular me gusta las guías de layout que muestra cuando uno va a mover un elemento. Cuando lo probé con el wireframe, me muestra la alineación de un elemento con respecto a las cajas del menú horizontal. Eso es de bastante ayuda para dejar todo bien ordenado.

Este es un ejemplo bastante sencillo. Afortunadamente el sitio ofrece una plantilla de wireframe que uno puede usar como referencia de todo lo que se puede hacer.


Si fuera algún tipo de gerente de nuevas adquisiones de Google, fijo pondría esta herramienta junto con la compañía en la mira.

Catalogo de tablas

Quisiera hacer eco de un artículo que me encontré buscando algunos estilos para aplicar a una tabla HTML. Mi intención no es hacer plagio del artículo sino el de dejar disponible de una forma más clara los CSS que utilizó en cada una de las tablas.

Ciertamente el estilo por defecto de una tabla HTML es demasiado crudo; muy feo se ve en mi opinión. Aún cuando agregamos algunos detalles básicos como bordes, las tablas que usualmento le aplico mi estilo terminan siendo aún menos vistosas.

Si descubro más estilos llamativos los anexaré a esta entrada de blog.

0. Default

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

1. Minimalista Horizontal

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

  
#minimalista-horizontal { 
   background:none repeat scroll 0 0 #FFFFFF; 
   border-collapse:collapse; 
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif; 
   font-size:12px; 
   margin:20px; 
   text-align:left; 
   width:480px;
}
#minimalista-horizontal th { 
   border-bottom:2px solid #6678B1; 
   color:#003399; font-size:14px; 
   font-weight:normal; 
   padding:10px 8px;
}
#minimalista-horizontal td { 
   color:#666699; 
   padding:9px 8px 0;
}

2. Minimalista Vertical

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

#minimalista-vertical { 
   border-collapse:collapse; 
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif; 
   font-size:12px; margin:30px 30px 30px 15px;
   text-align:left; width:480px;
}
#minimalista-vertical th { 
   border-bottom:2px solid #6678B1; 
   border-left:30px solid #FFFFFF;
   border-right:30px solid #FFFFFF;
   color:#003399; 
   font-size:14px;
   font-weight:normal;
   padding:8px 2px;
}
#minimalista-vertical td { 
   border-left:30px solid #FFFFFF; 
   border-right:30px solid #FFFFFF;
   color:#666699; padding:12px 2px 0;
}

3. Caja

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

  
#caja { 
   border-collapse:collapse; 
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif; 
   font-size:12px; margin:20px; 
   text-align:left; width:480px;
}
#caja th { 
   background:none repeat scroll 0 0 #B9C9FE;
   border-bottom:1px solid #FFFFFF;
   border-top:4px solid #AABCFE;
   color:#003399;
   font-size:13px; 
   font-weight:normal; 
   padding:8px;
}
#caja td { 
   background:none repeat scroll 0 0 #E8EDFF; 
   border-bottom:1px solid #FFFFFF; 
   border-top:1px solid transparent; 
   color:#666699; 
   padding:8px;
}

4. Zebra Horizontal

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

  
#zebra-hor { 
   border-collapse:collapse; 
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans- Serif;
   font-size:12px; 
   margin:20px; 
   text-align:left; 
   width:480px;
}
#zebra-hor th {   
   color:#003399; 
   font-size:14px; 
   font-weight:normal; 
   padding:10px 8px;
}
#zebra-hor .odd { 
   background:none repeat scroll 0 0 #E8EDFF;
}
#zebra-hor td { 
   color:#666699;
   padding:8px;
}

5. Zebra Vertical

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

#zebra-ver { 
   border-collapse:collapse;
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
   font-size:12px;
   margin:0 20px 20px;
   text-align:left;
   width:480px;
}
.zebrav-odd { 
   background:none repeat scroll 0 0 #EFF2FF;
}
.zebrav-even { 
   background:none repeat scroll 0 0 #E8EDFF;
}
#zebra-ver  th { 
   border-left:1px solid #FFFFFF; 
   border-right:1px solid #FFFFFF; 
   color:#003399; 
   font-size:14px; 
   font-weight:normal; 
   padding:12px 15px;
}
#zebra-ver  td {
   border-left:1px solid #FFFFFF; 
   border-right:1px solid #FFFFFF; 
   color:#666699; 
   padding:8px 15px;
} 

6. Enfasis en una Columna

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

#una-col { 
   border-collapse:collapse;
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif; 
   font-size:12px;
   margin:20px;
   text-align:left;
   width:480px;
}
#una-col th { 
   color:#003399; 
   font-size:14px; 
   font-weight:normal; 
   padding:12px 15px;
}
#una-col td {
   border-top:1px solid #E8EDFF; 
   color:#666699; 
   padding:10px 15px;
}
.una-col-primero  { 
    background:none repeat scroll 0 0 #D0DAFD; 
    border-left:10px solid transparent; 
    border-right:10px solid transparent;
}

7. Periódico

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

 
#periodico { 
   border:1px solid #6699CC;
   border-collapse:collapse;
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
   font-size:12px; 
   margin:25px;
   text-align:left;
   width:480px;
}
#periodico th { 
   border-bottom:1px dashed #6699CC; 
   color:#003399;
   font-size:14px;
   font-weight:normal;
   padding:12px 17px;
}
#periodico td { 
   color:#666699; 
   padding:7px 17px;
}
#periodico tbody tr:hover td { 
   background:none repeat scroll 0 0 #D0DAFD; 
   color:#333399;
}

8. Esquinas Redondeadas

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

  
#esqui-red{ 
   border-collapse:collapse;
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
   font-size:12px;
   margin:20px;
   text-align:left;
   width:480px;
}
#esqui-red th { 
   background:none repeat scroll 0 0 #B9C9FE;
   color:#003399;
   font-size:13px; 
   font-weight:normal;
   padding:8px;
}
#esqui-red td { 
   background:none repeat scroll 0 0 #E8EDFF;
   border-top:1px solid #FFFFFF;
   color:#666699;
   padding:8px;
}
#esqui-red thead th.izq-sup-red{ 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOmd9-h2iL32mVV54AeJBKAST4RmkCC5nfTPsUgTY0RkYnon4Db9_GNobIbaLIJrJFZV8-hp_mI8o_EqnN2jORB498MTOBIez_fPjG_XhhPuO0IqQzWfgF5T4SJR1u13__yVmRwq5ddinn/s800/izq.png") no-repeat scroll left -1px #B9C9FE;
}
#esqui-red thead th.der-sup-red{  
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX2suMO0KnpgjB7V8hlmDHp7W0o1Pl8UejVqzAWAOHHz61s3lfRaU7WV5X9ZkdT3YTa1Ke_XcGRJ__WzmGhGHMlD0KpZVme3MHN3f8GPd-_zDSW__5pTAtbzJUiW_tk5oXX5aMxlziv403/s800/der.png") no-repeat scroll right -1px #B9C9FE
}
#esqui-red  td.pie-izq-red{ 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip4X_LCHnrSPDhS0RSjHGkl1E9JlpgJCq2VHVHK7W5DtaL6JU3smT2lkVFY1oCM7klASCUZvtMeGyWrBb9P-H2z82VmS_j2CPX3zlUIrYQc0oJqQSdKnDIk3KIgnLw6ye1pnY6Gu6_Zyy3/s800/abaj-izq.png") no-repeat scroll left bottom #E8EDFF;
}
#esqui-red   td.pie-der-red{ 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwUrfVgG1h0O_KexURGkf8YJKpt4J-5OPxa9ZIrPrRLDb7dJYubhIX6RqJ4zVW0sYy08aur8H1KIlMUmVEKuZiDZsqbhPSF8HDF9xMAjlutXL9MRPqKCyktwoSyvsZ901Jhnuq-StqsKb/s800/abaj-der.png") no-repeat scroll right bottom #E8EDFF;
}

9. Fondo

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

#fondo-img { 
   border-collapse:collapse;
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
   font-size:12px;
   margin:20px;
   text-align:left;
   width:480px;
}

#fondo-img tbody {
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyprXjlzDAUg6BxomURrsMN6A0C2_ETlkTIQIzphkLti2-HBynIau0IWOgUV3vsvKAsPFtRIMbPwURxYd-R_LmXZmYZThVkb3HJ2OAGtV5JMctiNMyCDEEmOj15NpZWw9Y7sH_WLhXh2wb/s144/blurry.jpg") no-repeat scroll 330px 59px transparent;
}
#fondo-img th { 
   color:#333399; 
   font-size:14px; 
   font-weight:normal; 
   padding:12px;
}
#fondo-img  td { 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_iSAWJdnL2XRTZMW-ICJR2c6hksYsR7xrbghCliBd1on0mnmSbJFDEnmTjVNZ8iod4tyVZMKLclAM85Ry5OZmQWVs1-XgXqvBpX36T1dGyFqbKNRwmuh1WA6kk9X6Sxbi_j0uFcs-BWm/s144/back.png") repeat scroll 0 0 transparent; 
   border-top:1px solid #FFFFFF; 
   color:#666699;
   padding:9px 12px;
}
#fondo-img  tr:hover td { 
   background:none repeat scroll 0 0 transparent;
   color:#333399; 
}
 

10. Fondo Celda /Gradiente

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

 
#fondo-celda-a { 
   border-collapse:collapse;
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
   font-size:12px;
   margin:20px; 
   text-align:left;
   width:480px;
}
#fondo-celda-a th { 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUuEgtmepzBtvhJRVFokZUVN-n6T63SQDZQf57xMe1g9o0_ttPbfjiwqn4epR6ZRtB6mm6CXkuJDsoWh7bi0lY6ZgR5dMGR4JMHYWF5aAncimCTyXfW9Rgnc8SLkqmrzWFX-yEikaK7-f_/s800/fondo-celda-encabezado-a.png") repeat-x scroll 0 0 #B9C9FE; 
   border-bottom:1px solid #FFFFFF; 
   border-top:2px solid #D3DDFF; 
   color:#003399; font-size:13px; 
   font-weight:normal; 
   padding:8px;
}
#fondo-celda-a td { 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPG-_PpA8vEGSCYkyNamO1qEfQonemzLRHfgScSdQUKlwwTsOZTq-q2TPSbBgro6-6lyzBkAyA1lvt76M3VoW-hGDjQR9sCMJk5HyfssHcWt9LxkTGCOtsz2pqLTlokF2ieyrQYgm8aJJV/s800/fondo-celda-cuerpo-a.png") repeat-x scroll 0 0 #E8EDFF; 
   border-bottom:1px solid #FFFFFF; 
   border-top:1px solid #FFFFFF; 
   color:#666699; padding:8px;
}
#fondo-celda-a  tr:hover td { 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhppsNKUORN9SFfbGfLWk7OYl860P4sHH5b9TTofbpkScBd0rHQcEMt-pLDNjZ14vukPjxJxglYIH05HTZ8LxdFsqlmaR7Cw3AaKENistMZmSpxVT4rkPWR1bfHrOsoMI-LdkLX85gYZumR/s800/fondo-celda-cuerpo-hover-a.png") repeat-x scroll 0 0 #D0DAFD;
   color:#333399;
} 

11. Fondo Celda /Rayas

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

 
#fondo-celda-b { 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj83uee8BOyGztyw8lIqLuA-QBTD6wmoePe9HaVUYAiaMFM8QdqFrz8o7BXmH0JwsIMAjHLzfxdP4ukGVpibVfnM18cfani8U4YwvPgDaV_FotExeb-opg7HC_3ITqy-e821KfMuTEuUAOf/s800/rayas.png") repeat scroll 0 0 transparent; border-collapse:collapse; 
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;   
   font-size:12px;
   margin:20px;
   text-align:left;
   width:480px;
}
#fondo-celda-b thead tr { 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SZd69O73qGrPLvajWX0I9olFDoAzplFbaAmrvxlYtQOGdE8NFL0NngjWnQDwFbVLm01-NIHf5v7tDm7ZRMxYxIY_Q0l67mgrXko6PqcTJLiEB48MkZZBPuSKscVr_Pxys9cV3v6C1fIx/s800/rayas-encabezado.png") repeat scroll 0 0 transparent;
}
#fondo-celda-b th { 
   border-bottom:1px solid #FFFFFF; 
   color:#003399;    font-size:13px;                    
   font-weight:normal; 
   padding:8px;
}
#fondo-celda-b  td { 
   border-bottom:1px solid #FFFFFF;
   border-top:1px solid transparent; 
   color:#666699; padding:8px;
}
#fondo-celda-b  tr:hover td { 
   background:none repeat scroll 0 0 #FFFFFF; color:#333399;
}

12. Fondo Celda /Púrpura

DEC	OCT	HEX	BIN	Symbol	HTML Number	HTML Name	Description
48	060	30	00110000	0	0	-	cero
49	061	31	00110001	1	1	-	uno
50	062	32	00110010	2	2	-	dos
51	063	33	00110011	3	3	-	tres
52	064	34	00110100	4	4	-	cuatro
53	065	35	00110101	5	5	-	cinco
54	066	36	00110110	6	6	-	seis
55	067	37	00110111	7	7	-	siete
56	070	38	00111000	8	8	-	ocho
57	071	39	00111001	9	9	-	nueve

#fondo-celda-c { 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjch6njeVElf62w7QSOHa7DEnW60GPdNjqqQp6y8U-NFOZT34vbL-6umLGgCjKAoqDcv8kFbUXl1IKKXo3fF6iiwXMMuVm3NJcz8IqAPqbNQtSm37IYs7PoAemMIRT5hkOwnSz_-2ykcjWl/s800/patron.png") repeat scroll 0 0 transparent; 
border-collapse:collapse;
   font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
   font-size:12px;
   margin:20px;
   text-align:left;
   width:480px;
}
#fondo-celda-c thead tr { 
   background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNqIHLvfZsm73UY3Sk45d1hhZzT1vVwY0rHpO653wYU1w1B4o5B9Eu7jeM2fwB_1ZXMHUu_gHhjEhEmQcCMQiImzbv9giQSUne7NcDaPpq8vAmjlMYILbUtr80BajwWmXlABfzECP6e1rr/s800/patron-encabezado.png") repeat scroll 0 0 transparent;}
#fondo-celda-c th { 
   border-bottom:1px solid #FFFFFF;
   color:#003399; 
   font-size:13px;
   font-weight:normal; 
   padding:8px;
}
#fondo-celda-c  td 
{
   border-bottom:1px solid #FFFFFF; 
   border-top:1px solid transparent; 
   color:#666699; padding:8px;
}
#fondo-celda-c  tbody tr:hover td { 
   background:none repeat scroll 0 0 #CDCDEE; color:#333399;
}  

Diseño Web: Fondo Disuelto

Cuando uno comienza sus primeros pasos en el diseño web generalmente lo hace como decimos en Costa Rica, a la "chambona". Esto quiere decir que montamos nuestras páginas a como caigan las cosas. Colocamos imágenes sin medir tamaños o sin tener el toque creativo del cual carecemos la mayoría que nos dedicamos principalmente a la programación.

Recientemente aprendí una técnica que muchos dirán que es básica, pero para este servidor no lo era y nunca está demás dejar documentado algo que para mi es imprecindible para diseñar de manera optimizada para la carga.

Si queremos que nuestra página luzca un poco más atractiva, podemos usar en lugar de fondos con un color plano, fondos con efectos como el fondo disuelto.

Primero debemos generar una imagen con este tipo de fondo. Usemos la herramienta Gimp para construirla. Tomemos la herramienta de mezcla:


Escogemos después el modo de disolver:


Arrastramos el cursor en nuestra imagen de arriba hacia abajo para generar el color disuelto en esa dirección. Ahora viene el truco para la optimización de carga. En lugar de generar un tamaño de acuerdo al espacio que queremos llenar en nuestra página, escalamos la imagen a un ancho de 4 pixeles dejando el tamaño de largo igual:


Quedamos con una imgen que luce así:


Ya en nuestro CSS usamos la propiedad de "repeat" para generar esta misma línea a traves de todo el ancho del fondo que deseamos cubrir. Al usar "repeat-x" nos ahorramos bytes de carga lo cual nos ayuda en la experiencia usuario.

#footer{
background: url(images/disuelto.jpg) left top repeat-x;
}