css

YAML: framework CSS

ByLuis August 31, 2007

YAML (Yet Another Multicolumn Layout) es un framework XHTML/CSS que nos permite crear plantillas para diseÃ±os web proporcionandonos diferentes tipos de layouts. EstÃ¡ basado en estÃ¡ndares, es sencillo de usar y comprobado en sitios web profesionales.

A parte, nos ofrece una herramienta online para crear nuestros propios diseÃ±os de forma rÃ¡pida y sencilla. Tan solo deberemos indicar el tipo de diseÃ±o, los tamaÃ±os, podremos aÃ±adirle elementos HTML y por Ãºltimo recuperar el cÃ³digo fuente.
YAML
VÃa / Ajaxian

css | XHTML

30 scripts para galerías, presentaciones y lightboxes

ByLuis May 21, 2007

Una gran colecciÃ³n de scripts que nos ayudarÃ¡n a incluir nuestras galerÃas de fotos, presentaciones y lightboxes. 30 scripts en total, organizadas por:

GalerÃas y lightboxes en Ajax.
GalerÃas de imÃ¡genes basadas en Ajax.
GalerÃas CSS+Javascript.

De las 30 me gustarÃa destacar unas cuantas que son las que mÃ¡s me han gustado:

JonDesignâ€™s SmoothGallery : usando mootools v1.0 para su desarrollo, se trata de un script de tan solo 16k, que aÃ±ade fade, transparencias, thumbnails, vistas preliminares y todo ello con un diseÃ±o muy sencillo y llamativo.
Couloir.org: otra galerÃa de imÃ¡genes en forma de presentaciÃ³n, con fade, redimensionamiento de la ventana y sonido.
Lightbox2: uno de los mejores y de los mÃ¡s conocidos, transparencias, fade y posibilidad de navegar entre las diferentes imÃ¡genes.
TripTracker: muy parecido a los anteriores, en este caso permite tambiÃ©n acceder a la primera y Ãºltima y enviar por email la ruta de la imagen en cuestiÃ³n.
Cross Browser Multi-Page Photograph Gallery: Increible galerÃa basada totalmente en CSS de la que ya hemos hecho referencia anteriormente, pero que siempre merece una menciÃ³n.

30 Scripts For Galleries, Slideshows and Lightboxes

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 | Trucos

Cinco consejos sobre CSS

ByLuis May 31, 2006

Cada cual tiene su forma de desarrollar y todo aquel que considera que su experiencia puede ser de utilidad, da consejos sobre cÃ³mo poder hacer las cosas. Nunca viene mal aprender de otros, por eso os muestro 5 consejos que nos ofrece Mike Rundle.

Organiza tus estilos segÃºn el siguiente formato: primero reune las que correspondan a los contenedores y layouts, despuÃ©s las cabeceras (<h1>..<h6>), seguido irÃa los pÃ¡rrafos y los enlaces, y por Ãºltimo todas las listas (navegaciÃ³n, …).
No uses estilos por defecto, en vez de crear un estilo para todos los enlaces (<a>), defÃnelo contenido por bloques (por ejemplo: #contenido a {..}).
Utiliza etiquetas HTML para incluir estilos dentro de otros estilos, por ejemplo, si queremos que una lÃnea tenga distintos colores, en vez de usar capas y clases, define estilos para etiquetas tipo <em> para que quede un cÃ³digo mÃ¡s limpio.
En vez de usar capas con un estilo definido, usa etiquetas HTML que representen la misma funciÃ³n que quieres mostrar, por ejemplo, en vez de usar una capa para el tÃtulo, usa una etiqueta de cabeceras (<h1>..<h6>). No reinventes la rueda.
Nombra los estilos segÃºn su funcionalidad, no como aparecen, en vez de crearte un estilo llamado rojo, create uno que se llame error, cuando es precisamente un error lo que quieres mostrar.

My 5 CSS Tips
VÃa / SkimCSS

css

Gráficas mediante CSS

ByLuis April 10, 2007

Una buena colecciÃ³n de herramientas para generar grÃ¡ficas (de barras, progreso, de tarta, …):

Ajax MGraph: desarrollado en XHTML u CSS, es una grÃ¡fica interactiva que funciona en Firefox, IE y Opera. Incluye integraciÃ³n PHP y de la base de datos.
PlotKit: grÃ¡fica de tarta y de puntos, soporta Canvas y SVG y soporte de navegador.
CSS Javascript Bar Charts: grÃ¡fica de barras sencillo.
Vertical Bar Graphs with CSS and PHP: grÃ¡fica de barras con CSS y PHP.
CSS For Bar Graphs: grÃ¡fica de barras usando los tanto por ciento que ofrece CSS.
CSS Vertical Bar Graphs: grÃ¡fica de barras de forma sencilla.
Displaying Percentages with CSS: barra de progreso mediante CSS.
Dynamic Pie Chart with CSS: grÃ¡fica de tarta dinÃ¡mica.

10 Free CSS Graph Resources

VÃa / Intenta

css

Permitir que IE aplique estilos a las etiquetas HTML5

ByLuis August 18, 2010August 18, 2010

El que los navegadores antiguos o IE no acepten etiquetas HTML5 no suele ser un problema a la hora de mostrarlas, el problema viene a la hora de aplicar estilos e IE que no le aplica los estilos, ya que IE ignora las etiquetas.

header { /* sus estilos */ }
section { /* sus estilos */ }
footer  { /* sus estilos */ }

Para ponerle solución, se puede crear un elemento dinamicamente antes de aplicar los estilos, y por arte de magia (o desesperación) tendrá los estilos al elemento.

html5shiv

css

Dando estilo a los formularios con CSS

ByLuis January 10, 2007

Roger Johansson revisa su clÃ¡sico “styling from controls“, artÃculo en el que mostraba cÃ³mo se ven los estilos CSS aplicados sobre los controles de formularios en diversos navegadores y sistemas operativos.

Demostraba ademÃ¡s que intentar que los elementos de formulario se vean igual en todos los navegadores es una tarea imposible.

Roger acaba de publicar una revisiÃ³n incorporando nuevos navegadores y sistemas operativos y agregando nuevos controles. En total revisa los siguientes controles en 14 combinaciones navegador – sistema operativo:

Una actualizaciÃ³n necesaria, un recurso indispensable.

Similar Posts