Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
O BJETIVOS
Crear un plantilla web utilizando los elementos de HTML5 Realizar efectos visuales con CSS3 Realizar animaciones utilizando CSS3
P ASOS A SEGUIR
Vamos a construir una plantilla HTML5 en conjunto con CSS3 utilizando los conocimientos adquiridos durante la presentacin terica. El resultado final debe ser el siguiente:
2 de 9
Abra su editor HTML favorito, crea un documento html y pegue el cdigo HTML5 de la pgina:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Prctica I: Creando una plantilla</title> </head> <body> <div id="pagewrap"> <header id="header"> <h1 id="site-logo"><a href="#">Prctica 1</a></h1> </header> <nav id="menu"> <ul id="main-nav"> <li><a href="#">Inicio</a></li> <li><a href="#">Item1</a></li> <li><a href="#">Irem2</a></li> </ul> </nav> <div id="content"> <section id="seccion"> <article class="post"> <header> <h1><a href="#">Artculo 1</a></h1> </header> Texto artculo 1 <footer><p>Comentarios (0)</p></footer> </article> <article class="post"> <header> <h1><a href="#">Artculo 2</a></h1> </header> Texto artculo 2 <footer><p>Comentarios (0)</p></footer>
3 de 9
Crea un achivo nuevo llamado practica1.css A continuacin se detalla el estilo CSS de cada parte de la estructura:
ESTILOS GENERALES
body { }
Aadir a la regla: Color de texto: #FFF Fondo con radial-gradient. Color externo: # 134952 Color interno: # 4a939e
4 de 9
color: #fff; text-decoration: none; outline: none; text-decoration: none; margin: 0 0 1.2em; padding: 0;
} li { }
margin: 1em 0 1.4em 24px; padding: 0; line-height: 140%; margin: 0 0 .5em 0; padding: 0;
/* headings */ h1, h2, h3, h4, h5, h6 { line-height: 1.4em; margin: 20px 0 .4em; color: #000; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; }
ESTRUCTURA
Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R. 5 de 9
HEADER
#header { background: #333; }
Aadir a la regla: Para el logo del sitio, se usar una fuente definida con la etiqueta @font-face. Para esto, vaya al sitio http://www.1001freefonts.com/ o cualquier otro de su preferencia y siga las instrucciones vistas en teora. Tamao de fuente: 5em.
MENU
#menu { -webkit-box-shadow: 0px 10px 14px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 10px 14px 0px rgba(0,0,0,0.75); box-shadow: 0px 10px 14px 0px rgba(0,0,0,0.75); }
Definir lo siguiente para la regla anterior: Fondo: lineal-gradient (desde arriba): de #555555 a #333333. Puede ayudarse en http://www.cssmatic.com/gradient-generator Ancho: 100% border:1px #222 solid Aadir sombra al texto. Puede ayudarse en http://www.css3-generator.de/text-shadow.html
#main-nav {
6 de 9
#menu li { margin: 0; padding: 0; list-style: none; display: inline-block; font: bold 14px verdana, sans-serif; }
#menu a { line-height: 100%; font-weight: bold; display: block; padding: 14px 15px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
CONTENIDO
#seccion { float: left; }
article footer {
7 de 9
BARRA LATERAL
#sidebar { float: left; width: 25%; }
#sidebar div { padding:5em 0; margin:10%; background:#FFF; border: 0px solid #000000; vertical-align:middle; text-align:center; }
ANIMACIONES
ANIMANDO EL MEN El men de navegacin deber tener una animacin. Para ello, debe modificar la regla #menu a. Aada una transicin que afecte a la propiedad background-color. La duracin de la transicin debe ser de 0.5 segundos y sin retardo inicial. ANIMANDO LA IMAGEN DE LA BARRA LATERAL Para realizar la animacin de la imagen de la barra lateral, debe modificar el archivo CSS y aadir la regla #animacion y escribir lo siguiente: Transformacin con los siguientes valores: rotate(360deg) scale(0.794) skew(1deg) translate(0px); O puede crear la suya en http://www.css3maker.com/css3-transform.html o aqu http://www.css3generator.de/transform.html Aadir una transicin que afecte a todas las propiedades que dure 1s.
Por ltimo, si queremos que se realice una animacin al mover el puntero del mouse sobre la imagen, aada la regla #animacion:hover al archivo CSS con lo siguiente: Transformacin con los siguientes valores: rotate(0deg) scale(0.5) skew(1deg) translate(0px); O puede crear la suya en http://www.css3maker.com/css3-transform.html o aqu http://www.css3generator.de/transform.html
Prctica 1: Crear una plantilla utilizando HTML5 y CSS3 Modifique la regla #sidebar, cambiando el tipo de letra usando Google Font API. Ayuda http://www.google.com/fonts
9 de 9