PRÁCTICAS CSS3

CSS3. PRÁCTICA 1 PASO 1

Implementa una página Web para que muestre en el centro del navegador un aspecto similar al siguiente. Al finalizar la modificación de los estilos debes añadir la imagen Simbolo.jpg, que encontrarás en la red para colocarla a la izquierda del título de la página Web (como puedes ver en la imagen del ejemplo). Fíjate en que la opacidad de la imagen debe ser alterada para que se muestre semitransparente. Se pueden utilizar todos los formatos de color (excepto el CMYK por no estar implementado en la mayoría de los navegadores) y la hoja de estilos de la práctica debe ser externa al documento HTML.

Prácticas CSS3

Página 1

PASO 2

Cambiar los fondos de los distintos elementos para que se vean con degradados, puedes utilizar los colores que desees y acceder a herramientas on-line que te ayuden en el desarrollo de las propiedades necesarias. necesarias.

PASO 3

Suprimir el degradado de la capa principal y fijar como borde la imagen marco2.jpg (extraer de la red), hacer la operación equivalente con el pie de la página utilizando la imagen marco3.jpg (extraer de la red).También redondear los bordes de las capas con el texto I said y añadirle una sombra.

Prácticas CSS3

Página 2

PASO 4

Modificar el tipo de letra para que 

el título se corresponda con la fuente Cake.ttf



el texto en inglés se corresponda con la fuente East-Side-Italic.ttf



el texto en castellano se corresponda con la fuente SecretAgent.ttf

Las fuentes se pueden descargar de la red El aspecto de la Web después de realizar la práctica debe ser como la siguiente imagen;

PASO 5

Columnas En el pie (footer) de la práctica del tema anterior debes incluir el texto (Wikipedia) que se muestra a continuación organizado en tres columnas y con texto justificado ( textalign:justify;)

Texto desbordado Fija las secciones donde residen las letras de las canciones a un tamaño similar a la imagen donde se ve el resultado. Añade el texto que se expone a continuación pero utiliza las propiedades CSS3 necesarias para que se vea sólo las seis primeras palabas finalizadas en puntos suspensivos.

Prácticas CSS3

Página 3

Utiliza el texto que viene a continuación

Resultado final (Se recomienda el uso de Chrome)

Prácticas CSS3

Página 4

CSS3. PRÁCTICA 2 A continuación se muestra un código CSS / HTML5 que el alumno debe analizar consultando el anexo de CSS para conocer las distintas propiedades que se utilizan para crear los estilos. Sobre los estilos definidos para h1, h1 span, body p, y date debe aplicar efectos de sombras o contornos para conseguir un diseño atractivo.

<meta charset=”utf -8"> -8">

Efectos de texto

Curso de CSS3
Ejemplo de efectos sobre el texto

Práctica del alumno
alumno

Ya no es necesario crear una imagen con un programa especializado que permita crear efectos sobre el texto puesto que con el uso exclusivo de las hojas de estilo es posible modificar el aspecto con el que se muestra un texto.

Creado
Creado en Septiembre de 2011
>

PRÁCTICAS CSS3

Recommend Documents