Diseño Web
Estás viendo los artículos de ZonaMasters – Recursos para webmasters correspondientes a la categoría Diseño Web.
Si estás interesado en usar imágenes de otros autores para ponerlas en la web con la licencia de Creative Commons. Puedes emplear el buscador de Google de imágenes añadiendo a la url de la búsqueda &as_rights=(cc_publicdomain|cc_attribute|cc_sharealike).-(cc_noncommercial|cc_nonderived). Por ejemplo para buscar coches empleamos la url: http://images.google.es/images?q=coches&as_rights=(cc_publicdomain|cc_attribute|cc_sharealike).-(cc_noncommercial|cc_nonderived)
Coches (con licencia creative commons)
Escrito por Niko | 
22 de Julio de 2009 | 
1 comentario
Diseño Web.
En 1001Photoshop te traemos una serie de post relaciones con pinceles gratis del famoso programa de diseño Photoshop:
Espero que os gusta esta serie de post de pinceles para photoshop 
Escrito por Niko | 12 de Julio de 2009 | 0 comentarios
Diseño Web.
Siguiendo el tutorial de menu CSS, podremos crear desplegables usando solo CSS, aunque para que funcione correctamente en todos los navegadores (internet explorer como siempre dando la nota) deberemos insertar el siguiente código:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!--[if gte IE 5.5]>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).removeClass("iehover"); }
);});
</script>
<![endif]-->
Aquí os dejamos un ejemplo
<ul id="navmenu">
<li><a href="#">Root nav item</a>
<ul>
<li><a href="#">Sub nav item</a></li>
</ul>
</li>
</ul>
Mira más menu de ejemplo.
Puedes ver también:
Plantillas CSS gratis
Visto en Anieto2k
Escrito por Niko | 10 de Julio de 2009 | 1 comentario
CSS y Diseño Web.
Reset CSS es una técnica para resetear todos los valores del CSS que vienen por defecto en los navegadores (margenes, aliniaciones…). La web de desarrolladores de Yahoo, podemos ver el siguiente ejemplo con el que conseguiremos resetar todos los valores.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Un reset básico sería el siguiente:
* {
margin:0;
padding:0;
}
Visita Yahoo! UI Library: Reset CSS
Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
CSS y Diseño Web.
En el ordenador es común ver los colores tienen asociado un valor hexadecimal (puede tomar 16 valores cada cifra desde 0..9A..F), estos valores representan la cantida de rojo, azul y verde (RGB) dos cifras hexadecimales para cada uno, la mezcla de esos tres colores primarrios se puede sacar una gran variedad de colores.
Realmente es cómodo podemos controlar con exactitud los colores de nuestra web sean tales como los hemos preparado en photoshop (este te da el valor hexadecimal con la herramienta de cuenta gotas)
Aquí os dejo una tabla con algunos colores y su valor en hexadecimal.
|
Color
|
Hexadecimal
|
|
#FFFFFF
|
|
|
#000000
|
|
#000080
|
|
#0000FF
|
|
#008000
|
|
#008080
|
|
#00FF00
|
|
#00FFFF
|
|
#800000
|
|
#800080
|
|
#808000
|
|
#808080
|
|
#C0C0C0
|
|
#FF0000
|
|
#FF00FF
|
|
#FFFF00
|
Escrito por Niko | 10 de Julio de 2009 | 4 comentarios
CSS y Diseño Web.
A estas alturas el efecto de lightBox es bastante conocido (existe hasta para videos Videobox). El plugin que os muestro en el post se puede decir que es de los más conocidos, aunque existe alternativas como jQuery.popeye, Zoomy…
Como usar el plugin:
Para comenzar necesitamos tener el javascript de jQuery y después descargar el plugin. Debemos incluir en la cabecera dos ficheros javascript:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
También debemos incluir el fichero CSS:
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
Incluimos las etiquetas HTML para enlazar una imagen, por ejemplo:
<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
Y por último incluimos el siguiente javascript que es el que activará el lightBox:
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
Visita lightBox plugin
Ver una Demo
Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
CSS y Diseño Web y JavaScript.
Estos son los pasos a tener en cuenta para realizar un diseño web 2.0:
- Simplicidad
- Layout centralizado
- Pocas columnas
- Separar claramente la parte superior del contenido
- Diferenciar distintas áreas
- Navegación simple
- Logos en negrita
- Textos con el tamaño de letra grande
- Texto en negrita en introducciones
- Colores fuertes
- Superficie con detalle
- Degradados
- Reflejos
- Iconos bonitos (si estás buscando iconos atractivos para tu web 2.0 emplea Iconspedia e IconDB)
- Estrellas (ya estamos acostumbramos a ver la tipica estrellita con el beta dentro )
Visto en Web 2.0 how-to design style guide
Escrito por Niko | 9 de Julio de 2009 | 5 comentarios
Diseño Web.
Si quieres una implementación elegante para realizar un scroll en una capa div, puedes hacerlo con la librería desarrollada en DYN-WEB, que te permite desplazamiento onmouseover, onmousedown, onmousewheel, o deslizamiento onclick, desplazamiento vertical u horizontalmente , las barras de desplazamiento pueden ser creadas usando los gráficos que elijas y muchas más opciones.
Descargar div con scroll
Escrito por Niko | 28 de Junio de 2009 | 0 comentarios
CSS y Diseño Web y JavaScript.
Si estás buscando iconos sin duda estás de suerte con un nombre que recuerda mucho a la wikipedia, se puede decir que es una enciclopedia de iconos.
Se trata de una web 2.0 en la que los usuarios además de descargarse los iconos, puede enviar sus propios iconos para compartir con el resto de usuarios. Está muy bien clasificados y se puede encontrar con bastante facilidad el icono que estés buscando.
Otras páginas similares son Icondb
Visita Iconspedia
Escrito por Niko | 28 de Junio de 2009 | 1 comentario
Diseño Web.
Si quieres estar al día con todas las novedades del CSS, aquí tienes un blog con una gran cantidad de recursos para hacer unos CSS más completos, gracias a todos los ejemplos que te muestran no tendrás problemas en seguirlos 
, además tienen una clasificación de tutoriales por nivel de dificultad, así que para el que se esté iniaciando le vendrá genial.
Visita CSSBLog
Visto en Loogic
Escrito por Niko | 9 de Febrero de 2009 | 0 comentarios
CSS y Diseño Web.
