css

Colección de diseños de tablas mediante CSS

ByLuis March 17, 2006

Para aquellos que no sean hábiles en el diseño y necesiten de ideas para mejorar el aspecto de las tablas, existe una galería con diseños de tablas mediante CSS.

Hasta ahora hay un total de 71 diseños, que se pueden visualizar en la misma lista, no son screenshots, ni popups, ni enlaces a otras páginas, cuando queremos ver uno de los estilos, se recarga la página y muestra la lista con el estilo seleccionado. También hay una serie de tutoriales sobre tablas y CSS que nos pueden ser de utilidad. Cualquier ayuda siempre es bienvenida.

CSS Table Gallery

Vía / Digg

css

CSSeasy: layouts CSS

ByLuis June 11, 2007

Uno de los trabajos iniciales con los que nos solemos encontrar al empezar un proyecto web es la de realizar el diseÃ±o inicial de la estructura de la pÃ¡gina (layout). Normalmente se suele hacer un copy/paste de un proyecto anterior, pero en el caso de que no dispongamos de esa base previa, siempre podemos buscar en un lugar donde nos lo ofrezcan.
CSSeasy nos ofrece 8 diseÃ±os, 4 estÃ¡ticos y 4 fluidos. Siendo los 4 diseÃ±os para los dos diferentes tipos los siguientes: 1 columna sin navegaciÃ³n, 1 columna con navegaciÃ³n arriba, 2 columnas con navegaciÃ³n izquierda y 2 columnas con navegaciÃ³n derecha.

Lo que se echa en falta es una explicaciÃ³n mÃ¡s detallada, ellos recomiendan ver el cÃ³digo fuente y experimentar con Ã©l, el cÃ³digo estÃ¡ algo comentado, pero quizÃ¡s no sea necesario para gente que se estÃ© iniciando en el diseÃ±o web o que pasen de diseÃ±o con tablas a diseÃ±o sin tablas.
CSSeasy.com
VÃa / Digg

css | Laboratorio

Laboratorio: mostrar que thumbnails has visitado

ByLuis March 23, 2007

Una de las cosas que mÃ¡s me ha gustado de Design Meltdown es que te indica que thumbnails has visitado.

Se trata de lo siguiente, tienes un enlace que contiene una imagen en miniatura que accede a la imagen con el tamaÃ±o original (thumbnail). Cuando ya has visitado la imagen el thumbnail cambia y te dice que ya lo has visitado.

Para hacerlo es sencillo, creas una capa con un tamaÃ±o especÃfico (el del thumbnail), le indicas mediante estilo dentro de la propia etiqueta HTML la imagen de fondo, que serÃ¡ el thumbnail en sÃ.

Dentro de la capa incluyes un enlace que se mostrarÃ¡ como un bloque (display: block) y que no mostrarÃ¡ nada, bueno, en este caso si mostrarÃ¡ un texto que referencie a lo que enlaza, pero mediante estilos el texto no se verÃ¡, esto lo hacemos asÃ para que los dispositivos que no admitan estilos puedan ver algo.

Modificaremos el estilo de enlace visitado para que muestre como fondo una imagen parcialmente transparente y que muestre el texto “visitada”.

.contenedor-imagen {
width: 150px;
height: 85px;
}
.contenedor-imagen a {
text-indent: -100000px;
display: block;
width: 150px;
height: 85px;
border: 2px solid #FFFFFF;
}
.contenedor-imagen a:hover {
border: 2px solid #FF0000;
}
.contenedor-imagen a:visited {
background: url(visitada.gif);
}

<div class="contenedor-imagen" style="background: url(miniatura.png)">
<a href="http://sentidoweb.com?ejemplo1">Sentido Web</a>
</div>

Ejemplo

css

CSS Clean: optimiza tus CSS

ByLuis October 25, 2007

A la hora de crear nuestras hojas de estilos, podemos crear ficheros css que no sean del todo Ã³ptimos, ocupando mÃ¡s espacio de lo debido, entre otras cosas. Por ello CSS Clean nos ayuda a optimizar nuestros css de forma rÃ¡pida y sencilla.
Basado en CSSTidy, existen varios niveles de compresiÃ³n, permitiendo desde hacer el css algo ilegible, pero menos extenso, hasta una compresiÃ³n personalizada, la cual permite quitar los Ãºltimos punto y comas, dejar los comentarios, eliminar las propiedades que no sean vÃ¡lidas para una versiÃ³n de CSS.
Una aplicaciÃ³n que nos puede ser de mucha ayuda y que facilmente puede conseguir un ratio de compresiÃ³n del 20%.
CleanCSS
VÃa / dzone

css

Konstruktors: snippets CSS

ByLuis December 7, 2007

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

AI/Usabilidad | css | Lectores RSS

Posicionamiento y estilo de las imágenes en los lectores RSS

ByLuis April 20, 2006

Este verano cuando hicimos las plantillas (web de uso interno) de Blogia 2.0, uno de los elementos que cuidamos fue el de dar estilo a las imágenes cuando el autor elige la posición de la imagen desde el editor WYSIWYG.

Desde entonces, nos preguntamos por qué los lectores RSS, sobre todo los on line, no incluyen unas líneas de CSS para respetar el posicionamiento de las fotos que incluimos en los posts. Requerería de una estandarización ya usada ampliamente por muchas css blogueras pero no en la de los lectores de feeds.

Con 3 clases sería más que suficiente:

/* --- Img's post -------------------- */
img.left, img.right, img.center {
border: 3px solid #d0dfc3;
padding: 3px
}
img.left {
float: left;
margin: 0.5em 1em 0.5em 0;
}
img.right {
float: right;
margin: 0.5em 0 0.5em 1em;
}
img.center {
margin: 0 auto 10px auto;
display: block;
text-align: center
}

Que sepamos, solo Bloglines contempla img.left pero sin preocuparse excesivamente de darle un estilo cuidado.

css | How to | Laboratorio

Laboratorio: simulación de transparencia mediante CSS

ByLuis June 7, 2006

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.

Ejemplo

Similar Posts