• Author / Uploaded
• Gustavo Rafael Yunis Serran

Citation preview

UNIVERSIDAD NACIONAL DE RÍO NEGRO

CSS3 Presentación de proyecto de Software

Grupo cuatro

Maria Ines Caso Rafael Yunis Serran Ezequiel Mella

Introducción El lenguaje html esta limitado a la hr de darle forma a un documento, esto es asi porque fue concebido para otros usos. para solucionar estos problemas, los diseñadores han utilizado diferentes técnicas, que han causado problemas en las paginas a la hr de su visualización en distintas plataformas. Además, los diseñadores, se han visto frustrados por la dificultad a la hora de maquetar las paginas. finalmente otro antecedente que ah hecho necesario el desarrollo de esta tecnología, es que en la web, se mezcla el código html con las etiquetas para darles forma y la lectura del código se hace pesada y difícil a la hr de depurar las paginas. es un problema que estos textos estén mezclados con las etiquetas para dar forma a estos. Existen varias versiones: CSS1, CSS2 y CSS3 todavia en desarrollo DESARROLLO a. Definición de la tecnología CSS son las siglas de Cascading Style Sheet (Hojas de Estilo en Cascada), que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo, para diferentes métodos de interpretación, es decir, describe como se va mostrar un documento en pantalla, por impresora, por voz o en dispositivos táctiles basados en Braille. CSS es una especificación desarrollada por al W3C para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, CVS o XUL de la presentación del documento con las hojas de estilo, incluyendo elementos tales como colores, fondos, márgenes, bordes, tipos de letra… modificando asi la apariencia de una pagina web de una forma mas sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos. El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados y que forman las sintaxis de las hojas de estilos. Cada regla consiste en un selector y una declaración, esta ultima va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos METAS DE LA BUENA ARQUITECTURA CSS: Predescible: significa que tus reglas se comportan como tu esperarías Reutilizable: las reglas deberían ser abstractas y estar suficientemente desacopladas a la hr de construir rápidamente nuevos componentes en partes ya establecidas Estable: cuando nuevos componentes y capacidades necesitan ser añadidas, actualizadas o reiniciadas en tu sitio, esto no debería requerir modificar demasiado el css existente

Escalable: cuando el sitio crece y se vuelve mas complejo, requiere mayor mantenimiento, css escalable significa que puede ser fácilmente administrado por una persona, y que la arquitectura css es accesible sin requerir un gran nivel de aprendizaje b. Comparacion con versiónes anteriores CSS se ha creado en varios niveles y perfiles, cada nivel se construye sobre el anterior, y generalmente añadiendo funciones al previo: CSS1: la primera especificación oficial de CSS recomendada por la W3C, publicada de 1996. Algunas de las funcionalidades que ofrece son: 

Propiedades de las Fuentes, como tipo, tamaño, énfasis



Color de texto, fondos, bordes y otros elementos



Atributos del texto, como espaciado entre palabras, letras, líneas, etc



Alineación de textos, imágenes, tabla u otros



Propiedades de caja, como margen, borde, relleno o espaciado



Propiedades de identificación y presentación de listas

CSS2: lanzada en mayo de 1998 y actualizada en abril de 2008, como ampliación de CSS1 

Las funcionalidades propiedas de las capas () como de posicionamiento relativoabsoluto-fijo, niveles (z-index), etc



El concepto de “media types”



Soporte para las hojas de estilo auditivas



Texto bidireccional, sombras, etc

CSS2.1: corrige algunos errores encontrados en CSS2, elimina funcionalidades poco soportadas o inoperables en los navegadores y añade alguna nueva especificación En abril de 2011, CSS2.1 volvio a ser revisada por el W3C y fue finalmente publicada como versión oficial el 7 de junio de 2011 CSS3: a diferencia de CSS2 que fue una gran especificación que definia varias funcionalidades, CSS3 esta dividida en varios documentos separados, llamados modulos. Cada modulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad. Los trabajos y primeros borradores de CSS3 fueron liberados en 1999, debido a la modularizacion de CSS3, diferentes modulos pueden encontrarse en diferentes estados de su desarrollo

Nuevas Funcionalidades Fondos múltiples Css 3 nos permite especificar fondos múltiples separados en capas usando una simple lista de fondos y propiedades separados por coma. El primer valor que aparece en la lista se corresponde a la capa más alta de la composición, el último valor a la más baja. Código de Ejemplo: #paisaje { background: url("../img/domog.png") center bottom no-repeat, url("../img/paisaje.jpg") left }

Text-Shadow La propiedad text-shadow, nos brinda la posibilidad de establecer una sombra ajustada a los propios caracteres de un texto. Sintaxis:

Elemento { text-shadow: desplazamientoX desplazamientoY radio-de-desenfoque color; } La propiedad tiene 4 valores que son los siguientes:    

El desplazamiento horizontal de la sombra, estableciendo un valor negativo la sombra se ubicara a la izquierda del texto, mientras que un valor positivo pondrá la sombra a la derecha. El desplazamiento vertical controla el posicionamiento de la sombra en la parte superior o inferior del texto. Un valor negativo dispone la sombra en la parte superior y un valor positivo pondrá la sombra por debajo del texto. El tercer parámetro es el radio de desenfoque, si se pone a 0 la sombra será fuerte y con color liso, cuanto más grande sea este parámetro, más borrosa será la sombra. El último parámetro es el color de la sombra.

Código de Ejemplo: h3{ font-family: "Book Antiqua"; font-size: 45px; font-weight: bold; color: #000000; text-decoration: underline; text-shadow: #6374AB 20px -12px 2px; }

Box-shadow Otra propiedad interesante a destacar es con la cual podemos establecer tanto sombras externas como internas a los elementos. Esta propiedad puede contener hasta 5 parametros: el desplazamiento horizontal, el vertical, el radio de desenfoque, el radio de dispersión y el color de la sombra. Tambien existe un parámetro mas que es opcional y que permite indicar que la sombra se ubique en el interior del elemento, si este parámetro INSET no se incluye en la sintaxis la sombra se aplicara al exterior del elemento. Sintaxis: Elemento { box-shadow: desplazamientoX desplazamientoY radio-de-desenfoque color; }     

El desplazamientoX define la posición horizontal de la sombra respecto al elemento al que se la aplicamos. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda. El desplazamientoY define la posición vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba. Radio de desenfoque: cuanto mayor sea más transparente será la sombra. Se trata de un valor opcional y valor por defecto es 0. Radio de dispersión: controla la dispersión de la sombra cuanto mayor sea este valor, mayor dispersión, su valor por defecto es 0. Por último debemos establecer el color de la sombra.

Código de Ejemplo: #caja2{ float: left; padding:5px; box-shadow: 0px 0px 30px #A3FF0F; border: 1px solid #66ff00; color: #FFFFFF; margin-left:40px; } Animations Con css3, se pueden crear animaciones que reemplacen a las imágenes animadas, animaciones Flash y de JavaScript, además de otras animaciones web. Se define un estilo que describe la animación CSS y un conjunto de fotogramas clave que indican el cominezo y estados de estilo de la animación final, asi como la posible animación intermedia de puntos en el camino. La propiedad “animación” se setea bajo las siguientes sub-propiedades: 

animation-delay: Permite configurar el retardo entre el momento en que se carga el elemento y el comienzo de la secuencia de animación.



animation-direction: Configura si la animación debe alternar la dirección de cada carrera a través de la secuencia o restablecer el punto de inicio y repita.



animation-duration: Configura la cantidad de tiempo que una animación se tarda en completar un ciclo.



animation-iteration-count: Configura el número de veces que la animación se repita, puede especificar infinita para repetir la animación de forma indefinida.



animation-name: Especifica el nombre de los @keyframes en la regla de que describen los fotogramas clave de la animación.



animation-play-state: Permite pausar y reanudar la secuencia de animación.



animation-timing-function: Configura la sincronización de la animación, es decir, cómo las transiciones de animación a través de fotogramas clave, mediante el establecimiento de curvas de aceleración.

Ejemplo 1: Se define tres segundos hasta que inicia la animación. Se repite de forma indefinida h1 { animation-duration: 3s; Se definen tres segundos hasta que inicia la animacion animation-name: slidein; Se define la animación como conjunto de estilos @keyframes animation-iteration-count: infinite; Se repite continuamente animation-direction: alternate; Se define el recorrido de la animacion de adelante hacia atras y viceversa. } @keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%; } } CSS3 Filtros La propiedad filter en CSS3 Esta propiedad afecta a cualquier elemento, ya sea texto, imagen o video. Dentro de filter podemos añadir uno o varios filtros que existen para esta propiedad, sin un máximo, simplemente separándolos por espacios.

Estos son los distintos tipos de filtros que podemos usar con nuestras imágenes o con cualquier elemento de nuestra página. Vale aclarar que podemos darle todo tipo de valores intermedios, por ejemplo: 0 / 0.5 / 1. Blur (desenfoque). filter: blur(0px); /* Sin desenfoque */ filter: blur(5px); /* 5px de desenfoque */ Grayscale (escala de grises) filter: grayscale(0); /* Color */ filter: grayscale(0.5); /* 50% color */ filter: grayscale(1); /* Blanco y negro */ Sepia (sepia) filter: sepia(0); /* Normal */ filter: sepia(0.5); /* 50% sepia */ filter: sepia(1); /* Sepia */ Brightness (brillo) filter: brightness(0); /* Normal */ filter: brightness(0.5); /* Imagen clara */ filter: brightness(1); /* Blanco */ Contrast (contraste) filter: contrast(0); /* Bajo contraste (gris) */ filter: contrast(1); /* Normal */ filter: contrast(10); /* Alto contraste */ Hue-rotate (rotar matriz de color) filter: hue-rotate(0deg); /* Normal */ filter: hue-rotate(180deg); /* Rotar la matriz 180 grados */ filter: hue-rotate(270deg); /* Rotar la matriz 270 grados */ Invert (invertir) filter: invert(0); /* Normal */ filter: invert(0.5); /* Gris */ filter: invert(1); /* Color invertido */ Saturate (saturación) filter: saturate(0); /* Sin color */ filter: saturate(1); /* Normal */ filter: saturate(10); /* Alta saturación */ Opacity (opacidad) filter: opacity(0); /* Transparente */ filter: opacity(0.5); /* 50% transparente */ filter: opacity(1); /* Normal */

Word_wrap A veces necesitamos mostrar cadenas de texto extremadamente largas encerradas en algún contenedor , como puede ser la etiqueta DIV, pero nos encontramos con el problema de que sobrepasa la caja que lo contiene. Para solucionar este problema, CSS3 incorpora la propiedad WORD_RAP con la cual podemos indicar que el texto continúe en el próximo renglón, sin tener que agregar un salto de línea.

word-wrap: break-word;

Texto en Columnas: Para crear una estructura multicolumna se utilizan varios atributos, que sirven para modelizar las columnas. Las opciones disponibles para las columnas son: column-count: Cantidad de columnas. column-gap: Espacio entre columnas. column-rule: Línea entre columnas. Se escribe como un borde: 1px solid #000; column-width: Ancho de cada columna. Código de ejemplo: #columna { column-count: 3; column-gap: 20px; column-rule: 1px solid #fff ; }

Transición: En la nueva especificación de CSS3 se incluye la posibilidad de definir transiciones entre propiedades de 2 objetos, de forma análoga a como se definen transiciones en programas de animación. Sintaxis: transition-property: propiedad | all;

transition-duration: tiempo; transition-timing-function: linear|ease|ease-in|ease-out|ease-in-

Indica una determinada propiedad, por ejemplo "width" ó al definir "all" que se aplica la transición a todas la propiedades Define el tiempo que tardara la transición. Define que función de tiempo se usara para la transición.

out|cubic-bezier(n,n,n,n);

    

transition-delay: retardo;

lineal: la velocidad de animación será constante. ease: la animación comienza a acelerar, después constante y luego desacelera al final. ease-in: Acelera al comienzo hasta llegar al final. ease-out: Comienzo con aceleración máxima y Des-acelera a medida que llega al final. cubic-bezier(n,n,n,n): Permite definir los parámetros de la función de tiempo basada en 4 parámetros (cuatro puntos de una curva bezier). Por ejemplo al definir la función "ease" es equivalente a cubic-bezier(0.25,0.1,0.25,1).

Define el tiempo de retardo antes de comenzar la transición.

Ejemplo: div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; } Multiples cambios Es posible definir varias transiciones, cada una con son propios parámetros. div { transition: width 2s, height 2s, transform 2s; }

Border Radius

La propiedad CSS que nos permite redondear los elementos de nuestras páginas mediante CSS. Aunque la propiedad aún no está completamente integrada en los navegadores actuales. border-top-left-radius: 25px; border-top-right-radius: 30px; border-bottom-right-radius: 50px; border-bottom-left-radius: 5px; Usando librerias (compatibilidad): -webkit-border-top-left-radius: 25px; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-right-radius: 50px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 25px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 50px; -moz-border-radius-bottomleft: 5px; Ejemplo interactivo: http://border-radius.com/

Modelos RGBA, HSL y HSLA En esta nueva especificación se añade un control mas en el modelo RGB ya existente en la version de CSS2, este nuevo parámetro define la transparencia en un objecto. background-color: rgba(R,G,B,A); background-color: rgba(125,255,0,0.4); Con A=0 elemento será totalmente transparente, y con A=1 el elemento sera completamente opaco. CSS3 añade además un nuevo modelo de color conocido como HSL. Estas siglas provienen del inglés Hue, Saturation, Ligthness o lo que es lo mismo, tono, saturación y brillo. La principal ventaja de este modelo es que la elección del color es mas intuitiva para los usuarios, como se puede ver en los editores de imágenes en los cuales se utiliza en forma visual este modelo.

Sintaxis: background-color: hsl(360,100%,20%); 0=Rojo , 120=Verde, 40=Azul, 360=Rojo. con canal alpha: hsla(300,130%,65%,10%);

Transformaciones Con esta nueva característica es posible cambiar la forma y posición de objetos. Sintaxis transform: tipo(cantidad); Ejemplos: transform: translate(150px, 45px);

none Define que no hay transformación. matrix(n,n,n,n,n,n) Transformación 2D usando parámetros. matrix3d Transformación, usando una matriz 4x4 de 16 valores (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) translate(x,y) Define una Traslación 2D translate3d(x,y,z) Define una Traslación 3D

translateX(x) translateY(y) translateZ(z) scale(x,y) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z) rotate(angle) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle) skew(x-angle,y-angle) skewX(angle) skewY(angle) perspective(n)

Define solo una traslación en el eje X Define solo una traslación en el eje Y Define solo una traslación en el eje Z Defines una transformación de escala en 2D. Defines una transformación de escala en 3D. Defines una transformación de escala en 2D en el eje X Defines una transformación de escala en 2D en el eje Y Defines una transformación de escala en 2D en el eje Y Defines una transformación de escala en 2D en el eje Z Define una rotación en 3D. Define una rotación en 3D en el eje X. Define una rotación en 3D en el eje Y. Define una rotación en 3D en el eje Z. Define una transformación 2D de sesgo. Define una transformación 2D de sesgo en el eje X. Define una transformación 2D de sesgo en el eje Y. Define una vista de perspectiva para un elemento transformado en 3D.

http://www.w3schools.com/cssref/css3_pr_transform.asp https://developer.mozilla.org/es/docs/CSS/Using_CSS_transforms