Tema. Objetivos. Administrar la interfaz gráfica de documentos HTML con CSS. Material a utilizar.

Transcripción

1 Tema. Administración de la interfaz de usuario Objetivos. Administrar la interfaz gráfica de documentos HTML con CSS Material a utilizar. Editor de texto para el código HTML Navegador Web Introducción. CSS3 permite crear elementos gráficos para sitios web y aplicaciones, que aumentan la satisfacción de la experiencia del usuario. Se puede crear efectos gráficos como esquinas redondeadas y sombras paralelas, y aplicar transformaciones 2D y 3D como rotaciones y escalar. Las transiciones y animaciones, realizadas completamente con HTML y CSS3, dan vida a imágenes, cuadros y texto estáticos. Además, muchas de las mismas propiedades de CSS3 se aplican a las figuras de lienzo, y SVG viene con un conjunto completo de filtros que producen efectos similares a los de las propiedades de CSS3. Procedimiento. Crear esquinas redondeadas Se utiliza la propiedad CSS3 border-radius para crear esquinas redondeadas alrededor de elementos de diseño, como encabezados, pies de página, barras laterales, cuadros de gráficos y contornos alrededor de las imágenes. border-radius es una longitud, que generalmente se expresa en píxeles o ems, pero puede ser tambien un porcentaje. La longitud es el radio del círculo que define la "redondez" de cada esquina de la caja. Los números bajos, implica menos redondeada la esquina. Algunos navegadores tienen problemas para renderizar el porcentaje correctamente, así que se recomienda usar un pixel o em longitud siempre que sea posible. Para crear un cuadro con un borde redondeado, el código CSS y el marcado podrían verse así: 1

2 También puede redondear una esquina de un cuadro usando las siguientes propiedades: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 2

3 Si se planea usar esquinas redondeadas en varios elementos en un documento HTML, es posible ahorrar tiempo al crear una clase separada para cada uno (arriba a la izquierda, arriba a la derecha, abajo a la izquierda y abajo derecho). La sintaxis se vería similar a la siguiente:.top-left-corner { border-top-left-radius:25px; } Creando sombras CSS3 introduce la propiedad de sombreado de caja para crear sombras paralelas alrededor de elementos de diseño. Una sombra paralela es un efecto visual en el cual un objeto se repite detrás y ligeramente debajo de sí mismo para crear la ilusión de que el objeto flota sobre su fondo. La sintaxis CSS para crear una sombra es: box-shadow: h-shadow v-shadow blur spread color inset; Los atributos h-shadow y v-shadow indican la posición horizontal y vertical de la sombra en relación con la caja. Ambos atributos son obligatorios. El valor de h-shadow define el desplazamiento horizontal de la sombra. Un valor positivo compensa la sombra a la derecha del elemento y un valor negativo a la izquierda. El valor de la v-shadow define el desplazamiento vertical de la sombra Un valor positivo compensa la sombra desde la parte inferior del elemento, y un valor negativo desde la parte superior. Los atributos restantes son opcionales. El atributo blur, en píxeles, indica la cantidad de desenfoque aplicado a la sombra. El atributo spread indica el tamaño de la sombra, el color especifica el color de la sombra paralela, y inset mueve la sombra desde el exterior al dentro de la caja. Un ejemplo puede ser: box-shadow: 10px 10px 5px # ; Aplicando transparencia Un elemento que es opaco no deja pasar la luz, mientras que puede ver a través de un elemento transparente. Aunque los términos son opuestos, al reducir la opacidad de un elemento o al aumentar su transparencia, eventualmente se llega al mismo punto. La sintaxis para aplicar una transparencia a una imagen u otro elemento es: opacidad: valor El valor es un valor de punto flotante entre 0.0 (100% transparente) y 1.0 (100% opaco). Para aplicar una transparencia del 45%, por ejemplo, usaría el valor 0.55 ( ). 3

4 Aplicación de gradientes Un degradado es un cambio suave de colores, ya sea dentro del mismo tono, como de verde oscuro a verde claro, o comenzando con un color y terminando con un color diferente, como comenzar con azul y terminar con amarillo. Los desarrolladores suelen utilizar degradados para sombrear sutilmente en fondos, botones y más. Los diferentes tipos o métodos de gradientes CSS3 son: linear-gradient: crea un gradiente de arriba a abajo o viceversa, o desde la esquina a la esquina radial-gradient: crea un gradiente que se irradia desde un punto central repeating-linear-gradient: crea un gradiente lineal repetitivo, que da como resultado bandas rectas de color degradado repeating-radial-gradient: crea un gradiente radial repetitivo, que da como resultado bandas circulares de color degradado Para aplicar un degradado a una imagen HTML, use la propiedad de fondo con una de los métodos de gradiente enumerados anteriormente, junto con los parámetros específicos de cada método. Los valores posibles para los métodos se enumeran en W3C "CSS Image Values and Se reemplazó el módulo de contenido de la página web del nivel 3 en 3/#repeating-gradients Un degradado lineal es un gradiente horizontal, vertical o diagonal. Para crear un degradado lineal de negro a blanco, se puede usar el siguiente código CSS: background: linear-gradient(black, white); El gradiente predeterminado va de arriba abajo. 1. Diseñe una página web que contenga un párrafo donde se pueda leer el rotulo: Universidad Don Bosco (puede usar un div o un p, para aplicar luego los formatos que se le pedirán. Al título de la página colóquele Practica 5 2. Agregar una sombra, un color y centre su mensaje, haga que todas las letras sean mayúsculas, use 24 px para el tamaño de la fuente. Puede usar algo como lo siguiente: 4

5 3. Agregar el logo de la universidad, con una opacidad de 0.6, centrarla en la página. 4. Agregar el texto: Escuela de computación, haga que aparezca centrado y con todas sus letras en mayúsculas, además de que las letras tengan más de una sombre, para dar el efecto de profundidad. (haga 14 puntos de profundidad usando el siguiente ejemplo) 5

6 Al final de este punto su página debe verse de esta manera Investigación complementaria. Investigar que es el Open Font Format y como se utiliza en los archivos css, también explicar en qué casos se utiliza. Coloque esos ejemplos usando la página que usted creo con antioridad Referencias. GAUCHAT, J. (2013). El gran libro de HTML5, CSS3 y Javascript. Marcombo, S.A. 2ª Edición 6