TALLER |
|
Después de un pequeño parón estival retomamos el curso de HTML5 continuando por donde lo dejamos, maquillando la página y volviendo con fuerzas en esta nueva temporada, algunos aún les quedarán vacaciones otros como un servidor volveremos al pie del cañón pero eso si, con muchas ganas y fuerzas renovadas, comencemos. En el capítulo 7, nuestro anterior artículo sobre CSS3, terminamos de ubicar todos los nuevos elementos estructurales en el sitio correcto de nuestra página, en esta nueva entrega veremos cómo diseñar el contenido de nuestros artículos dentro de la estructura creada aunque esto lo repasaremos de forma rápida y no profundizaremos más de lo necesario, para así adentrarnos en las nuevas funciones estéticas que nos ofrece CSS3, funciones que hasta el momento de su implementación era imposible o muy complicada para algunos desarrolladores y que ahora CSS3 hace que sea fácil y rápido. Imagen 1. En la imagen vemos como dejamos la página en el último artículo, el navegador usado en la imagen es Mozilla Firefox. Como podemos observar en la imagen 1, los elementos estructurales ya están colocados, o sea, la cabecera arriba y <section> donde colocaremos los artículos, a la misma altura de <aside>, la barra lateral y para terminar en la parte de abajo <footer>, es decir, el pie de página. Ahora como ya dijimos vamos a dar forma al artículo. Imagen 2. Referenciando la etiqueta <article> En la imagen 2 se referencia a todos los elementos <article> de nuestra página, veamos cuales son: color: #696969; con esta regla le indicamos que todos los textos los queremos en el color hexadecimal #696969 que por ejemplo en este caso es un gris no muy oscuro, el cual nosotros con otras reglas más adelante cambiaremos en algunos elementos, si bien el texto lo dejaremos en este color que resulta agradable a la lectura background: #e6e6fa; con esta regla le vamos a dar a toda el área donde se encuentra el artículo, un fondo de color #e6e6fa que es un tono morado claro, (aunque en la página de negocioscontralaobsolescencia.com, no usamos esta regla, en los artículos creemos que es muy interesante que la veáis y practiquéis border: 1px solid #e0ffff; El área que acabamos de darle un color morado clarito con esta regla le vamos a dar un contorno de un pixel de ancho, con un color #e0ffff que es un cyan claro. padding: 20px; con la que vamos a darle un margen interior superior e inferior de 20px, recordad como indicamos las medidas el orden de superior, derecha, inferior, izquierda y que si solo ponemos un valor hará referencia al superior e inferior y que si ponemos dos el primero hará referencia al superior e inferior y el segundo valor al derecho e izquierdo. margin-bottom: 15px; y esta última regla la usaríamos para separar los artículos entre sí, la distancia escogida es 15 pixeles. Imagen 3 En la imagen 3 vamos a seleccionar todas las cabeceras de los artículos y con la regla de la imagen color: #2f4f4f; le daremos a todos los textos de las cabeceras el color #2f4f4f que es un gris verdoso oscuro (Dark Slate Gray), siempre que no declaremos otra regla más específica. Como por ejemplo: Imagen 4 Time, está dentro de las cabeceras y se vería afectado por la regla de la imagen 3, pero como no queremos que este en el mismo color del título, hemos creado una regla más específica para él solo, con la cual indicaremos que la queremos en un color #0000ff que es un azul intenso. Imagen 5 En la imagen 5 le toco el turno al pie del artículo, con article footer referenciamos a todos los pie de página de todos los artículos, que en la imagen 5 hemos decidido con la primera regla text-align: right; alinearlo a la derecha. color: #000000; Y esta sería la segunda regla de la imagen 5 con la que les asignamos a todos los pies de artículo un color #000000 que es un negro puro. Imagen 6 Le llego el momento a <figcaption> que hace referencia al pie de foto de una imagen <figure> en este caso en el primer estilo font: italic 8px verdana, sans-serif; le hemos indicado con italic que queremos que sea en cursiva, que tenga 8 pixeles de tamaño con un tipo de fuente verdana y sin serif que hace que las terminaciones de las letras no se prolonguen y así los caracteres sean más fácil de leer. En el segundo estilo le indicamos un margen interior inferior de 10 pixeles para separarlo del texto que le sigue a continuación. Y en la tercera le daremos un color granate como los pies de página de nuestra página oficial. Imagen 7 En la imagen 7 referenciando con <div> vamos a usar la propiedad box-sizing la cual podemos darle dos valores, aunque por defecto se nos configurará como content-box, lo que hará que nuestro navegador adapte los valores de padding y border a los valores que pusimos de widht y height. Esta propiedad box-sizing llego nueva con CSS3 y ha estado durante un largo periodo experimental, aunque CSS3 ya tiene tiempo en ciertos navegadores con versiones antiguas puede no interpretarlo, al igual que las siguientes propiedades que veremos más adelante, es aconsejable poner los siguientes prefijos, aunque si probásemos uno por uno por ejemplo en Firefox, la mayoría funcionan sin ellos, aunque es aconsejable probarlos antes en el mayor número de navegadores posible.
Veamos entonces las nuevas funciones, primero miremos la imagen 8: Imagen 8 Imagen 9 Con el código de la imagen 8 lo que nos muestra el navegador sería lo que vemos en la imagen 9, ahora vamos a ir mostrándoos como con pequeñas modificaciones en el código con CSS3 hacemos auténticas maravillas que antes solo podríamos hacerlas de formas complicadas con javascript como podría ser aplicar movimiento, pero bueno comencemos, primero vamos a aplicarle a nuestro título un fondo con el que trabajaremos las nuevas propiedades. Imagen 10 En la imagen 10 añadimos la propiedad background-color: #fa8072; con lo que conseguimos crear un fondo en el título del color indicado, como podemos apreciar en la imagen 11. Imagen 11 En la imagen 11, vemos la caja que envuelve el titulo y que es una caja con líneas rectas y eso normalmente no agrada en internet , así que ahora lo primero que haremos es modificar esto de una forma muy sencilla y enfatizo en esto porque antes esto hubiera sido un proceso complicadísimo. Imagen 12 En la imagen 12 vemos como para aplicar la propiedad border-radius la hemos escrito tres veces, 2 de ellas usando unos prefijos -moz- y -webkit- para que los navegadores con motores Gecko y WebKit que serían los principales... Firefox, Safari y Chrome lo detecten e interpreten. Border-radius: 20px; con este estilo le estamos diciendo al navegador que queremos las esquinas redondeadas con un radio de 20px y al poner solo un valor le indicamos que queremos las cuatro esquinas iguales como podemos apreciar en la imagen 13, aunque podemos indicar valores diferentes a cada esquina. Imagen13 En la imagen 14, podemos ver como se le asignaría a cada esquina un valor distinto con la propiedad border-radius pero ¿cuál es el orden? El orden es el primer valor haría referencia a la esquina superior izquierda, siguiente esquina superior derecha, esquina inferior derecha y por ultimo esquina inferior izquierda. Vamos empezando por la esquina superior izquierda en dirección a las agujas del reloj. Imagen 14 Como analizamos en anteriores capítulos con margin y padding con border-radius también podemos agregar solo dos valores, pero tener en cuenta la simetría el primer valor haría referencia a la esquina superior izquierda e inferior derecha y el segundo valor a la esquina superior derecha e inferior izquierda. Imagen 15. Representación del código de la imagen 14 en un navegador Firefox Con border-radius también podemos hacerlo con dos valores separados por una barra como en la imagen 16. Imagen 16 En la imagen 16 los valores a la izquierda de la barra que son 40px hacen referencia a los valores horizontales mientras que los valores a la derecha de la barra 20px representarían el radio vertical combinando estos valores podríamos generar una elipsis. Imagen 17 box-sahdow Este efecto nos permitirá crear sombras, un efecto hasta ahora difícil o tedioso de generar hasta la llegada de CSS3. Imagen 18 Como podemos observar en la imagen 18 usaremos 3 valores (línea 50, 51 y 52) para el color en este caso pero podríamos usar como hasta ahora colores en hexadecimal con la almohadilla delante. 5px y 5px Hacen referencia al desplazamiento de la sombra indicando la distancia horizontal y vertical desde el final de la sombra hasta el elemento (su grosor). Podríamos cambiar la dirección de la sombra usando números negativos los cuales posicionarían la sombra al lado izquierdo y en la parte superior respectivamente. Imagen 19 Mientras que si usásemos los valores a 0 la sombra se posicionaría justo debajo de nuestro elemento creando un efecto difuminado alrededor si añadimos un tercer valor, el ejemplo de esto sería la imagen 20 que quedaría representado en la imagen 21 en el navegador Firefox. Imagen 20 Imagen 21 Este último valor que usamos hace que desparrame la sombra en la imagen 21, parece que la añade pero veamos otro ejemplo para ser más conscientes de lo que hace. Imagen 22 En la imagen 22 podemos ver la propiedad box-shadow es el mismo código que en la imagen 19 solo que en la 19 la sombra sale en un color solido y aquí con el código de la imagen 22, le añadimos un tercer valor 10px con el cual vemos en la imagen 23 que hace que la sombra se difumine dándole un toque más natural. Imagen 23 Y el último efecto que le aplicaremos a box-shadow será añadiendo inset, creando así una sombra interior que provoque profundidad, lo haremos como en la imagen 24 provocando el efecto de la imagen 25. Imagen 24 Imagen 25 text-shadow Vale llegado a este punto la pregunta sería ¿Cómo agrego sombras a las propias letras y demás elementos irregulares? Fácil, con text-shadow, funciona igual que box-shadow pero este es aplicable al texto veamos cómo… Imagen 26 Fijémonos en la imagen 26, en este caso hemos cambiado los colores rgb por los colores en hexadecimal pero sería exactamente igual, los dos primeros números hacen referencia a el ancho de nuestra sombra y el tercero al radio del difuminado. Igual que en box-shadow. Imagen 27 Y ya llegados a este punto vamos a aplicar un cambio radical, vamos a cambiar la fuente algo que durante mucho tiempo limito a los diseñadores pero que ahora es fácil de cambiar. @font-face Con esta propiedad solo nos hace falta un archivo .ttf con la fuente que necesitemos y ya podremos tener la fuente que queramos. Este archivo, el que contiene la fuente, deberá encontrarse en el mismo dominio que la página o en la misma carpeta. Imagen 28 Como podemos observar en la imagen 28 la propiedad @font-face necesita al menos dos estilos para poder declarar la nueva fuente y cargarla en nuestra página. Si nos fijamos detenidamente en la línea 62 font-family especifica el nombre que le vamos a dar a esa fuente, en nuestro caso la fuente se llamaba MR ROBOT y nosotros hemos querido llamarla SEGA, con src indicamos la url de la dirección donde está el archivo de la fuente. Imagen 29 linear-gradient El gradiente lineal es un efecto nuevo incorporado en CSS3, un degradado (o gradiente de color) es una transición suave y progresiva entre dos o más colores, antes esto hubiera costado mucho de conseguir pero ahora es facilísimo, como veremos a continuación. Imagen 30 Los gradientes lineales al tenerlos que configurar como fondos usaremos para declararlos las propiedades background o background-image, si observamos la imagen 30 las líneas 54 y 55 veremos la sintaxis donde primero veremos los prefijos -webkit- y -moz- que antes dijimos que incorporamos para que algunas propiedades nuevas puedan ser aplicadas por nuestro navegador, el siguiente es el estilo en si linear-gradient() y dentro de los paréntesis indicaríamos en primer lugar la posición de inicio del gradiente, este valor puede ser un número en pixeles un porcentaje o alguna de estas 4 palabras clave top, bottom , left y right, separado por una coma del primer color, en nuestro caso el color hexadecimal #ffc0cb es un rosa claro, separaríamos por una coma y el segundo color que en nuestro caso es #ff0000, un rojo y cerraríamos el paréntesis. Imagen 31 La imagen 31 sería la representación del código de la imagen 30, si os fijáis bien las letras tiene un sombreado granate que apenas se ve pero estéticamente hace que quede bien a la vez que permite leer más claramente, en la imagen 32 hemos modificado esa línea la 61 cambiando el color a un verde para que veáis más claro el cambio. Imagen 32 La posición del gradiente puede ser remplazado por un ángulo, como podemos ver en la imagen 34 hemos generado un ángulo, la imagen 33 sería el código, la dirección es indicada con el 85deg el cual os aconsejo cambiéis varias veces para comprenderlo, hemos reducido el texto para que veáis el ángulo más claramente. Imagen 33 Si nos fijamos en la Imagen 34, veremos que el rojo intenso comienza por la parte superior izquierda y se va degradando hacia la parte inferior derecha. Imagen 34 Otro estilo que podemos darle sería declarar puntos de terminación para cada color, como en la imagen 36. Imagen 35 En la imagen 35 vemos que hemos puesto los valores 30% y 90% que serían los puntos en que queremos que termine ese gradiente de color, cada número al lado del color correspondiente. Imagen 36 En la imagen 36 vemos como la degradación al rosa termina antes y hay más parte rosa sin degradación mientras que en la parte roja apenas hay diferencia con la imagen 32 radial-gradient Le toco el turno al estilo gradiente radial que se aplica prácticamente igual que el gradiente lineal, pero el gradiente radial tiene un atributo más, pero vamos a ver a que nos referimos. Imagen 37 El porcentaje que pongamos el primero haremos referencia punto de origen y podemos dar el valor en pixeles, porcentajes o con las palabras clave center, top, bottom, left y right. En la imagen 37 hemos seleccionado 5% y 110%. Para la forma del gradiente tendremos que elegir entre dos formas distintas, circular= circle o elipse= ellipse y al final declararíamos el color y la posición de las transiciones. Imagen 38 Y hasta aquí hemos llegado esta semana, os dejamos debajo la imagen 39 para que veáis como ha quedado la página de pruebas después de los cambios. Un saludo programadores y disfrutar del verano! Manuel Castelló (kasmangou)
Temas relacionados: Programación, Redacción independiente, kasmangou Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |