ProInf.net

Programación: CSS



Carrusel de fotos con CSS mejorado con JavaScript…

Icono de un tiovivo

Son vínculos a fotos que se desvanecen mediante una transición CSS.

Con JavaScript borramos del historial de navegación a las fotos y además temporalizamos la transición a la siguiente foto



Caracteres especiales HTML…

Caracteres especialesEl lenguaje de las páginas web —el HTML— nos ofrece una serie de caracteres codificados que podemos usar para indicar letras especiales, acentos y otros símbolos.



Navegación con CSS…

Miniatura de la multisolapa

Exploración de las posibilidades que nos brinda CSS para crear sistemas de navegación: (a) unas pestañas que puedan ocupar varias filas, (b) un menú desplegable y (c) una opción a escoger entre varias.



Entidades básicas de los grafismos en el lenguaje visual…

Degradado en espiral

Los grafismos del lenguaje visual pueden descomponerse en entidades básicas: color, textura, degradado, forma, escala, dirección, dimensión, animación y tipografía. El significado del grafismo es el resultante de los significados de las entidades básicas que lo conforman.



Combinaciones de colores web…

Mariposa

Modificación de los colores indicados en una hoja de estilos CSS mediante PHP.

Tanto se puede seleccionar combinaciones de colores preestablecidas como se pueden especificar nuevas combinaciones de colores a medida.



Barra de navegación horizontal CSS…

Iconos de la barra de navegación

Vamos a crear paso a paso una barra de navegación en horizontal para una página web.

El código HTML consiste en una lista no numerada de enlaces. Mediante una hoja de estilos CSS le daremos el formato deseado.



Tipos de posicionamiento CSS…

Miniatura de una web

Distintas formas de posicionar las divisiones de una página web utilizando estilos CSS: (1) con falsa columna, (2) con posicionamiento absoluto, (3) como si fuesen tablas y (4) uno mixto mezclando varios conceptos.

Se trata de ejemplo práctico de una página HTML que utiliza un encabezado, un menú, un contenido y un pie



Análisis de una plantilla CSS y adaptación a Dreamweaver…

Vamos a convertir la plantilla CSS Bright Side of Life de la web stylesshout.com a una plantilla de Dreamweaver. También cambiaremos la hoja de estilos CSS así como las imágenes utilizadas en el CSS. Por último veremos una técnica para que la pestaña que deseemos esté activa.

Plantilla Bright Side of Life


¿Tu navegador web es capaz de sonreir?…

Imagen de referencia del test Acid2

El test Acid2 es una prueba que ha de pasar un navegador web para demostrar que es capaz de visualizar correctamente una página web.

El test Acid2 es un caso de prueba diseñado por el Proyecto de estándares web. Cualquier navegador que sigua fielmente las especificaciones de HTML y de CSS 2.0 del consorcio W3C pasará correctamente el test.

Comprueba si tu navegador web pasa el test Acid2…



Nombres de colores HTML…

Logo de colores

Tabla con los nombres de los colores HTML en inglés. Estos nombres de color se pueden utilizar en las hojas de estilo en cascada CSS.

Ir arriba