10 consejos para elaborar mejor tus CSS

 13/11/2009

Web Design Ledger nos recomienda seguir 10 pasos prácticos a la hora de realizar nuestras hojas de estilo. Siguiendo estos consejos, nuestra capa de diseño presentará mejor aspecto y nos resultará más fácil localizar elementos:

  1. Empieza siempre reseteando todos los valores (reset.css).
  2. Realiza sangrados en el código, separando las clases y los identificadores de sus respectivos valores.
  3. Los comentarios son tu mejor amigo.
  4. Una regla = una línea / Varias reglas = varias líneas.
  5. Escribe código consistente: si empiezas desarrollando el código de una forma, no la cambies a mitad del documento.
  6. Separa tus “hacks” y elementos condicionales.
  7. Aprende a utilizar los “shorthands” o abreviaturas.
  8. Crea una tabla de contenidos antes de iniciar el documento CSS (como forma de pequeño índice).
  9. Utiliza nombres sencillos, tanto para las clases como para los identificadores, siempre serán más fáciles de encontrar.
  10. Ordena tu código alfabéticamente.

Si estos consejos te han sido de ayuda, es hora de que leas atentamente los principios o reglas recomendadas por los mejores maestros del diseño web, puede que te resulten interesantes.

»Enlace: 10 Tips for Writing Better CSS


Resaltar el foco de un formulario con CSS

 05/10/2009

La usabilidad en los formularios de contacto web es una de las cosas que muchas veces no tenemos en cuenta y, sin embargo, es más importante de lo que creemos. Una de las directrices que debemos contemplar será la focalización de elementos, es decir, señalar de alguna forma el campo que el usuario está rellenando en ese momento.

Podemos conseguir esto de una forma muy sencilla, simplemente deberemos utilizar la pseudo-clase :focus del elemento input. Sólo son necesarias un par de líneas para aplicar este efecto y dotar a nuestro diseño de la funcionalidad deseada.

input:focus {
   border:1px solid #666;
   background:#FFFFCC;
}

bitelemental-foco-input-formulario

Nota: Se ha comprobado el funcionamiento en Firefox, Chrome y Opera. Por desgracia, Internet Explorer (7 e inferiores) no soportan esta característica.

» Ejemplo resaltar el foco de un formulario con CSS


Manual CSS detallado por… borrachos!

 11/06/2009

Brillante trabajo que ha realizado Darío Ferrer, en el que explica algunas de las características de las hojas de estilo utilizando ilustraciones de gente ebria.

Merece la pena pasarse por su rincón y estudiar todas las propiedades. Nada mejor que empezar el día con una sonrisa de oreja a oreja al mismo tiempo que aprendemos CSS de forma diferente.

css-position-absolute-bottom-0-bitelemental

Enlace: Borrachos y CSS


La importancia de resetear los valores de las CSS

 12/05/2009

Cuando un diseñador realiza un proyecto web lo habitual y recomendable es probar los resultados en los diferentes navegadores existentes. Pero siempre nos encontramos la sorpresa de que en algunos existen descuadres y no conseguimos el deseado cross-browser (soporte para todos los navegadores).

Esto ocurre porque cuando los navegadores muestran una página web, además de aplicar las hojas de estilo de los diseñadores, siempre se aplican dos hojas de estilo más:

  1. Hoja de estilos del navegador: siempre se aplica a todas las páginas web si el diseñador no incluye ninguna. Se utiliza para marcar el estilo inicial por defecto de todos los elementos HTML (tamaños de letra, márgenes…)
  2. Hoja de estilos del usuario: relativa a la que aplica el usuario mediante las opciones del navegador (no es muy utilizada, pero existe la posibilidad de cambiar el estilo en el que queramos ver las páginas web utilizando las preferencias del navegador).

Como el orden de preferencia de las hojas de estilo del navegador y del usuario prevalecen sobre la del diseñador, nos encontraremos con los descuadres anteriormente mencionados y nos llevará muchos quebraderos de cabeza el acoplar el estilo de una página a todos los navegadores (mediante tips o trucos).

reset-css-bitelemental

Para solucionar este problema, el diseñador Eric Meyer desarrolló un sistema de borrado o “reseteo” de los estilos que aplican por defecto los navegadores. El propio Eric recuerda que esta hoja de estilo es el punto de partida en el que cada diseñador debe readaptar su código hasta obtener los resultados esperados.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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: "" "";
}

Por último y como punto clave, se recomienda separar las hojas de estilo de reset y la principal de la siguiente forma:

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="principal.css" type="text/css" />

El poder de las CSS

 21/01/2009

A modo de recordatorio y para que se observe todo lo que es posible conseguir con sólo CSS. Román Cortés nos impresionó en Abril del 2008 realizando un Homer Simpson utilizando únicamente CSS. Digno de admirar.

Enlace: Homer CSS


Recursos para el Webmaster (II): menús horizontales

 14/01/2009

Siguiendo con el mundo del diseño web y las hojas de estilo, os dejo con un enlace a CSSTea, página en la que podremos encontrar 120 ejemplos de menús horizontales realizados con CSS.

Un recurso a tener en cuenta si nuestro objetivo es empezar un proyecto web o modificar el estilo de otro.

Enlace | 120 Excellent Examples of CSS Horizantal Menu

Vía | Xyberneticos


10 principios fundamentales de los maestros del CSS

 

En Nettuts nos muestran una lista (en inglés) de 10 reglas o principios a seguir, elaboradas por los mejores profesionales en el mundo del diseño web. He realizado una traducción libre para que podáis seguir el documento y lo aprovechéis al máximo.

  • Elabora CSS simple, Peter-Paul Koch.  La recomendación extrema de Koch es que el todo código CSS tiene que ser lo más simple posible, aunque la simplicidad no es una tarea fácil de conseguir. Existen muchos “tips” o trucos en CSS con los que es posible obtener resultados espectaculares, sin embargo, la utilización de dichos trucos se ve mermada con las constantes actualizaciones de los navegadores. Utiliza código CSS simple que todo navegador (incluídas sus actualizaciones) pueda soportar.
  • Las declaraciones CSS deben realizarse en una sola línea, Jonathan Snook. Veámoslo con un ejemplo:

    Declaración 1:

    h2 {font-size:18px; border:1px solid blue; color:#000;}

    Declaración 2:

    h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

    Aunque el segundo puede parecer más bonito, en efectos de búsqueda de información, es menos eficiente. Tener todas las declaraciones en una sola línea facilita la búsqueda de elementos CSS en un documento.

  • Utiliza las abreviaturas de CSS, Roger Johansson. Las abreviaturas son un aspecto a tener en cuenta a la hora de organizar nuestro código CSS. Por ejemplo, para especificar los diferentes márgenes de todas las partes de una caja o bloque se podría utilizar esto: 

    margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em

    Sin embargo, el siguiente ejemplo sería más eficiente:

    margin:1em 0 2em 0.5em

    Las abreviaturas no sólo reducen considerablemente el volumen de las hojas de estilo, sino que también ayudan a mantener el código organizado y simple.

  • Utiliza elementos de bloque para llenar el espacio orgánicamente, Jonathan Snook. Esta regla se basa fundamentalmente en la creación de elementos de bloque como primera instancia y luego definir los parámetros asociados a dicho bloque, como puede ser el margen y el relleno. Trabajar con el modelo de caja puede llevarte muchos dolores de cabeza, especialmente si se está tratando con porcentajes, pero a la larga resulta más eficiente.
  • Establece la propiedad “float” para eliminar otro “float”, Trevor Davis. Saber cómo reflotar elementos es una tarea muy importante para utilizar código CSS, pero saber cómo limpiar dicho flotamiento no deja de ser menos importante. Aquí tienes un ejemplo de este principio realizado directamente por Trevor.
  • Utiliza márgenes negativos, Dan Cederholm. El uso de márgenes negativos en los elementos es, a veces, más fácil que tener que cambiar todos los demás aspectos del diseño para que se alineen todos los elementos. Mira el ejemplo que se expone en su página.
  • Utiliza código CSS para centrar las capas (layouts), Dan Cederholm. El método utilizado por Dan para conseguir este efecto se centra en la siguiente declaración: 

    #contenedor  { margin: 0 auto; width: xxxpx; text-align: left; }

  • Realiza código XHTML y CSS válido, Jeffrey Zeldman. Rígete a los estándares para que tu código sea válido y no tenga problemas con los navegadores.
  • Centra elementos utilizando CSS, Wolfgang Bartelme. Puedes echar un vistazo al tutorial realizado por Wolfgang, en el que se explica detalladamente cómo centrar elementos de forma correcta.
  • Utiliza la propiedad “text-transform”, Trenton Moss. Lo mejor que un diseñador web puede hacer es planificar el futuro para asegurarse de que, en lugar de tener que cambiar manualmente el modo de texto que se muestra, utilizar el CSS para cambiar la apariencia del texto. Para ello es aconsejable la utilización de la propiedad text-transform.


Introducción a CSS3

 17/06/2008

Como la mayoría de usuarios ya saben, o por si algunos de ellos lo desconocen, CSS (Cascading Style Sheets, hojas de estilo en cascada) es el lenguaje utilizado para definir la apariencia de una página web, bien desarrollada en HTML o XML. La filosofía de las CSS es básica y fundamental: la separación entre estructura (contenido) y presentación (forma) de un documento web.

A lo largo de los años han ido apareciendo diferentes niveles de CSS, según la incorporación de elementos a este lenguaje. Evidentemente, CSS nació bajo la etiqueta de “nivel 1″ en el año 1995, siendo el primero en su estirpe. En 1998 el grupo de trabajo de CSS publica su siguiente recomendación oficial, conocida como “nivel 2″.

Las CSS de nivel 3 (en fase de desarrollo desde 1998) avanzan un poco en la historia de las CSS, basando su funcionalidad en el control de los elementos de la página web. Dicho control no está estabilizado del todo en el nivel 2, puesto que para conseguir algunos efectos el desarrollador tiene que echar mano de trucos o tips para obtener los resultados deseados.

Así pues, os dejo un listado de las propiedades más destacadas en CSS3:

Bordes

  • border-color
  • border-image
  • border-radius
  • box-shadow

Fondos

  • background-origin
  • background-clip
  • background-size
  • hacer capas con múltiples imágenes de fondo

Color

  • colores HSL
  • colores HSLA
  • colores RGBA
  • opacidad

Texto

  • text-shadow
  • text-overflow
  • ruptura de palabras largas

Interfaz

  • box-sizing
  • resize
  • outline
  • nav-top, nav-right, nav-bottom, nav-left

Selectores

  • selectores por atributos

Modelo de caja básico

  • overflow-x, overflow-y

Otros

  • media queries
  • creación de múltiples columnas de texto
  • propiedades orientadas a discurso o lectura automática de páginas web
  • web Fonts

Fuente: desarrolloweb


Este blog funciona gracias a WordPress con el theme GimpStyle
© bitelemental. Todos los derechos reservados.