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

Saltos de página en CSS

ByLuis January 8, 2008

Las hojas de estilos son importantes tanto para mostrar en una pantalla comÃºn, como para mostrarlos en otros dispositivos, por ejemplo al imprimirlos.

A la hora de imprimir una pÃ¡gina web es necesario para que la lectura sea mÃ¡s cÃ³moda, pensar en los saltos de pÃ¡gina. Para lo cual existe la propiedad page-break-before, la cual nos permite saltar de pÃ¡gina antes del elemento.

Para ello deberemos aÃ±adir en nuestras hojas de estilo:

@media all  {
.page-break { display:none; }
}
@media print {
.page-break { display:block; page-break-before:always; }
}

Y en nuestra pÃ¡gina web lo siguiente:

<div class="page-break"></div>

Advanced CSS Printing â€” Using CSS Page Breaks

VÃa / Posh CSS

css | Firefox | IE | utilidades

CSSVista: editor CSS para Firefox e IE6

ByLuis June 25, 2007

CSSVista es una aplicaciÃ³n desarrollada por la gente de SiteVista que nos permite editar CSS y ver los resultados que se producen directamente en IE6 y Firefox.

Se trata de una aplicaciÃ³n gratuita, todavÃa en fase de desarrollo que nos puede ser de gran utilidad cuando maquetamos un diseÃ±o y queremos que se vea correctamente en ambos navegadores. Aunque yo prefiero usar un editor normal y refrescar el contenido en el navegador que estÃ© probando en ese momento.
CSSVista
VÃa / Lifehacker

css | Javascript

GlassBox: bordes transparentes mediante Javascript y CSS

ByLuis February 28, 2008

GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.

GlassBox

Vía / CSS Globe

css

Diseña tus CSS

ByLuis September 29, 2006

Paso a resumir un artÃculo que nos podrÃ¡ ayudar a la hora de diseÃ±ar nuestras CSS, porque como bien dicen, el poner todos los estilos en un solo fichero ya pasÃ³ a la historia.

Algo tan importante como la estructura de nuestro sitio es la organizaciÃ³n de las CSS en ficheros, claro que no hay una soluciÃ³n perfecta ya que depende de cada situaciÃ³n.

Una posible soluciÃ³n es la que estÃ¡ basada pÃ¡ginas-modelo, es decir, que existe un diseÃ±o diferente para distintos modelos de pÃ¡ginas, por ejemplo un diseÃ±o para la pÃ¡gina principal, otro para las subpÃ¡ginas, otro para el portfolio, … Este modelo es Ãºtil cuando se trata de pocos tipos de diseÃ±o, aunque nos podemos encontrar con estilos comunes entre los distintos diseÃ±os, lo que complica la soluciÃ³n. Claro, que este problemilla se puede solucionar de distintas formas:

Usar un archivo css que agrupe los estilos comunes, aunque ayuda a tener estructurados los ficheros de estilos, si se trata de un sitio grande, puede que este archivo aumente demasiado.
Duplicar estilos en CSS independientes, tiene el problema de tener cÃ³digo redundante y tener que corregir cambios en distintos sitios en vez de en un Ãºnico sitio.
Crear un fichero nuevo que puede ser usado por otros, no hay redundancia en este caso.
Crear un nuevo CSS que agrupe estos pequeÃ±os casos.

Otra soluciÃ³n es diferenciar los estilos por elementos de la pÃ¡gina, con esto se quiere decir que si nuestra pÃ¡gina se crea dinÃ¡micamente y hay un fichero para la cabecera, otro para el cuerpo, otro para la navegacion, puede haber perfectamente sus correspondientes estilos, por lo que solo se incluyen los estilos para cada parte que se use.

Parecido a lo anterior es clasificarlo por etiquetas, por ejemplo, si se usan tablas o formularios, unos estilos para estos elementos y solo incluirlas en las pÃ¡ginas que los contengan.

Otros consejos Ãºtiles es separar los estilos para print, handheld and screen y usar @import para incluir estilos en un fichero CSS principal.

A parte de la organizaciÃ³n fÃsica de los ficheros, tampoco hay que olvidar lo que ya hemos comentado en otras ocasiones que las clases e identificaciones deben tener un significado por su funcionalidad y no por lo que muestran (ej: no usar una clase que sea “rojo”, sino una que sea “error”, el que sea rojo o verde no es significaquivo). Agrupa estilos por contexto y usa comentarios para una mejor localizaciÃ³n.

Architecting CSS

VÃa / Digg

css

70 ideas para crear mejores CSS

ByLuis May 11, 2007

Un gran recopilatorio sobre consejos y tÃ©cnicas para desarrollar tus CSS. Un lugar dÃ³nde encontrar bastantes cosas de las que necesitamos cuando queremos desarrollar unos CSS en condiciones. Cambiar colores al texto o poner bordes no es suficiente, los CSS son mÃ¡s complejos.

La lista estÃ¡ dividida en diferentes apartados:

CÃ³mo empezar.
Organizar el cÃ³digo.
Tratar con id, class, selectores y propiedades.
Abrevia el cÃ³digo.
TipografÃa.
Depurar el cÃ³digo.
Estilos en enlaces.
TÃ©cnicas CSS.
IE.
Obtener inspiraciÃ³n.

Entre todos los consejos, algunos me gustarÃa destacar, puede que sean conocidos de sobra, pero nunca viene mal volver a recordarlos.

Para empezar, usa una pÃ¡gina en blanco, dibuja dÃ³nde quieres cada bloque (cabecera, contenido, paneles laterales, pie de pÃ¡gina), sitÃºa las capas y empieza a crear los estilos.
Organiza tus CSS en bloques y aÃ±ade comentarios para indentificarlos, cuando quieras aÃ±adir, modificar o borrar, siempre serÃ¡ mÃ¡s cÃ³modo y rÃ¡pido si lo haces asÃ.
Escribe los contenedores al mÃnimo, piensa bien en la estructura y no lo llenes todo de capas.
Evita los selectores y el hacking, aunque sobre el hacking yo dirÃa que ni lo uses.
Escribe en los comentarios al inicio los cÃ³digos de colores que utilices para facilitarte el trabajo.
Escribe el nombre de los ids y los class de acuerdo con la semÃ¡ntica.
Acorta la notaciÃ³n hexadecimal: #334455 es #345. Yo en esto fallo, me cuesta hacerlo asÃ, malas costumbres.
Usa mayÃºsculas o minÃºsculas mediante estilos.

70 Expert Ideas For Better CSS Coding

VÃa / Techmeme

Accesibilidad | css

5 efectos CSS accesibles

ByLuis May 8, 2007

El tema de la accesibilidad es algo que a veces se deja de lado cuando se quiere conseguir un diseÃ±o mÃ¡s dinÃ¡mico. Pero si se busca bien, se podrÃ¡ encontrar ejemplos de diseÃ±os CSS que sean accesibles.

Estos son 5 muy buenos ejemplos de ello:

Enlaces externos: modificas el texto “(enlace externo)” incluyÃ©ndolo en un span y despuÃ©s lo que haces es modificar el estilo para que muestre un icono (diferente dependiendo de si es linked, visited o hover) y el texto lo haces desaparecer de la parte visible de la pantalla.
Sigue leyendo: el texto “Sigue leyendo sobre …” se modifica, haciendo que solo aparezca “Sigue leyendo” y el resto del texto aparece como un popup mediante posiciÃ³n absoluta y jugando con el hover.
Texto variable: al igual que ya contamos en Sentido Web, usando distintas hojas de estilo y accediendo a ellas mediante Javascript.
PestaÃ±as con imÃ¡genes: se crea un menÃº de pestaÃ±as con listas no ordenadas y se cambia el estilo para que no tengan formato de bloque, los enlaces estÃ¡n formados por imÃ¡genes y estas cambian segÃºn el hover.
Formularios: dos buenos ejemplos de formularios, uno de ellos muy bien tabulado y otro en tres columnas.

5 Accessible and pretty CSS tips

VÃa / dzone

Similar Posts