Scribd Logo
Upload

Welcome to Scribd!

  • 1 Colores

    Uploaded by

    MILTON MIRANDA
    12 views13 pages

    Original Title

    1-COLORES

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views13 pages

    1 Colores

    Uploaded by

    MILTON MIRANDA

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 13

    Mdulo 1

    En este primero mdulo veremos las mejoras que CSS3 ha incorporado en relacin a los siguientes temas:

    Colores Colores RGBA Colores HLSA Transparencias Degradado Lineal Degradado Radial Imgenes Mltiples Imgenes de fondo Posicin de la Imagen de Fondo Tamao de Imagen de Fondo Textos Recorte de Palabras Multi-Columna Fuentes Externas (@font-face)

    Colores
    CSS3 hay incorporado grandes mejoras en la manipulacin de colores ya sea en su codificacin, generacin de degradados y transparencias. Aqu las nuevas mejoras:

    Colores RGBA Colores HSLA Transparencias Degradados Degradados Lineales Degradados Radiales

    Colores RGBA
    Los colores en HTML y CSS se expresan normalmente en nmeros hexadeximales combinados. (ej: #ff22aa) Este numero hexadecimal esta compuesto por 3 numeros haxadecimales de 2 cifras cada uno, los cuales identifican a los3 valores de RGB (rojo, verde y azul) El CSS3 trae una nueva notacin de colores llamada RGBA, cuyos 3 tres primeros valores son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parmetro es el canal Alpha, quesera el grado de transparencia u opacidad del color. Este canal Alpha puede adoptar un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco. (ej: 0,5 = transparente al 50%) Los archivos grafia que soportan transparencia, como el PNG, utilizan el mismo concepto de canal alpha para representar la opacidad. Entonces, por medio de los colores en RGBA en CSS 3, se pueden aplicar nuevas transparencias a los colores que especificamos con CSS, sin necesidad de utilizar imagenes para lograr este efecto. (Lamentablemente no es compatible con IE7) Notacin de color RGBA

    Para definir un color RGBA, se deben especificar cuatro valores, de la siguiente manera:

    ? rgba(255, 125, 0, 0.5); Los tres primeros valores

    son nmeros decimales, y corresponden a los valores de rojo, verde y azul. Siempre son entre 0 y 255. El cuarto valor es un nmero entre 0 y 1. Por ejemplo 0 sera totalmente transparente, 1 sera totalmente opaco y 0.5 sera una transparencia al 50%, es decir, mitad opaco mitad transparente. Ejemplo de transparencia con RGBA Aqui un ejemplo de aplicacin de colores con transparencia. He creado un div grande con fondo rojo, y dentro uno mas pequeo con fondo amarillo y 50% de opacidad, por lo tanto al mezclarse con el rojo de fondo, se ve naranja.

    Cdigo del ejemplo:

    ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Colores en RGBA</title> <style type="text/css"> #ppal { height: 500px; width: 500px; background-color: #F00; } #interior { height: 200px; background-color: rgba(255,255,0,0.5); padding: 0px; margin: 20px; } </style> </head> <body> <div id="ppal"> Div con fondo rojo al 100% <div id="interior">Div con fondo amarillo al 50%</div> </div> </body> </html>

    Colores HSLA

    As como CSS3 soporta el uso de los colores RGBA y el ya conocido hexadecimal, tambin se introduce el modelo de colores HSLA: tono, saturacin, brillo, canal alpha (opacidad) Los colores HSL poseen tres valores: - Hue (tono) es un grado en la rueda de color, 0 cero (o 360) es de color rojo, 120 es de color verde, 240 es de color azul. Y los nmeros entre ellos reflejan diferentes tonalidades. - La saturacin es un valor porcentual, el 100% es el color pleno, y 0 es totalmente desaturado. - La brillo es tambin un porcentaje, 0% (negro), 100% es la luz (blanco), y el 50% es la mitad. - El canal alpha funciona igual que en el modelo RGBA, puede adoptar un valor entre cero y uno, siendo 0 (cero) totalmente transparente y 1 totalmente opaco. (ej: 0,5 = transparente al 50%)

    Ejemplo de implementacin del Cdigo CSS3: ? 1background-color: hsl(240,50%,20%, 0.5); En este caso, aplicamos un color de fondo con un matiz de 240 (azul), una saturacin del 50%, un brillo del 20% y una transparencia tambin del 50% El valor tono puede tomar valores del 0 al 360:

    0, sera el rojo. 120, sera el verde. 240, sera el azul.

    360, volvera a ser rojo.

    Hasta el momento, HSLA ha sido implementado en Opera 9.5, Safari 3, Firefox 3, Konqueror y navegadores Mozilla.

    Transparencias (opacity)
    Una de las propiedades ms utilizadas del CSS3 es la propiedad para definir la transparencia de un objeto. Esta propiedad de llama opacity. Veamos 2 ejemplos.

    Estos son 2 grupos de 5 divs apilados donde a los primeros 5 le aplicamos el mismo color rojo con diferentes opacidades configuradas con la propiedad opacity: ?
    <div style=" background: rgb(255, 0, 0) height:30px">Div 1</div> <div style=" background: rgb(255, 0, 0) height:30px">Div 2</div> <div style=" background: rgb(255, 0, 0) height:30px">Div 3</div> <div style=" background: rgb(255, 0, 0) height:30px">Div 4</div> <div style="background: rgb(255, 0, 0); 5</div> ; opacity: 0.2; ; opacity: 0.4; ; opacity: 0.6; ; opacity: 0.8; opacity: 1; height:30px">Div

    De esta forma hacemos que todo el contenido del div vaya tomando transparencia.

    Y al segundo grupo de divs, le aplicamos el color directo generado con el modelo RGB sin utilizar opacity, con lo cual, vemos que el texto interior es siempre negro ya que tiene siempre la misma opacidad (al 100%) ?
    <div <div <div <div <div style=" style=" style=" style=" style=" background: background: background: background: background: rgb(243, rgb(246, rgb(249, rgb(252, rgb(255, 191, 189); height:30px">Div 1</div> 143, 142); height:30px">Div 2</div> 95 , 94); height:30px">Div 3</div> 47, 47); height:30px">Div 4</div> 0, 0); height:30px">Div 5</div>

    Degradado lineal
    Los degradados lineales son aquellos en los que se va de un color a otro de forma lineal, ya sea de arriba hacia abajo o de izquierda a derecha y viceversa. En CSS3, los degradados lineares se consiguen con el atributo background asignndole el gradiente con la propiedad linear-gradient, y especificando entre parntesis, el cdigo de color del comienzo y del final del degrad. ? 1background: linear-gradient(color del comienzo, color del final); Antes de linear-gradient, se le especificar el navegador web seleccionado. En este caso hemos especificado el IE, Firefox y Opera. En el suguiente ejemplo, contruimos un DIV con un degradado de arriba hacia abajo, de rojo a verde.

    Le asignamos tambin un ancho de 600 px y un alto de 150. Cdigo CSS: ?


    #caja { height: 150px;

    width: 600px; background: -webkit-linear-gradient(#F00, #0F0); background: -moz-linear-gradient(#F00, #0F0); background: -o-linear-gradient(#F00, #0F0);

    Cdigo HTML: ?
    <div id="caja">Desgradado lineal</div>

    Degradados lineales oblicuos Como dijimos anteriormente, el primer parmetro sera el origen desde donde comenzar el degradado pero tambin puede ser el angulo de disposicin del gradiente de color. Por ejemplo, podriamos decir que el degradado comience desde arriba, abajo o desde una esquina cualquiera. Por defecto los degradados sern realizados en un gradiente en lnea recta, pero adems podemos indicar un ngulo distinto con el que se vaya produciendo el gradiente de color. Por ejemplo: ?
    background: -moz-linear-gradient(120deg, #F00, #0F0);

    En este ejemplo para Firefox, anteponemos a los codigos de colores, el angulo con el que queremos que se represente el degrad.

    Paradas de Color El siguiente degradado tiene lo que se llama un color stop (parada de color), que est asignada con el 50% en el primer color. Esto significa que el primer color estara homogeneo (sin degradado) hasta el 50% del tamao del elemento y que luego comenzara a degradarse hacia el segundo color. (las paradas de color tambien se pueden expresar en pixeles) ?

    background: -moz-linear-gradient(#F00 50%, #0F0);

    Degrades con varios colores Podemos definir un degrad que contenga la cantidad de colores que querramos. Esto lo logramos, agregando los cdigo de colores separados por comas. ?
    background: -moz-linear-gradient(#F00 , #0F0, #00F);

    Degrades con repeticin Podemos definir que dentro de un elemento, se repita un mismo degrad indefinidamente. Esto lo hacemos utilizando la repeating-linear-gradient. En este ejemplo, el segundo color tiene una parada al 25%. Eso quiere decir que se llegar al verde en el primer 25% del espacio del elemento y que a partir de ese punto comenzar de nuevo el degradado. El segundo degradado ocupar otro 25% de la imagen y entonces se volver a repetir. Por tanto, en la prctica veremos que este degradado de rojo a verde se repetir 4 veces en el fondo del elemento donde lo coloquemos. ?
    background: -moz-repeating-linear-gradient(#f00, #0f0 25%);

    Solucin para Internet Explorer Los navegadores IE anteriores a la version de IE10 utilizan su propiedad filter que incluye propiedades para degradados. En la sintaxis solo hay que definir un color de inicio, otro de finalizacin y la orientacin. /* IE 6 y 7 */ ?
    filter:

    1progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000',
    endColorstr='#77ff0000', gradientType='1');

    /* IE 8 y 9 */ ? 1"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000'
    , endColorstr='#77ff0000', gradientType='1')"; -ms-filter:

    /* IE 10 */ ? 1background: -ms-linear-background(top, black, white); El valor de los colores utiliza una sintaxis ARGB hexadecimal donde el primer par es el valor alfa del color, del 00 transparente al ff opaco. El grandientType se usa para definir si el degradado ser horizontal (1) o vertical (0). No existe degradado radial para IE anterior al 10.

    Degradado Radial
    Los degradados radiales son los que forman diseos circulares, con una distribucin radial uniforme, o degradados en elipse, con una distribucin radial variable. En CSS3 los degradados radiales se obtienen travs del atributo radial-gradient. Mediante la aplicacin de distintos parmetros, obtendremos diferentes variantes. Su definicin es muy parecida a la de los degradados lineales, aunque en este caso tendremos algunos otros parmetros a tener en cuenta.

    La sintaxis CSS sera la siguiente: ?


    background: radial-gradient(parmetros);

    O bien: ?
    background-image: radial-gradient(parmetros);

    La potencia de esta herramientas est en los parmetros de la declaracin radialgradient(). Sin embargo la mayora de los parmetros son opcionales, por lo que podemos hacer degradados radiales bastante simples, que tomarn parmetros por defecto. Sencillamente lo nico que necesitaremos es definir dos o ms colores para realizar el gradiente de color. El listado de parmetros es el siguiente: A) Posicin inicial del gradiente circular: Los degradados radiales comienzan en un punto cualquiera de un elemento y se extienden hacia fuera de ese punto con formas circulares o de elipse. Este punto se especifica con una o dos coordenadas. Si se omite, el degradado comenzar en el punto central del fondo del elemento. B) Forma y/o tamao: La forma del degradado puede ser circular o elipse, y esto lo especificamos con las palabras circle o ellipse. El tamao lo expresamos con otras palabras, que indican hasta donde debe crecer el crculo o elipse: closest-side | el crculo o elipse debe crecer hasta el lado ms cercano. closest-corner | debe crecer hasta la esquina ms cercana. farthest-side | debe crecer hasta el lado ms lejano. farthest-corner | debe crecer hasta la esquina ms lejana. contain | es igual a closest-side cover | es igual a farthest-corner Alternativa a B) Tamao: Hay otra forma de definir la forma y dimensin del degradado pudiendo indicar un par de medidas en cualquier unidad CSS o porcentajes. Esas medidas se utilizaran para generar un crculo o una elipse del tamao deseado para nuestro gradiente.

    La medida inicial sera la anchura de la elipse y la segunda sera para la altura (si ambas son iguales se mostrara una forma circular en el degradado. Si son distintas, sera una elipse. El tamao debe ser siempre positivo. C) Colores del degradado: Los colores del degradado van separados por comas, con la posibilidad de indicar las paradas de color que se deseen. Recordemos que hay que anteponer a radial-gradient, el prefijo de los navegadores: moz- (Firefox), -webkit- (Chrome), -o- (Opera)

    EJEMPLOS: En los siguientes ejemplos utilizaremos el prefijo para Firefox. Ejemplo 1:

    background: -moz-radial-gradient(circle, #F00, #0F0);

    Esto realiza un degradado desde el rojo al verde, con todos los otros parmetros predeterminados. Hara un gradiente de forma circular, con su punto de inicio en el centro del elemento en rojo, haciendo que se llegase al verde en los bordes del elemento. Ejemplo 2:

    background: -moz-radial-gradient(top left, #F00, #0F0);

    Aqu se define el punto de inicio del gradiente con top left, o sea, en la esquina superior izquierda en rojo y el degradado tendra forma circular tendiendo hacia verde, ocupando el 100% del elemento. Ejemplo 3:

    ?
    background: -moz-radial-gradient(200px 30px, #F00, #0F0);

    Aqu tambin se especifica la posicin inicial del gradiente, pero lo hace mediante las coordenadas definidas con medidas en pxeles. Es circular y ocupa el 100% del espacio disponible en el elemento. Ejemplo 4:

    background: -moz-radial-gradient(center, #F00, #0F0 50%);

    Aqu declaramos la posicin inicial con center, que coloca el inicio del degradado en centro, tanto vertical como horizontal. El detalle es que el degradado se realiza desde el centro hasta el 50% del tamao del elemento, ya que le hemos indicado una parada de color (color stop) de 50% en el ltimo color. Solucin para Internet Explorer (versiones antiguas) La solucin para IE es utilizar un filtro propietario del mismo navegador pero que no soporta degrade radial entre 2 colores, sino que realiza un degrade desde el centro con un color, hacia los bordes llevando a transparente ese mismo color. El cdigo CSS para IE es:

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2);

    Donde: opacity | indica la opacidad o transparencia del color del centro finishopacity | indica la opacidad del color en los bordes style | 2=degradado radial, 1=lineal, 3=cuadrado tipo estrella

    You might also like