Crear un menu tipo acordeon usando jquery

bueno es un script creado en jquery: http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

Menu horizontal basico

html

css

Aprendiendo a diseñar en photoshop y pasarlo a css

Bueno no quiero arruinar un post poniendolo aqui solo les dejo los enlaces:

Diseña un boceto para una pagina web personal en Photoshop

 

Como pasar un diseño de Photoshop a HTML y CSS

Tutorial de posicionamiento y layout en CSS

 Autor: Ramm

¿A qué le llamamos posicionamiento?

Obviamente no me refiero a los buscadores como Google o Yahoo, posicionamiento en CSS consiste en ubicar los elementos HTML en la pagina, el "layout" o distribución de la pagina. Basicamente esto se logra ordenándole desde CSS a los elementos que tengan cierto tamaño y posición, además de obtener una buena organización del código HTML o XHTML.
El posicionamiento con CSS nos permite control total sobre los elementos de la pagina, además con documentos muy livianos y completamente válidos ante W3C.

Los Divs

Antes de comenzar con el CSS quiero exponer aqui la importancia de usar los divs, un div es basicamente un contenedor, en el podemos meter cualquier clase de contenido, con la gran ventaja de que los podemos manipular a nuestro antojo con CSS, colocarlo en cualquier parte de la pagina, de cualquier tamaño, de cualquier color, con bordes o sin ellos, con imagenes de fondo o sin ellas, a diferencia de las tablas, los divs no se dividen por dentro, pero podemos anidarlos y organizarlas casi como las tablas (en caso de ser necesario).
Para lograr que el posicionamiento no se vuelva complicado, debemos tener en cuenta que la organización en el codigo HTML es muy importante, tener bien estructurados los elementos nos facilitará el trabajo con CSS, con esto quiero decir que debemos contar con un código semántico.

Semántica
Proviene del griego "semantikos", que quería decir "significado relevante", derivada de "sema", lo que significaba "signo") Se dedica al estudio del significado de los signos lingüísticos y de sus combinaciones, desde un punto de vista sincrónico o diacrónico. (definición de wikipedia)

Esto significa que a la hora de hacer el codigo HTML, este bien organizado jerárquicamente, o sea anidar los divs segun importancia, agrupados segun sección, utilizar las etiquetas h1, h2, h3, etc para los títulos, las etiquetas

y
• para las listas, las etiquetas en los parrafos, ayuda a organizar mejor el contenido, ademas de que estan ahi para eso. La mayoria se ha olvidado del uso de estas etiquetas por trabajar en entornos gráficos para diseñar, o porque solo le dan importancia a lo que se ve. Otras ventajas son que los buscadores entienden el codigo, por ejemplo google sabe que      
  BLOOGER INTERPRETA HTML POR LO QUE LES RECOMIENDO IR A LA FUENTE PARA VER ESTE CODE :D Asi se ve el ejemplo sin estilos
  De aqui en adelante vamos con lo que nos interesa, lo primero que haremos será centrar nuestro div "contenedor" en la ventana del navegador, y darle un tamaño específico
  
  
  
  

  /*empezamos por esto, para evitar resultados extraños en distintos navegadores, y algo de estilo al texto*/
  body {
      font-family:Georgia, "Times New Roman", Times, serif;
      font-size:12px;
      color:#666666;
      text-align:center; /*aqui mandamos a centrar todo el contenido*/ 
  }

  y luego al div:

  #contenedor {
      width:600px; /*ancho total de la pagina*/ 
      border:1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/ 
      background-color:#FFF8F0;
      margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevos es suficiente para centrar la pagina*/ 
      text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/ 
  }

  Bien, ya tenemos el div contenedor centrado en la pagina, ahora vamos con el "encabezado":
  Aquí, vemremos como funciona float. Así como suena, float nos permite "flotar" elementos hacia la izquierda o la derecha de la pagina, haciendo que los demas elementos fluyan alrededor
  
  

  #encabezado {
      margin:10px; /*para que no se pegue al borde*/ 
      padding:10px; /*algo de relleno*/
      width:224px; /*este ancho es para que cuadre con el texto*/ 
      height:50px; /*idem*/ 
      border:1px solid #333333; /*decoracion*/ 
      background-color:#CC6600; /*more*/ 
      float:left; /*lo flotamos a la izquierda*/ 
      display:inline; /*(*)*/ 
  }

  (*)display:inline; se usa en este caso para corregir un error en IE, en la interpretación del margin y el padding, si flotamos a la izquierda, y hay 10px de margin a la izquierda, IE sumara el doble de ese margen. Con esta linea corregimos eso.
  Ahora algo de estilo para el titulo:
  
  

  #encabezado h1 { /*encadenamos el identificador del div, con la etiqueta par areferirnos solo al h1 dentro del div encabezado, asi no afectara otros h1 en el resto del documento.*/ 
      font-size:18px;
      font-weight:bold;
      width:224px;
      border-bottom:16px solid #FFFFFF;
      color:#FFFFFF;
      margin:0; /*los h1 vienen con margen, con esto se lo quito*/ 
      text-transform:uppercase; /*convierte todas en mayusculas*/ 
      padding-bottom:10px;
  }

   Seguimos con el menu:
  

  #menu {
      float:left;
      margin:10px 10px auto 0;
      border:1px solid #333333;
      width:320px;
      height:24px;
  } 

  Y luego con la lista. las listas traen varios pre-formatos desde HTML, 
  como las viñetas, margen, saltos de línea a cada item, padding, etc... 
  Aqui vamos a cambiar completamente el aspecto de una lista, con sus 
  vinculos dentro.

  ul {
      list-style-type:none; /*con esto quitamos las viñetas*/
      margin:0; /*le quitamos el margen a la lista*/ 
      padding:0; /*y el relleno*/
  }
  li {
      margin:0; /*le quito el margen al elemento de la lista*/ 
      float:left; /*y los floto a la izquierda para eliminar el salto de linea*/ 
  }
  li a {
      display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/ 
      background-color:#CC3300; /*algo de color*/ 
      color:#FFFFFF; /*mas*/ 
      width:58px; /*defino el ancho del rectangulo del vinculo*/
      padding:4px 0 5px 22px; /*sumamos el relleno al ancho y alto del rectangulo para obtener el div #menu completamente ocupado con los ítems del menú*/ 
      text-decoration:none; /*elimino el subrayado del vínculo*/ 
      font-weight:bold; /*decoración*/ 
      text-transform:uppercase; /*decorare los vinculos en mayusculas*/
  }
  li a:hover {
      background-color:#999900; /*decoración para el evento hover (mouse encima)*/ 
  }

  Esto es suficiente para cambiar el aspecto de la lista, y los vinculos en el menu. Así podemos jugar con los anchos y rellenos para lograr menúes mas complejos, poniendole bordes, etc ...
  Ahora el contenido:
  

  #contenido {
      width:580px; /*el ancho mas el padding me da 600px de ancho que es loque mide la pagina */
      clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ 
      padding:10px;
  } 

  Algo de estilo para los titulos: 

  #contenido h2 {
      font-size:16px;
      color:#CC3300;
      width:246px;
      text-transform:uppercase;
      border-bottom:1px dotted #CC3300;
  }
  #contenido h3 {
      width:246px;
      font-size:14px;
      color:#999900;
      border-bottom:1px dotted #999900;
  }
      

  Y terminamos con el footer:
  

  #footer {
      width:560px; /*menos porque debemos sumar el padding del div contenido*/ 
      text-align:right;
      padding:10px;
      font-size:80%; /*mas pequeño el texto*/ 
      font-style:italic;
      color:#999999;
  }

  Los comentarios en el codigo explican lo que hace cada uno de los atributos clave usados en el ejemplo.
  Y con esto terminamos nuestra pagina, obteniendo este ejemplo terminado , una pagina semántica, facilmente entendible por los navegadores, los buscadores y por nosotros mismos.
  
  
  Fuente: http://www.cristalab.com/tutoriales/tutorial-de-posicionamiento-y-layout-en-css-c111l/
  
  
  
  
  
  
  
  
  

Bordes Redondeados con CSS

La implementación de bordes redondeados en HTML normalmente se hacer utilizando imágenes de fondo o con otras técnicas que por lo general son engorrosas, esta vez les presentamos una técnica muy sencilla con la que podemos crear elementos con esquinas redondeadas de manera sencilla.

Como lo hacemos
Para crear bordes redondeados con CSS en Firefox, podemos utilizar la propiedad -moz-border-radius y si utilizamos Safari se puede utilizar la propiedad -webkit-border-radius, pero para Internet Explorer no hay posibilidad de hacerlo nativamente.
Entonces para ello haremos uso de un hack que fue publicado en Curved corner (border-radius) cross browser, este hack se ha preparado en un archivo border-radius.htc. Entonces luego de descargar el archivo, para aplicar los bordes redondeados creamos un estilo de la forma:

1. .curved {
2.     -moz-border-radius: 10px;
3.     -webkit-border-radius: 10px;
4.     behavior:url(border-radius.htc);
5. }

 Luego podemos aplicar este estilo a cualquier div que nosotros deseamos, como se muestra a continuación:

1. id="alert" class="curved">Curved Corner

Con esto logramos obtener las esquinas redondeadas que se verán correctamente en todos los navegadores y con unas pocas líneas.
Observaciones
He probado este hack y por defecto le pone un borde al div que elegimos, para eliminar este efecto es necesario agregar un borde con el mismo color de fondo del elemento. Además de ello por defecto hace que el div al que se aplica los bordes redondeados se muestre centrado, para evitar ello agregamos un par de líneas a nuestro CSS (float y clear).

1. #alert {
2.     width: 250px;
3.     background-color: #A0C7F1;
4.     border: #A0C7F1 solid 1px;
5.     clear: both;
6.     float: left;
7. }

 El código anterior crea un elemento de de 250 pixels de ancho con color de fondo y borde iguales. Este ejemplo lo podemos ver funcionando en Esquinas Redondeadas.

Fuente: http://blog.unijimpe.net/bordes-redondeados-crossbrowser/

CSSRound : Crear esquinas redondeadas facilmente

CSSRound es una aplicación que nos permite generar estilos, HTML e imágenes para crear cajas con esquinas redondeadas de forma muy sencilla.

Tan solo tendremos que indicar el radio de la esquina, el color de fondo de la capa, el color de la caja redondeada, el color de la letra, el ancho de la caja y el contenido, y nos devolverá todo lo necesario para mostrar el diseño en nuestra página.

Para ver el como funciona y descargarlo
Click aqui CSSRound

Limpia tu codigo CSS

Buena el otra ves navegando me encontre con una pagina web muy buena que seguro que les va a gustar es para limpiar su CSS para que no se haga tan pesado, para los que no saben que es css es el diseño de tu pagina web XD, aqui les dejo la web:
http://www.cleancss.com/

Reset CSS (Informacion y un reset css de eric meyer)

Los Reset CSS son unas hojas de estilo en cascada que se suelen incluir al comienzo de un documento HTML, y cuya función es la de minimizar, en la medida de lo posible, las múltiples diferencias visuales que se dan a la hora de mostrar una misma página web, en diferentes navegadores, causa de que cada navegador implementa su hoja de estilos propia e interna, con determinados valores por defecto, que no siempre siguen la recomendación de la organización W3C.
El consorcio W3C, junto con su especificación de CSS 2.1¹ del 23 de abril de 2009, publicó en su recomendación, un valor por defecto para cada propiedad de CSS que deberían adoptar los agentes de usuario. Debido a que algunos navegadores hicieron caso omiso a sus indicaciones, los diseñadores web se han visto obligados a recurrir al uso de este tipo de trucos para garantizar la correcta visualización en la mayoría de navegadores.

¿En qué consiste?

Los Reset CSS contienen en su código fuente, definiciones para propiedades problemáticas que los diseñadores necesitan unificar desde un principio.
Por ejemplo, la mayoría de navegadores establece un margen por defecto entre el contenido de la página web y su propia ventana, cuyo valor varía de un navegador a otro. Los diseñadores web para subsanar esa diferencia, suelen declarar la siguiente línea al comienzo de sus hojas de estilo:

* { margin: 0; padding: 0; }

Esa única línea indica, y con el selector universal de CSS representado por un asterisco, que todos los elementos contenidos en el HTML al que se aplique, carecerán de márgenes. De esa manera, el diseñador se verá obligado a declarar después los márgenes necesarios en el diseño de su página web, en cada uno de los lugares donde sea necesario, sin tener que dejar ese aspecto a decisión de ningún navegador, y minimizando por tanto, las diferencias visuales entre los mismos.
Los Reset CSS pueden contener esa y otras muchas líneas de código que, en su conjunto, servirán al diseñador web para unificar su visualización entre navegadores.

Algunos Reset CSS famosos

El primer Reset CSS que cogió fama fue el publicado por Yahoo! UI Library, pero no fue un poco más tarde, hasta que Eric Meyer considerado un Gurú de las CSS, hizo su popular versión, cuando el término cogió una verdadera popularidad, entre gran cantidad de diseñadores web de todo el mundo, y el artículo donde Meyer publicó su propuesta fue enlazado por infinidad de Blogs.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Véase también

• Yahoo! UI Library
• Eric Meyer

Adobe Photoshop para diseño web I,II,III[Mediafire]

        Adobe Photoshop para diseño web I


Primer ejemplo: web corporativa de un restaurante

Si eres diseñador offline y crees que ha llegado el momento de pasarte a la creación para web, en este ejemplo totalmente práctico verás cómo crear una dirección de arte completa para la web de un restaurante de comida japonesa, usando solamente Adobe Photoshop.

Lenguaje: Español
Tamaño: 917mb

Adobe Photoshop para diseño web II


Segundo ejemplo web de una inmobiliaria

Si eres diseñador offline y crees que ha llegado el momento de pasarte a la creación para web, en este ejemplo totalmente práctico verás cómo crear una dirección de arte completa para la web de una inmobiliaria, usando solamente Adobe Photoshop.

Lenguaje: Español
Tamaño: 1,02gb

Adobe Photoshop para diseño web III


Tercer ejemplo: web para Flash

Si eres diseñador offline y crees que ha llegado el momento de pasarte a la creación para web, en este ejemplo totalmente práctico verás cómo crear una dirección de arte completa de la web corporativa de una revista de moda, que será elaborada en Flash.

Lenguaje: Español
Tamaño: 1,09gb


Links: http://www.mediafire.com/?6g4f281fzog7s
Pass: www.identi.li


Todos los agredecimientos para :-Fabiian-:-2010 por la subida de mision uploader

Guia paint

Aqui les dejo una guia para paint que les sera de utilidad para los que no saben usarlo, pues esta guia es para aprender a usar todas sus herramientas y luego puedes avanzar un poco mas haciendo dibujos mejores en paint.

Descargar guia: http://www.mediafire.com/?b4sdf41h5s7rdai

psd para crear tu cmd a tu estilo

Bueno he creado este psd el cual pueden modificarlo van a ventana>animacion
en photoshop y agregan las letras que quieran, para ello tambien tienen que crear capas es bastante tedioso, si no les gusta nomas cambien las letrs por eso se los dejo en psd, aqui un ejemplo de como se ve el resultado final:

 El link de descarga: http://www.megaupload.com/?d=HAGB21PO

500 estilos para photoshop

aqui les dejo una coleccion de 500 estilos para photohop, hasta ahora una de las mejores colecciones que he encontrado en la red y la comparto aca con todos ustedes, aca les dejo el link de descarga:
http://www.megaupload.com/?d=VVSHKH5F

Brushes y Estilos (Photoshop)

Más de 300 estilos y Brushes para Photoshop todo en un paquete de ensueño

DESCARGALO YA