Archivo para la categoría ‘CSS’ .

CSS Reset es un pequeño trozo de código que permite formatear todos los estilos por defecto, son muy útiles para evitar posibles problemas a la hora de maquetear un sitio web.

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

Leído en: Kabytes.

Compártelo!

Muchas veces cuando diseñamos una página web nos encontramos con el problema de que en algunos navegadores (el 99% de las veces es Internet Explorer) nuestro CSS no se ve correctamente. Para solucionar estos problemas stylizedweb ha publicado una lista de 10 hacks para que nuestros diseños se vean correctamente en varios navegadores .

• Vertical align div
• Min-Height
• PNG transparency
• Autoclear
• Reset CSS
• Scrolling Render IE
• Opacity
• PRE Tag
• Li Background Repeat IE
• Good to know

Acceder a los hacks.

Compártelo!

Para utilizar estos gráficos debemos descargar el css que tiene un peso aproximado de 5 KB y aplicarlo, las graficas pueden utilizar además de un color de plano imágenes, eso esta bueno para lograr efectos degradados, sombras, etc.

Web: Pure CSS Data Chart

Vía: Kabytes.

Compártelo!

Una forma de construir un menú de navegación con imágenes muy agradable usando el efecto persiana de Mootools.

Pasos para instalarlo:

1.-Descargamos el fichero (Guardar como) con las librerías (imageMenu.js y mootools.js)

2.-Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imageMenu.js"></script>

3.- Insertamos el siguiente código en nuestra hoja de estilos (CSS):

/*Images menu*/
#kwick {
position: relative;
/*border-bottom: 3px double #333;*/
margin-top: 20px;
}
#kwick ul{
list-style:none;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 97px;
/*padding: 10px;*/
background: #fff;
/*border-right: 5px solid #202020;*/
border-right: 2px solid #fff;
}
#kwick .kwick span {
display: none;
}
#kwick .opt1 {
outline: 0; background: #9ce782 url(../images/landscapes.jpg) ;
}
#kwick .opt2 {
outline: 0; background: #92bdfa url(../images/people.jpg);
}
#kwick .opt3 {
outline: 0; background: #faa892 url(../images/nature.jpg);
}
#kwick .opt4 {
outline: 0; background: #e78282 url(../images/urban.jpg);
}
#kwick .opt5 {
outline: 0; background: #000 url(../images/abstract.jpg);
border-right: 0;
}

4.-Aquí está el código HTML de nuesto menú en cuestion:

<div id="kwick">
			<ul class="kwicks">
				<li><a class="kwick opt1" href="http://www.christiangl.com/" ></a></li>
				<li><a class="kwick opt2" href="http://www.christiangl.com/" ></a></li>
				<li><a class="kwick opt3" href="http://www.christiangl.com/"></a></li>
				<li><a class="kwick opt4" href="http://www.christiangl.com/" ></a></li>
				<li><a class="kwick opt5" href="http://www.christiangl.com/" ></a></li>
			</ul>
</div>
		<script type="text/javascript">
			var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
		</script>

5.-Para crear más opciones en el menú debemos hacer lo siguiente:

Continuamos añadiendo las definiciones que necesitemos en la página de estilo de nuestro sitio de la siguiente forma:

#kwick .opt6 {
outline: 0; background: #000 url(../images/NuevaImagen.jpg);
border-right: 0;
}

y a continuación añadimos en el HTML de nuestro menú el link con su determinada clase:

<li><a class="kwick opt6" href="http://www.christiangl.com/" ></a></li>

Y eso es todo, aquí os dejo la dirección de una demo del funcionamiento del menú .

Compártelo!