Cuanto más trabajo con CSS más pienso en lo fácil que parecía al principio. Y es que aunque hacer hojas de estilo para tus diseños no te parezca tan árido como aprender a programar en Java, hacerlas bien sí que puede traerte algunos quebraderos de cabeza. Aunque haciendo una chapuza a ti te parezca que queda como querías, luego te encontrarás con que en distintos navegadores tu web se ve diferente, con que un día te da por cambiar un píxel de espaciado y se va toda la estructura al carajo, etc…
Por ello lo mejor es empaparse un poquito antes de empezar y aquí os dejo esta lista de artículos para principiantes de Line 25 que descubrí hace tiempo y que me han servido de mucho. No son para principiantes totales, algo tendrás que saber, pero seguro que alguno de ellos tarde o temprano te saca de un apuro.
1. Resetting your styles with CSS Reset
Te parecerá extraño pero aunque empieces tu hoja de estilo desde cero, es posible ue para los navegadores tu diseño no parta de cero. Por ello lo primero es poner a todos los navegadores de acuerdo y que no se tomen licencias que tú no quieres a la hora de considerar algunos espacios o dismensiones. Esto se hace a través de la técnica del CSS Reset sobre la que por cierto hay muchas variaciones como se puede observar en Perishable Press o en Inspiringpixel
2. Learn CSS Positioning in ten steps
Un tema que puede volver loco a cualquier los primeros días: las diferentes formas de posicionar un elemento a través de la hoja de estilos. Este me parece el mejor tutorial que he visto hasta la fecha y aún así no acabo de tenerlo del todo claro.
3. Internet Explorer and the CSS box model
Si ves que aparecen CSS e Internet Explorer en la misma frase vete haciendo café. Como decía en el primer tutorial, la forma en que interpretan las medidas los distintos navegadores te hará llevarte las manos a la cabeza más de una vez, pero la forma en la que las interpreta Internet Explorer merece darle de comer aparte. Estupendo artículo para enfrentarse a este problema.
4. Specifics on CSS Specificity
No me gusta el color de este enlace así que voy a cambiarlo en la hoja de estilos [...] ¿Pero qué? [...] ¿Por qué demonios sigue saliendo en rojo si lo acabo de cambiar? Pues probablemente porque en algún otro lugar le hayas dicho al navegador que ese enlace va en rojo y o cambias las prioridades o te puedes armar un buen jaleo. De eso va este tutorial: de qué propiedades de tu hoja de estilos valen más que otras o cómo interfieren entre sí.
5. Faux Columns
Cualquier tutorial que venga de A List Apart es de calidad. En esta ocasión comentan algunos trucos para conseguir que una columna se extienda verticalemente más allá de su contenido. Muy útil cuando tenemos un diseño tipo blog con una columa de dimensión variable que cambia según el tamaño de los post y otra que es siempre igual (la barra lateral) pero que queremos que “acompañe” a la principal.
6. Sexy Ordered Lists with CSS
Algo tan sencillo como darle estilo a una lista ordenada numéricamente pero separando el estilo de los números de los elementos de la lista. Se puede ver un ejemplo del resultado.
7. Divitis. What is and How to Avoid it.
Si vienes de diseñar con tablas seguro que el maravilloso mundo del
te atrapa y te pones a “enmarcar” todos los trocitos de tu web con divisiones. Esto es la divitis y la mayoría de las veces no es necesario. A mí me ha pasado muchas veces que por no saber darle estilo a una lista o a una imagen, la metía dentro de un Por ello lo mejor es empaparse un poquito antes de empezar y aquí os dejo esta lista de artículos para principiantes de Line 25 que descubrí hace tiempo y que me han servido de mucho. No son para principiantes totales, algo tendrás que saber, pero seguro que alguno de ellos tarde o temprano te saca de un apuro.
1. Resetting your styles with CSS Reset
Te parecerá extraño pero aunque empieces tu hoja de estilo desde cero, es posible ue para los navegadores tu diseño no parta de cero. Por ello lo primero es poner a todos los navegadores de acuerdo y que no se tomen licencias que tú no quieres a la hora de considerar algunos espacios o dismensiones. Esto se hace a través de la técnica del CSS Reset sobre la que por cierto hay muchas variaciones como se puede observar en Perishable Press o en Inspiringpixel
2. Learn CSS Positioning in ten steps
Un tema que puede volver loco a cualquier los primeros días: las diferentes formas de posicionar un elemento a través de la hoja de estilos. Este me parece el mejor tutorial que he visto hasta la fecha y aún así no acabo de tenerlo del todo claro.
3. Internet Explorer and the CSS box model
Si ves que aparecen CSS e Internet Explorer en la misma frase vete haciendo café. Como decía en el primer tutorial, la forma en que interpretan las medidas los distintos navegadores te hará llevarte las manos a la cabeza más de una vez, pero la forma en la que las interpreta Internet Explorer merece darle de comer aparte. Estupendo artículo para enfrentarse a este problema.
4. Specifics on CSS Specificity
No me gusta el color de este enlace así que voy a cambiarlo en la hoja de estilos [...] ¿Pero qué? [...] ¿Por qué demonios sigue saliendo en rojo si lo acabo de cambiar? Pues probablemente porque en algún otro lugar le hayas dicho al navegador que ese enlace va en rojo y o cambias las prioridades o te puedes armar un buen jaleo. De eso va este tutorial: de qué propiedades de tu hoja de estilos valen más que otras o cómo interfieren entre sí.
5. Faux Columns
Cualquier tutorial que venga de A List Apart es de calidad. En esta ocasión comentan algunos trucos para conseguir que una columna se extienda verticalemente más allá de su contenido. Muy útil cuando tenemos un diseño tipo blog con una columa de dimensión variable que cambia según el tamaño de los post y otra que es siempre igual (la barra lateral) pero que queremos que “acompañe” a la principal.
6. Sexy Ordered Lists with CSS
Algo tan sencillo como darle estilo a una lista ordenada numéricamente pero separando el estilo de los números de los elementos de la lista. Se puede ver un ejemplo del resultado.
7. Divitis. What is and How to Avoid it.
Si vienes de diseñar con tablas seguro que el maravilloso mundo del
y le daba formato a este. Pues como te imaginarás hay formas mucho mejores de hacerlo.
8. Using background-image to replace text
Una clásico. Si aparte del CSS te interesa un poco el mundo del SEO sabrás que aunque pongas un maravilloso logo hecho en Photoshop de tu negocio en la web, convendría que ese logo estuviera acompañádo de un
con el nombre de la empresa en el código HTML. ¿Cómo hacemos para que no se muestre el texto del pero sí el logo? Hay diversas técnicas con pros y contras discutidas en el tutorial.
9. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
A mí ya me costó en su día lo de usar una única imagen y que al pasar el ratón por encima cambie pero es que de un tiempo a esta parte lo que optimiza la carga de tu sitio web es meter la mayor cantidad posible de iconos en una única imagen y jugar con la posición de esta. Muchos sitios como Google que necesitan un tiempo de carga muy rápido usan ya esta técnica. Al final del tutorial tienes más ejemplos con Facebook o Google Reader.
10. How to create CSS Menu using Image Sprites
Enlace a la caché de Google porque el original no tira bien. En la línea del anterior, cómo crear un menú clásico de navegación de un sitio web con efectos y una única imagen.
11. 10 Examples of Beautiful CSS Typography and how they did it…
De primeras cuando uno se pone a jugar con la tipograf’ia en una hoja de estilos piensa que no tiene muchas posibilidades pero la verdad es que con un poco de imaginación y creatividad se pueden hacer vriguerías desde la hoja de estilos. Aquí tienes unos cuantos ejemplos.
12. CSS Shorthand Guide
Una guía de ¿bolsillo? con técnicas para reducir el tamaño de tu hoja de estilos agrupando diversas propiedades en un única línea. A veces no hace falta que el color, la posición, el tamaño y más cosas vaya cada una por su cuenta. Podemos agruparlas todas y así seguir mejorando la velocidad de carga de nuestro sitio web.
13. Push Your Web Design Into The Future With CSS3
Y con todo lo que te ha llevado a ti aprender CSS2 y ahora resulta que tienes que cambiarlo a CSS3 . No te preocupes, la evolución suele traer muchas más ventajas que inconvenientes así que si quieres aprender cómo poner sombras, transparencias o usar tipografías personalizadas todo a través de CSS aquí aprenderás cómo.
14. How to use headings in HTML
Muy muy sencillo y muy recomendado también con los interesados en el SEO ya que un uso correcto de los encabezamientos en el código HTML es muy buena práctica de cara a Google y otros buscadores.
15. 10 HTML tag crimes You Really Shouldn’t Commit
Apuesto lo que sea a que si llevas menos de un mes con CSS hasta comentido al menos 8 de estos 10 errores. Muchos provienen de que en HTML+CSS al mismo objetivo se puede llegar por distinos caminos pero es no significa que sean todos igual de buenos. Una artículo estupendo
http://www.blogoff.es/2010/02/01/15-articulos-de-css-para-principiantes/
9. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
A mí ya me costó en su día lo de usar una única imagen y que al pasar el ratón por encima cambie pero es que de un tiempo a esta parte lo que optimiza la carga de tu sitio web es meter la mayor cantidad posible de iconos en una única imagen y jugar con la posición de esta. Muchos sitios como Google que necesitan un tiempo de carga muy rápido usan ya esta técnica. Al final del tutorial tienes más ejemplos con Facebook o Google Reader.
10. How to create CSS Menu using Image Sprites
Enlace a la caché de Google porque el original no tira bien. En la línea del anterior, cómo crear un menú clásico de navegación de un sitio web con efectos y una única imagen.
11. 10 Examples of Beautiful CSS Typography and how they did it…
De primeras cuando uno se pone a jugar con la tipograf’ia en una hoja de estilos piensa que no tiene muchas posibilidades pero la verdad es que con un poco de imaginación y creatividad se pueden hacer vriguerías desde la hoja de estilos. Aquí tienes unos cuantos ejemplos.
12. CSS Shorthand Guide
Una guía de ¿bolsillo? con técnicas para reducir el tamaño de tu hoja de estilos agrupando diversas propiedades en un única línea. A veces no hace falta que el color, la posición, el tamaño y más cosas vaya cada una por su cuenta. Podemos agruparlas todas y así seguir mejorando la velocidad de carga de nuestro sitio web.
13. Push Your Web Design Into The Future With CSS3
Y con todo lo que te ha llevado a ti aprender CSS2 y ahora resulta que tienes que cambiarlo a CSS3 . No te preocupes, la evolución suele traer muchas más ventajas que inconvenientes así que si quieres aprender cómo poner sombras, transparencias o usar tipografías personalizadas todo a través de CSS aquí aprenderás cómo.
14. How to use headings in HTML
Muy muy sencillo y muy recomendado también con los interesados en el SEO ya que un uso correcto de los encabezamientos en el código HTML es muy buena práctica de cara a Google y otros buscadores.
15. 10 HTML tag crimes You Really Shouldn’t Commit
Apuesto lo que sea a que si llevas menos de un mes con CSS hasta comentido al menos 8 de estos 10 errores. Muchos provienen de que en HTML+CSS al mismo objetivo se puede llegar por distinos caminos pero es no significa que sean todos igual de buenos. Una artículo estupendo
http://www.blogoff.es/2010/02/01/15-articulos-de-css-para-principiantes/
No hay comentarios:
Publicar un comentario