Una forma sencilla de mostrar las distintas formas de posicionamiento mediante CSS: position:static, position:relative, position:absolute y float.
Learn CSS Positioning in Ten Steps
Vía / Vecindad Gráfica
Konstruktors es un lugar dónde podremos encontrar códigos CSS para copiar y pegar. No se trata de ficheros independientes, sino de trozos de código.
Mantener código CSS en ficheros de texto no es difÃcil, y es conveniente teniendo múltiples llamadas HTTP. Si tenemos bien organizados nuestros estilos, con estos trozos de código podremos modificar los estilos sin mayor dificultad.
Los trozos de código se dividen en uso para grid, aspectos básicos de HTML y menús.
Konstruktors
VÃa / Posh CSS
Muchas de las técnicas para hacer hojas de estilo que permitan imprimir correctamente nuestra web producen una salida que no se parece en nada a lo que se muestra en pantalla. Esto suele confundir al usuario y le produce la impresión de que ha imprimido una pagina distinta.
En ErraticWidsom nos enseñan a hacer hojas de estilo para impresión mantiendo la lÃnea de diseño que se ve en pantalla.
VÃa / Digg
HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, perfo …
Si tienes alguna duda de cómo realizar el menú de tu aplicación web, aquà tienes una lista bastante extensa de artÃculos y tutoriales de listas, menús, navegación y pestañas. Los hay mejores, peores, más sencillos, os recomiendo que os deis una pasada por ellos y veáis cual se adapta mejor a vuestras necesidades. Eso sÃ, comprobarÃa que funcionen en todos los navegadores.
Top 71 CSS Menus Navigation Tabs
Via / Digg
Buenos consejos para realizar tus estilos CSS bien estructurados.
Write a well structured CSS file without becoming crazy
Vía / CSS Globe
En la Web 2.0 está más de moda usar transparencias en nuestras páginas web, realmente se puede realizar con estilos, pero con Internet Explorer se hace de una forma y con Firefox de otra, y no estoy muy seguro, con Opera no se puede (actualización: Federico nos comenta que en la versión 9 ya está implementada). Por ello, una forma de simular la transparencia en una capa es usar dos imágenes, una de fondo con la imagen original y la otra con una imagen que hemos creado nosotros que tendrá el efecto de transparencia.
Yo en el ejemplo me he creado una capa blanca, encima he puesto la imagen con cierto grado de transparencia y encima he puesto la misma imagen con efecto de luminosidad suave, para que no sea sÃmplemente una transparencia.
Tenemos una capa div y dentro de ella un párrafo:
<div><p>...</p></div>Ahora le tenemos que indicar los estilos:
div.contenedor {
width: 500px;
height: 375px;
background: url(forest.jpg) top left no-repeat;
}
div.contenedor p {
width: 420px;
height: 295px;
top: 40px;
left: 40px;
background: url(forest_transparencia.jpg) -40px -40px no-repeat;
border: 2px solid #000000;
position: relative;
}Si te fijas, verás que en el estilo de párrafo, se desplaza del background hacia arriba y hacia la izquierda tanto como está desplazado el párrafo hacia abajo y hacia la derecha sobre la capa contenedora.