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.- Taller de CSS, Opacity
Explicamos como hacer efectos de transparencia, cambiando la opacidad de elementos como capas, formularios e imágenes entre otros. Entrar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

55.- HTML5 optimizado mediante CSS/CSS3
Sprites e imágenes embebidas usadas con CSS para la optimización de documentos HTML. Entrar

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

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

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

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

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

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

62.- Biblioteca de animación jQuery.spritely
Cómo podemos animar sprites mediante JavaScript...y un mínimo de CSS. Entrar