Taller de CSS

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. Entrar

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. Entrar

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). Entrar

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. Entrar

6.- Maquetar una página con CSS
Tutorial para maquetar una página web utilizando CSS en lugar de tablas. Entrar

7.- Maquetar una página con CSS II
Explicamos la creación de la cabecera de la página, que se simplificará al máximo para hacer el ejercicio más facil. Entrar

8.- Maquetar una página con CSS III
Realizamos la maquetación del área del cuerpo, donde se mostrará el contenido de la página. Entrar

9.- Maquetar una página con CSS IV
Creamos el lateral de la página, donde se muestran varios recuadros con un buscador y acceso a otras informaciones. Entrar

10.- Maquetar una página con CSS V
Para acabar, vamos a crear un pie de página y un borde enmarque la página. Ofreceremos también unas conclusiones del ejercicio. Entrar

11.- Variar el diseño y maquetación con la hoja de estilos
Continuamos el taller de maquetación con CSS. Creamos un diseño distinto, que aplicamos al ejemplo realizado anteriormente, cambiando solamente la hoja de estilos. Entrar

12.- Taller de CSS, Opacity
Explicamos como hacer efectos de transparencia, cambiando la opacidad de elementos como capas, formularios e imágenes entre otros. Entrar

13.- 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. Entrar

14.- Crear un menú dinámico con CSS
Código que nos ayuda a crear un menú con Css similar a los de Javascript. Entrar

15.- 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. Entrar

16.- Recuadro sencillo y elegante con CSS
Cómo hacer un recuadro atractivo pero muy fácil de hacer, utilizando CSS para aplicarle los estilos. Entrar

17.- 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. Entrar

18.- 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. Entrar

19.- Efecto de sombra con CSS
Veremos varios métodos para realizar un efecto de sombreado utilizando hojas de estilo en cascada. Entrar

20.- Texto en vertical usando CSS
Nuevo atributo CSS para poner un texto que se pueda leer en vertical en nuestro documento HTML. Entrar

21.- 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. Entrar

22.- Maquetación CSS a tres columnas
Veamos cómo hacer una página, maquetada únicamente con Hojas de Estilo en Cascada, compuesta por tres columnas. Con diseño de anchura fija y fluido. Entrar

23.- Variación de la maquetación con CSS a 3 columnas
Mostramos una mejora al código mostrado anteriormente para maquetar una página con CSS a tres columnas. Entrar

24.- 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. Entrar

25.- Caja CSS para meter contenido
Realizar con imágenes y hojas de estilo un diseño para una caja donde meter contenidos. Entrar

26.- Caja CSS con las esquinas redondeadas
Nuevo ejemplo de maquetación de cajas con esquinas redondeadas, realizado con CSS. Entrar

27.- 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. Entrar

28.- 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. Entrar

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

30.- 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. Entrar

31.- 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. Entrar

32.- 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. Entrar

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

34.- 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. Entrar

35.- Grafica de barras con CSS, parte 2
Hacemos una gráfica de barras CSS más elaborada, con capas y maquetación posicionamiento CSS. Entrar

36.- 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. Entrar

37.- 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. Entrar

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

39.- 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. Entrar

40.- 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. Entrar

41.- Maquetar una página con un mapa de Google, usando CSS
Es muy fácil maquetar una página que tenga un mapa de Google, simplemente debemos utilizar maquetación y posicionamiento CSS. Entrar

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

43.- 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. Entrar

44.- 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. Entrar

45.- 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. Entrar

46.- 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. Entrar

47.- 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. Entrar

48.- 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. Entrar

49.- 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. Entrar

50.- 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. Entrar

51.- 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. Entrar

52.- 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. Entrar

53.- 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. Entrar

54.- 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. Entrar

55.- 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. Entrar

56.- 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. Entrar

57.- 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. Entrar