CSS3.
PRCTICA 1
PASO 1
Implementa una pgina Web para que muestre en el centro del navegador un aspecto similar al siguiente. Al finalizar la modificacin de los estilos debes aadir la imagen Simbolo.jpg, que encontrars en la red para colocarla a la izquierda del ttulo de la pgina Web (como puedes ver en la imagen del ejemplo). Fjate 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 mayora de los navegadores) y la hoja de estilos de la prctica debe ser externa al documento HTML.
Prcticas CSS3
Pgina 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.
PASO 3
Suprimir el degradado de la capa principal y fijar como borde la imagen marco2.jpg (extraer de la red), hacer la operacin equivalente con el pie de la pgina utilizando la imagen marco3.jpg (extraer de la red).Tambin redondear los bordes de las capas con el texto I said y aadirle una sombra.
Prcticas CSS3
Pgina 2
PASO 4
Modificar el tipo de letra para que el ttulo se corresponda con la fuente Cake.ttf el texto en ingls 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 despus de realizar la prctica debe ser como la siguiente imagen;
PASO 5
Columnas
En el pie (footer) de la prctica del tema anterior debes incluir el texto (Wikipedia) que se muestra a continuacin organizado en tres columnas y con texto justificado (textalign:justify;)
Texto desbordado
Fija las secciones donde residen las letras de las canciones a un tamao similar a la imagen donde se ve el resultado. Aade el texto que se expone a continuacin pero utiliza las propiedades CSS3 necesarias para que se vea slo las seis primeras palabas finalizadas en puntos suspensivos.
Prcticas CSS3
Pgina 3
Utiliza el texto que viene a continuacin
Resultado final (Se recomienda el uso de Chrome)
Prcticas CSS3
Pgina 4
CSS3. PRCTICA 2
A continuacin se muestra un cdigo 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 diseo atractivo.
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8"> <title>Efectos de texto</title> <style> h1{ font-size:36px; font-family: Georgia; color: rgb(142,11,0); } h1 span{ font-size: 34px; } .meta{ font-family: Georgia; color: rgba(69,54,37,0.6); font-size: 0.85em; font-style: italic; letter-spacing: 0.25em; border-bottom: 1px solid rgba(69,54,37,0.2); padding-bottom: 0.5em; } .meta span{ text-transform: capitalize; font-style: normal; color: rgba(69,54,37,0.8); } .body p{ font-family: Verdana; line-height: 1.5em; color: rgb(69,54,37); text-align:justify; } date{ font-family: Georgia; color: rgba(69,54,37,0.6); font-size: 0.75em; font-style: italic; border-top: 1px solid rgba(69,54,37,0.2); display: block; padding-top: 0.5em; margin-top: 2em;
Prcticas CSS3
Pgina 5
} </style> </head> <body> <header> <h1> Curso de CSS3 <br> <span>Ejemplo de efectos sobre el texto</span> </h1> </header> <section> <header class="meta">Prctica del<span> alumno</span></header> <article class="body"> <p>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.</p></article> <footer><date>Creado en Septiembre de 2011</date></footer> </div> </section> </body> </html>
El resultado del cdigo inicial de la prctica es
El alumno debe realizar los cambios apropiados sobre la hoja de estilos para conseguir efectos similares a la imagen siguiente.
Prcticas CSS3
Pgina 6
Prcticas CSS3
Pgina 7
