Taller de CSS

Aplicaciones prácticas realizadas con hojas de estilo en cascada. Desde aplicación de estilo enlaces a maquetación realizada únicamente con CSS.

Si te parece útil este manual ayúdanos compartiendo!! :)

Listado de los capítulos

1.- Aplicación de estilo avanzada a los enlaces

Vemos cómo asignar estilos a enlaces de la página de una manera potente, para hacer interesantes barras de navegación.

2.- Cómo evitar que una página se imprima

Veamos un pequeño truco con hojas de estilos para evitar que se pueda imprimir una página web con el botón de imprimir de nuestro navegador.

3.- Títulos para tablas decorados con CSS

Creación y aplicación de estilos con CSS para realizar tablas con una decoración vistosa pero fácil de aplicar.

4.- Bordes punteados con CSS

Para dar efectos distintos a elementos estructurados, como las tablas, podemos recurrir a las clases, parte integrante de las hojas de estilo (CSS).

5.- Estilos en campos de texto

Es posible aportar estilos y formatos a campos de texto de los formularios. En este capítulo veremos como hacerlo.

6.- Maquetar una página con CSS

Tutorial para maquetar una página web utilizando CSS en lugar de tablas.

7.- Taller de CSS, Opacity

Explicamos como hacer efectos de transparencia, cambiando la opacidad de elementos como capas, formularios e imágenes entre otros.

8.- Enlaces con estilos CSS que simulan botones

Hacer un botón con CSS sin utilizar formularios, simplemente con enlaces que se comportan visualmente como botones.

9.- Crear un menú dinámico con CSS

Código que nos ayuda a crear un menú con Css similar a los de Javascript.

10.- Utilizar CSS para maquetar un boletín

Las ventajas de la maquetación CSS, con respecto a la maquetación tradicional por tablas, se pueden aplicar también a envíos de boletines en formato HTML.

11.- Recuadro sencillo y elegante con CSS

Cómo hacer un recuadro atractivo pero muy fácil de hacer, utilizando CSS para aplicarle los estilos.

12.- Decorar un campo select de formulario con CSS

Ejemplo de un código para decorar un campo select de un formulario, utilizando hojas de estilos en cascada.

13.- Esconder con CSS el email a los spambots

Existen robots que rastrean páginas en busca de emails para hacerles spam. Vemos algunas técnicas para evitar que cacen nuestra dirección publicada en la web.

14.- Efecto de sombra con CSS

Veremos varios métodos para realizar un efecto de sombreado utilizando hojas de estilo en cascada.

15.- Texto en vertical usando CSS

Nuevo atributo CSS para poner un texto que se pueda leer en vertical en nuestro documento HTML.

16.- Maquetación CSS a dos columnas

Mostramos cómo hacer una página web maquetada utilizando únicamente CSS, sin tablas, con una distribución de 2 columnas, una cabecera y un pie de página. Con diseño de anchura fija o fluido.

17.- Cambiar el cursor con css del ratón

Cómo cambiar el cursor con css al pasar el ratón sobre elementos de la página. Pseudoclase CSS cursor.

18.- Caja CSS para meter contenido

Realizar con imágenes y hojas de estilo un diseño para una caja donde meter contenidos.

19.- Caja CSS con las esquinas redondeadas

Nuevo ejemplo de maquetación de cajas con esquinas redondeadas, realizado con CSS.

20.- Caja CSS con una línea de borde redondeado

Otro ejemplo de caja realizada con CSS en el que tenemos una línea de 2 pixels de ancho que rodea el contenido. La línea tiene esquinas redondeadas.

21.- Estilizando formularios

Este es un artículo que te servirá de guía para crear formularios totalmente accesibles usando XHTML y hojas de estilo en cascada (css) para darle formato.

22.- Maquetar una galería de fotos con CSS

Creamos una galería de fotos maquetada con CSS, de una manera sencilla pero vistosa.

23.- Maquetar una galería de fotos con CSS usando listas

Otro ejemplo de una maquetación CSS de una galería de fotos, esta vez utilizando listas.

24.- Realizar un rollover sólo con CSS y utilizando imágenes

Los efectos de rollover (cambio al pasar el ratón por encima) especificados mediante CSS, también se pueden hacer con imágenes.

25.- Esquinas redondeadas con CSS y Javascript, sin imágenes

Comentamos un script que sirve para hacer cajas con las esquinas redondeadas, pero sin necesidad de usar imágenes, sólo con CSS y un poco de Javascript.

26.- CSS para campos textarea de formulario

Veamos como aplicar estilos variados a campos de formulario de texto de varias líneas (textarea) con CSS.

27.- Creación de gráficas de barras con CSS para la maquetación

En este artículo vamos a crear unas gráficas de barras maquetadas enteramente con CSS. Utilizamos capas y posicionamiento CSS para crear la gráfica.

28.- Grafica de barras con CSS, parte 2

Hacemos una gráfica de barras CSS más elaborada, con capas y maquetación posicionamiento CSS.

29.- CSS para imprimir páginas web

Cómo hacer una hoja de estilo CSS distinta para la visualización de la página en el navegador y otra para la impresión en una impresora.

30.- Generar Columnas con CSS de una lista sin tablas

Gracias a este truco de CSS podrás generar columnas con CSS utilizando una lista y sin tablas.

31.- Marcos para fotos con CSS

Vemos 4 ejemplos de marcos vistosos para fotos que se pueden crear con CSS sin utilizar imágenes.

32.- Crear una barra de navegación lateral con listas y CSS

Creación de tres ejemplos de barras de navegación diferentes, con estilos CSS distintos y un mismo código HTML.

33.- Efecto zoom de imagen utilizando solo Css

Magnífico efecto zoom para fotografías que unicamente utiliza una hoja de estilos Css,es muy sencillo de utilizar y crea un efecto realmente vistoso.

34.- Hacks CSS

Comentamos lo que son los Hacks CSS y damos un ejemplo de Hack CSS sencillo de aplicar y muy práctico.

35.- Maquetación de un recuadro con pestañas con CSS

Un taller de maquetación CSS en el que creamos un recuadro que tiene diversas pestañas para mostrar contenidos diversos en un mismo espacio.

36.- Crear una barra de navegación horizontal con listas y CSS

Cómo crear utilizando CSS y listas de HTML una barra de navegación horizontal dinámica.

37.- Esquinas redondeadas con CSS

Otra manera de hacer un efecto de esquinas redondeadas con CSS e imágenes en elementos con anchura variable. Que funciona bien con Firefox u Opera, pero no con Internet Explorer.

38.- Alineación vertical con CSS

CSS 2 no soporta alineación vertical, así que para alinear verticalmente un contenido de una capa tenemos que utilizar técnicas o trucos alternativos.

39.- Propiedades de impresión CSS page-break-after y page-break-before

page-break-after y page-break-before son propiedades de estilos CSS que se aplican a la hora de imprimir páginas web en la impresora, para forzar saltos de página después o antes de ciertos elementos.

40.- Columnas de altura 100% con CSS

Cómo maquetar una página con CSS y conseguir que la altura de las columnas ocupe todo el espacio disponible de la página.

41.- Opacidad CSS

La opacidad en CSS sirve para definir lo opaco o transparente de un elemento en una página web. Taller de transparencia CSS.

42.- Estilos de borde CSS

Explicación de los distintos tipos o estilos de bordes que podemos crear en CSS, a través del atributo border.

43.- Atributo gradiente de colores en borde con CSS y Firefox

Posibilidad de definir el un gradiente de color en el borde de los elementos con CSS, en un atributo no estándar de Firefox.

44.- Múltiples imágenes de fondo con CSS

Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3.

45.- Hack CSS para Internet Explorer: guión bajo

Un hack en CSS que sirve para indicar estilos CSS específicos para Internet Explorer, utilizando un _ (guión bajo) al principio del atributo.

46.- Rollover con border sin problemas

Un problema típico cuando deseamos hacer un rollover a un elemento utilizando el atributo CSS border y la solución para que no nos descuadre el diseño.

47.- Solución al problema de float en maquetación CSS

Cuando una capa tiene un float la capa contenedor sobre la que está situada muchas veces no acompaña. Lo solucionamos con el atributo CSS overflow:hidden y definiendo un width al contenedor.

48.- Diseño de pestañas con CSS

Diseño de una interfaz de pestañas con CSS, tabs en inglés. Cómo crear pestañas con estilos CSS que se adaptan a cualquier texto.

49.- Pestañas CSS: mejora de detalles

Vamos a mejorar un pequeño detalle de la interfaz de pestañas CSS creada en un artículo anterior, para colocar una línea debajo de las pestañas y mostrar cuál es la que está abierta.

50.- Tamaños de texto con CSS: buenas prácticas

Distintas particularidades sobre las unidades CSS a la hora de asignar tamaño al texto de una página web. Veremos cuál es la mejor manera de asignar tamaño a las fuentes.

51.- Técnicas de tipografía con CSS

Sobre tipografía y CSS: Cómo mejorar el aspecto visual y facilitar la lectura de los textos en las páginas web con la ayuda de CSS.

52.- Vídeo: Caja de diálogo dinámica con Photoshop, CSS y jQuery

Videotutorial en el que creamos una interfaz de usuario dinámica, desde el diseño con Photoshop, su maquetación CSS y los dinamismos con Javascript y jQuery.

53.- Sprites CSS

Qué son los sprites CSS y cómo ayudan a optimizar la descarga de una página web. Vemos un ejemplo sencillo de sprite CSS.

54.- Uso de varios sprites CSS en una misma imagen

Taller de CSS en el que hacemos uso de varios sprites CSS, en una misma imagen que contiene varios iconos en sus versiones normal y hover, que seleccionamos con el atributo background-position.

55.- HTML5 optimizado mediante CSS/CSS3

Sprites e imágenes embebidas usadas con CSS para la optimización de documentos HTML.

56.- Saltos de página al imprimir con CSS

Código CSS que nos servirá para realizar saltos de página al imprimir una página web desde el navegador.

57.- Hack CSS !important para Internet Explorer 6

Hack CSS para cargar estilos diferentes cuando el visitante tiene Internet Explorer 6, a través de la regla important de CSS.

58.- Cambiar el cursor o puntero del ratón por imágenes personalizadas con CSS

Taller de CSS en el que trabajamos con cursores del ratón, colocando imágenes estáticas o animadas que hemos personalizado para cada uno de los elementos de la página web.

59.- Sombras en el texto con text-shadow de CSS

Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow.

60.- La búsqueda del radio perfecto

En el siguiente artículo analizaremos la propiedad border-radius en el diseño web, intentando establecer una fórmula que haga idóneo su aspecto general.

61.- Animaciones de sprites mediante CSS3 y JavaScript

Con la aparición de CSS3 se nos abren nuevas capacidades de programación en el ámbito de las animaciones HTML.

62.- Biblioteca de animación jQuery.spritely

Cómo podemos animar sprites mediante JavaScript...y un mínimo de CSS.

63.- Cómo hacer con CSS3 un bocadillo de cómic o globo de historieta

Por medio de formas CSS podemos implementar simplemente con una capa y estilos CSS3, los típicos globos de historietas o bocadillos de cómic.

64.- Unidades de medida CSS para fuentes Responsive Web Design

Las mejores unidades de medida de CSS para trabajar con tamaños para tipografías en Responsive Web Design, ventajas, inconvenientes y soluciones a la unidad rem.

65.- Usos avanzados de Border­radius CSS3 para crear formas

El increíble mundo de border­radius, mucho más que cajas con esquinas redondeadas, permite hacer formas de diversos tipos.

66.- Ajustar texto u otros elementos a las formas de sus contenedores en CSS3

Técnicas CSS para crear textos u otros elementos que se pueden transformar para ajustarse a diversas formas que conseguimos con CSS3.

Descargas

 Si eres usuario de DesarrolloWeb:
Archivo de descarga Taller de CSS Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Taller de CSS. Descarga compilada y actualizada el día 04/02/09.
Tamaño: 477069

Bibliografía recomendada

CSS Cookbook

Compra este libro en Agapea, la librería urgente a domicilio.

Manual en portugués
Esta disponible en CriarWeb.com:

Compartir

Comentarios

cacuestai

07/4/2009
Se recomienda
Excelente manual para aprender desde cero CSS.

Felicitaciones!

Jose

08/4/2009
Gracias
Sólo daros la enhorabuena por estos magníficos talleres prácticos, que me han/están ayudando mucho y que sigais así, añadiendo nuevos manuales.

Gracias por todo lo bueno que habeis hecho.

miguel

18/5/2009
Gracias
Gracias por el manual....

una cosilla...
no se puede descargar...

gracias

mara_paula_tripodoro

10/11/2009
Excelente manual!
Excelente manual! Muy completo, la verdad me está sirviendo muchísimo. Muchas gracias!

xisco

31/5/2010
css
Perfecto, ha sido de gran ayuda.

ines_maria_oliveros_hernandez

04/10/2010
Felicitaciones..... está super bien este taller!!
Los felicito porque con toda esta información que tienen publicada en esta web, nos ha hecho la vida más fácil de entender... gracias a todos los que se han puesto a desarrollar estos manuales, videotutoriales y cursos tan efectivos para empezar desde cero.... me han ayudado mucho estos manuales y talleres de CSS.... gracias de nuevo... y un abrazo desde Colombia!!
Inés María

ricardo

10/10/2010
muy bueno
muy bueno el tutorial son grosos lo maximo , gracaias por hacer la vida m<s facil de los que queremos aprender ahcer paginas con maquetacion, un saludo desde lima peru

Julio

08/1/2011
Alguien sabe como yo edito esto ?
Cual seria el orden para editar la parte del login, oseas la centralización, tamaño, etc..
<div><div class="form-item" id="edit-name-wrapper">
<label for="edit-name">Nombre de usuario o dirección e-mail: <span class="form-required" title="This field is required.">*</span></label>
<input maxlength="60" name="name" id="edit-name" size="60" value="" tabindex="1" class="form-text required" type="text">
<div class="description">You may login with either your assigned username or your e-mail address.</div>
</div>
<div class="form-item" id="edit-pass-wrapper">
<label for="edit-pass">Contraseña: <span class="form-required" title="This field is required.">*</span></label>
<input name="pass" id="edit-pass" maxlength="128" size="60" tabindex="2" class="form-text required" type="password">

<div class="description">The password field is case sensitive.</div>
</div>
<div class="form-item" id="edit-remember-me-wrapper">
<label class="option" for="edit-remember-me"><input name="remember_me" id="edit-remember-me" value="1" tabindex="3" class="form-checkbox" type="checkbox"> Remember me</label>
</div>
<input name="form_build_id" id="form-c2f7ad66ba9d14d2b783c9935e3e83b5" value="form-c2f7ad66ba9d14d2b783c9935e3e83b5" type="hidden">
<input name="form_id" id="edit-user-login" value="user_login" type="hidden">
<button type="submit" name="_op" id="edit-submit" value="Log in" tabindex="4" class="Button form-submit"><span class="btn "><span class="l"></span><span class="r"></span><span class="t">Log in</span></span></button>
</div>

ceu

11/3/2011
Descarga fallida
Hola señores Desarrolloweb.
Soy nuevo en esto de lo de desarrollo web y me he encontrado con cosas muy interesantes aquí en su web, gracias por compartirlo.
Estoy intentando descargar unos tutoriales de CSS que he visto y que se supone son de acceso a sus sus criptores pero cuando intento descargarlos los archivos comprimidos siempre tienen un error, que debo o puedo hacer para poder descargarlos bien y que funcionen.


De nuevo muchas gracias por compartir todo este mundo de información.

dhuertas

12/4/2011
Recomendable...
Impresionante manual, aún no lo termino de leer, pero pues con lo poco que llevo avanzado debo decir que es excelente... Felicidades!!!

La Dama Oscura

26/6/2011
Excelente Manual
MIs respetos, la verdad esta muy bien explicado, por tanto es facil de comprender, soy nueva en CSS y la verdad me esta sirviendo mucho y lo mejor de todo es que estoy aprendiendo, gracias

luis

21/9/2011
hola!!!
eeeeey ben tutorial, muy repleto de informacion por cierto... me esta ayudando mucho!!! felicitaciones....

Pedro

08/11/2011
Felicitaciones
Gracias por poner a disposición de nosotros los principiantes este tipo de información tan elemental y al mismo tiempo tan bien estructurada, de manera que hace posible con un poco de conocimientos poder dar los primeros pasos en el mundo apasionante del desarrollo web.

Muchas gracias.

pedro hincapie

07/11/2012
exelente
gracias chamacos me pareció muy bien este manual

Elia

07/10/2013
Contenido dinámico en plantilla css
Hola,

Tengo una página hecha con frames cuya estructura es una plantilla de varios marcos estática con uno de los marco (el contenido central) dinámico. Es posible esto mismo con css? Cómo se lleva a cabo, lo he buscado y no lo encuentro fácilmente. Me iría bien un ejemplo de web con código hecho así para poder verlo a fondo. Gracias