Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 451 vistas

    Prácticas CSS3

    Cargado por

    esther_ferreiro
    Este documento presenta las instrucciones para 5 pasos de una práctica de CSS3. En el primer paso, se pide implementar el diseño de una página web central con una imagen semitransparente. En el segundo paso, se pide cambiar los fondos a degradados. En el tercer paso, se pide eliminar un degradado y usar imágenes como bordes. En el cuarto paso, se pide cambiar los tipos de letra. En el quinto paso, se pide organizar texto en columnas y mostrar sólo parte del mismo. El objetivo es practicar diferentes propied

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado

    Prácticas CSS3

    Cargado por

    esther_ferreiro
    451 vistas7 páginas
    Este documento presenta las instrucciones para 5 pasos de una práctica de CSS3. En el primer paso, se pide implementar el diseño de una página web central con una imagen semitransparente. En el segundo paso, se pide cambiar los fondos a degradados. En el tercer paso, se pide eliminar un degradado y usar imágenes como bordes. En el cuarto paso, se pide cambiar los tipos de letra. En el quinto paso, se pide organizar texto en columnas y mostrar sólo parte del mismo. El objetivo es practicar diferentes propied

    Descripción original:

    Título original

    PRÁCTICAS CSS3

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento presenta las instrucciones para 5 pasos de una práctica de CSS3. En el primer paso, se pide implementar el diseño de una página web central con una imagen semitransparente. En el segundo paso, se pide cambiar los fondos a degradados. En el tercer paso, se pide eliminar un degradado y usar imágenes como bordes. En el cuarto paso, se pide cambiar los tipos de letra. En el quinto paso, se pide organizar texto en columnas y mostrar sólo parte del mismo. El objetivo es practicar diferentes propied

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    Descargar como pdf o txt
    451 vistas7 páginas

    Prácticas CSS3

    Cargado por

    esther_ferreiro
    Este documento presenta las instrucciones para 5 pasos de una práctica de CSS3. En el primer paso, se pide implementar el diseño de una página web central con una imagen semitransparente. En el segundo paso, se pide cambiar los fondos a degradados. En el tercer paso, se pide eliminar un degradado y usar imágenes como bordes. En el cuarto paso, se pide cambiar los tipos de letra. En el quinto paso, se pide organizar texto en columnas y mostrar sólo parte del mismo. El objetivo es practicar diferentes propied

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    Descargar como pdf o txt
    de 7

    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

    También podría gustarte