Feed CURSO VISUALY PRACTICO {Q CSS avanzado Elemento table \ Bordes, fondos y gradientes \ Animaciones \ Fuentes web BO Sgit mover(BES S5FF curso Visual Y PRACTICO Direccion Edioial ——_Atancién a eetr, Miguel Lodertremer —_suseripeionasy ventas aie usershop@redusers com rs 454011) 4110-8700 Nv +52-58-8821-9560 Publicidad [email protected] Produecion grafiea —*54/011/41108700 Gustavo De Matteo Fernando jam ‘ator Fernando Luna WEB Full Stack oY Tated ICM icedsnecice| backend tinue Argenta Cp Von vw ch ste SA. Pe 9108 io Bare a el 44714506 96408 er Dec ‘altplnas Si NP sSie Pea 1:2) SSM, Ben Awe 5801 4806-0114 Mea DF kre itacaSA dC, hte? Ieee ache Pada a Gt, S668 Men ler Coup situs depts bes is SA CV Cero W 58D Cl Gras Mic, Deeps: IAC) Ds eal (ono Tel 5128-3670. ane Cebu Skea SA, fF Para E35 pa 2a ee Lr StT 1290 rem 21 ray Ea SAL, Prey 102, engi re 280 90765 Vesa Der bs Canta Boe Aas Eo Bo oe as 399° SN. cue co al La Pa Caas, 8212-4640. Go veal racics Sie Ten, st wz; Fox oa S16 w Novore do 1880, 1890, CTSOBE, Gund Auipona do Bucs Aves. Arr Fata Wain mgt © WANA. 255-85 Ts cos enact pb rapes nen par in mato.emel pas pep oe (sacar re sume esa ara iy cle crac eta deacon yo ain els nics yas es Ee, nano pct at aa ns ean pnb Mss ab eee Se, UE le TP SERS ON on EN nn SRS. (ase 225 ya, un aa, Ac, 10 CSS avanzado GM Elemento table GIB Fundamentos de CSS3 I Transformaciones CSS: IE Transiciones CSS IE Animaciones CSS We basa HID) Fuentes web iB] Integrando CSS: Usersgram CONTENIDO ADICIONAL ONLINE taf Merete ‘DEFINALIZACIO R Codigo fuente, igiisielsioe elementos grificos utlizados en los ejemplos y otros contenidos adicionales se pueden descargar en redusers.com/u/programadorweb 011-4110-8700 | USERSHOP.REDUSERS.COM TE SRE the tsk coo]Elemento table Un jugador con un importantisimo papel durante el nacimiento de la Web, y un ocaso impensado durante el impulso de Flash Player y la potencia de los divs vuelve a renacer gracias al actual estndar impuesto por el disefio responsivo: las tablas. El elemento table juega un papel fundamental dentro de HTML, y de la mano de CSS, nos permite establecer cientos de combinactones, {que posibilitan la mejora de su estétiea base y el ‘ordenamiento éptima de los diferentes elementos en pantalla que conforman un documento HTML. Aplicar el elemento table en una pagina web nos permite estructurar datos basados en textos, imagenes, y por ‘qué no multimedia, de una forma itil y prolija El elemento table est compuesto por elementos individuales que terminan conformando la tabla como a EN ESTA CLASE. Durante mas de la mitad de las clases que hemos visto hasta aqui, hemos aprendido que CSS es el estandar de facto para aplicar la estética nocesaria on un sitio web, y que este debe ‘contener un look and feel acorde con la imagen del produoto ode la empresa que representa. En esta nueva entroga relacionada con CSS, aprenderemos. los conceptas de este lenguaje de etiquetas, ‘enfocado completamente al disefio estético, y repasaremos los principales puntos que patencien ‘4 C853, el dltimo estindar definide como un potente lenguaje de marcado que aporta un valor agregado significante on of mundo del diseno web. un todo, Veamos en la Tabla 01 cudles son. ELEMEN Een a Es el elemento que constituye el perimetro,o estructura basica en de cada tabla, he Table head es el elemento celda correspondiente al enca- eee berado de cada tabla Table row:es el slemento que permite agrupar un contenido tr de celdas individuales, tanto pare los encabezados como para el . .. resto de las las dela tabla ta Table def. corresponde al elemento clda que conforms una table . . Los elementos y son hijos del clomento , por lo cual debemnas definirias solo dentro de este dtimo elemento. A su vee, el elemento es hijo del elomento . Los elementos «/tr>, con el contenido de un nuevo libro, su ddescripcin y su hipervinculo. Esto lo haremos cuantas veces necesitemos agregar una nueva fila con datos de un libro. Veamas a través dol Grafica 01, e6mo serfa una tabla, sus celdas de encabezado, las celdas de contenido yas filas generadas por cada dato representado en esta, Esty order no sgt pica mien dean are Fperelowls—eldocente. Esteve tenelaintereon ce ser espacio de nluseisgaseduses comarteenloia: Spee wine snes epookinsnedacosctele Sean eens - Eater et pena paral on tebe, Ceara 0 Fromamscion Gaaalaccrenel sesso fasalagersonjegotncera” iment aie comacranacion aa, nsiments pasate eporers siacomvndes mangle Seviesuaie manta videojuegos Faciuso generar ingrescs. Estey et gio a oo ages qe quran ncrsonar tl caso ca apcacenes ara csposves andi frinaremos svcd Suey epensremes sears , . Andros use au old components sesrolan yess pans aparo A ravs de - aes Jexalicaciones sencilas y ejemplos, podremos desarroiar_ seeded Spiess prs amaotones abe Toes wipes y rant a “oem dirigide 0... “e ee Grafica 01, Representacion de una tabla en modo grafico y sus elementos correspondientes. ESTRUCTURA DE UNA TABLA Debemos ver las tablas como una hoja de Excel, donde disponemos de encabezados de columnas, celdas,yfilas. Cada elemento , estas conformaran una fila completa, Clase 10181 CSS avanzadoLa estructura que armamos es de una tabla de tres columnas, La primera de ellas contend et nombre de un libro; la segunda, una deseripeién del contenido, y la tercera un hipervinculo hacia la web del libro, Completemos nosotros mismos los datos correspondientes a cada fila con la informacién que nos interese visualizar. CSS para estilizar las tablas body { font-family: Arial, Verdana; font-size: 11; ) table { border-collapse: collapse; width: 1008; ) th, ta ( text-align: left: padding: 8px; trinth-child(odd) (background-color: #£2£2£2} thf background-color: mediunsiateblue; waite color: Como podemos ver en el cédigo expuesto, cada elemento ‘que conforma una tabla (

y	pueden contener textos, mégenas, hipervincules, entre otros, y a su vez, ‘estos pueden contener un estilo especifico, como ser: negrita,cursiva, subrayado, bordes, etcétera ‘Tabla U1, Componentes principales de las tablas HTML. Imagen Ejemplo de elemento table, solo con HTML yasuderecha, ‘el mismo elemento le, con propiedades CSS aplicadas. REDUSERS Ei PROGRAMADOR WEB Full Stack aCuando construimas una tabla en HTML, debemos anidar ‘muy bien los elementos que la componen para, de esta ‘manera, pader visualizar correctamente su contenido, ‘Veamos el eédigo HTML para una tabla basica titule del Libro bibro Deseripcisoacutesns/th> Una descripeién del contenido del Libro en cuestion... dipervinculo hacia la pagina web del Libso ‘Antes de cerrarel elemento table, debemos repetir el iltimo bloque
conforma una celda,y agrupados dentro del elemento

,

,	) puede contener diferentes estilos, como color de fondo, color de texto, color de celda, ancho, hordes, alineacién de cantenida, entre atros tantos, Todos los estilos CSS que fuimos aplicando en otros elementos HTML, en las Clases 03 y 04 de esta obra, pueden aplicarse sin, problema sobre los componentes del elemento table, Si aplicamos este estilo CSS nuestra tabla ya disenada, conseguiremos visualizat un resultado similar al reflejado en la Imagen 01 de la pagina anterior. Estilo Horizontal dividers th, td { border-bottom: 2px solid #ddd; Este estilo, muy utilizado en tablas simples que no poseen abundante contenido, se especifica en los elementos	y	, Nos permite aplicar una linea horizontal justo debajo de cada fila que contiene nuestra tabla, De esta manera, solo reflejamos la visualizacién del borde inferior (bottom), de cada elemento, pensando cada fila de la tabla como un rectngulo. REDUSERS Ei PROGRAMADOR WEB Full Stack a‘choca Sen ean none Si, por ejemplo, queremos cambiar el color del borde por visualizar, debemos aplicar el estilo CSS border-color, especificando en el formato que més nos convenga, qué color tendra el borde que se visualice, Limitar el ancho de una tabla table { width: 908; Fl elemento table posee la capacidad de controlar el ancho que tendra una tabla dentro de una pagina web, El ancho minimo expresado en porcentaje es 20%, y el ancho maximo esté limitado al ancho del documento HTML, En este ditimo caso, podrfamos representarlo a través de la propiedad width100%:; El resultado del édigo de arriba se muestra en la Imagen 04. Eltrabajo de estilizar ol contenido de textos ‘através de CSS puede optimizarse de manera ‘grafica aprovechando diferentes herramientas que ‘oxisten en el mercado. Una de ellas es CSS TXT, tun complemento en linea que permit ‘ajustes visuales combinado con una vista previa, ‘obtener un CSS para aplicar a contenido de texto. ‘Su URL es wwwesstxt.com. SS Clase 1018 CSS avanzadoResaltar filas En determinadas ocaslones, podemos encontrarnos con aque generar tablasextensas que requierenvisualizar muchos datos terminan generando una eonfustn al usuario que necesita consulta dicho contenido. enemas dos opciones viables para poder resolver, de una manera agradabl, este inconveniente comin en las tablas: una es utilizanda el seleetarnth-hild, yl otra es aplicando el selector hover. fn ambos casos, debemos apicar cualquiera de estas soluciones ala fila completa de una tabla, para rsaltar su contenido de manera fija (mth-child) o de forma dindesca, cuando el usuaria posicione el cursor del ‘mouse sobre una fila (tr:hover). Veamos a continuacién un ejemplo de cada uno, Selector nth-child tr:nth-child (edd) (background-color: #e2e2£2) Para aplicar este selector, debemos crear una hoja de estilo CSS, aplicar los estilos personalizados para cada elemento de la tabla (table, tr, td), y por dltimo, agregar €1 cédigo de arriba. A través de 61 e indicamos al navegador web que, por cada fila de la tabla (impar even, ‘ par add), se aplique un color de fondo determinado (background-color: #f2F212). Tiere € 0 [0 mevienma Resaltar filas en un: Pranecin os enoee REDUSERS Bi PROGRAMADOR WEB Full Stack | reel FONDO FILAS Conta propiedad nth-child, podemos alterna e color defondo de as files de une tabla, Sitrabejamos ‘con datos dindmicos, provenientes de una base de datos, ynosabemos cudntos registras mostraremos, podemos calculare total de estos, y sobre el resultado aplicarmth-chilo)o th-childleven), ‘asegurandonos e contraste del fondode las las ‘contra el eolor de fondo del encabezado de estas, Selector tr:hover trchover { background-color: coral; color: white; De la misma manera que podemos resaltar hipervinculos con un color diferente cuando posicionamos el mouse sobre estos, es posible destacar contenida de una tabla, como por ejemplo la fila completa, al posicionar el mouse sobre ella. Para eso, utilizamas el digo de arriba, Y por supuesto, si el color elegido de fondo (background color) es muy fuerte o muy oscuro, podemos sumar, dentro de este estilo, una linea més de cédigo para contrastar la fuente seleecionada can un color més claro (color). Podemos ver el resultado en la Imagen 05. Desarrollo web para movies. ee ed eae Enel navegador de fondo a ue ma mm apreciamos la tabla Popaingewachegs ekeslro! 200 inpen- Eis esténdar y, en el navegador ronal wemos cio se Tecnologe digtal para doc Juan Perez ‘2014 Imeresa - Ebook resalta la fila donde se iin o karar 2018 imeso- Ebok posiciona el cursor del mouse.Tabla responsiva overflow-x y overflow-y con valor Por diltimo, una opeién para aplicar en tablas eon mucha auto permitiran crear barras informacién o columnas, que permita visualizarlas en 7 pantallas chicas 0 de resolucién limitada, Para crear un de desplazamiento sobre estilo de disefio responsive répide sobre el contenido de cualquier elemento HTML, tuna tabla, aplicamos un estilo CSS sobre una clase y, ego, para soportar datos extensos cesta sobre un elemento div, que contendra en su interiora la tabla en cuestiin, Por otro lado, debersos contar con una A en pantallas pequefias. tabla de muchas columnas y, para esto, podemos modificar Pi alguna de las ya disefiadas, agregando al menos cinco o sels columnas mas, tanto en el tag . Tabla responsiva, rama ‘are 2%! — comma Cota? Colma’ Cohined Colma Corned Fema eons pane 201 (BE — coum colmna? aumna3 cana oumas Coane ‘Ahora agreguemos wna clase a nuestra hoja de estilos C88 con el siguiente cédigo -divresponsive { overflow-x:auto; d 9 € © © [nesses Overflow-x controla cuando un elemento (aqui, el DIV) queda por afuera del ancho limitado por el documento HTML. Al ocurrir,el valor auto resolverd.este desborde aplicindole una | (a Sar aT barra de desplazamiento.Por dltimo,en el HTML agregamos Sere Nrimalhcorraioo un div por afuera del elemento table y todo su contenido. Tabla responsiva ies aoygifpreso- Cohenna Colmna Colma Colma on Eo ES oe m mando gos !mereso- Cohmmna Colima Cokmna Coksnna i Ebook z mes Utilizamos una imagen determinada aplicada como borde de un Elemento 2, para personalizar el mismo. a Clase 108 CSS avanzadoga PRE CSS SEGUN EL NAVEGADO! Existen diferentes ijos que se deben utilizar en (68S (-meoz,-webkit 0), que invocan la propiedad en cuestion a la que se apli -apropiada segun el motor de browser donde se carga nuestra web, Esto ayuda a prevenirun error enol caso que alguna eos propiedades extendas do CSS no esté implementada dentro de un motor de renderzado. El resultado de este cédigo ser como el de la Imagen 10. La propiedad border-image oficia como atajo ala invacacién de otras propiedades CSS (border-image- source, border-image-slice, border-image-width, border- Jimage-cutset, border-image-repeat). Existen diferentes combinaciones sobre border-Image, que nos ahorrardin el amado a cada una de estas otras propiedades. Multiples imagenes de fondo S83 nos permite combinar mas de una imagen de fondo, yasea en un documento HTML como en un elemento HTML determinado. Hace un tiempo, para el tratamiento de imagenes de fondo, debiamos invocar varias propiedades CSS que terminaran formateando la imagen ‘en cuestidn segiin nuestra necesidad. Ahora, desde CSS3, podemos combinar varias de estas propiedades CSS en la propiedad background. En la imagen anterior, creamos tun documento HTML y una clase CSS, donde invocamos dos imagenes diferentes. Una de ellas fue establecida como fondo general del div en el que se aplica esta clase se repitié a lo largo del elemento. La segunda imagen fue alineada en el extremo inferior-derecho, Sa € > 6 [Om Traba ‘oxen sue dole tet comeceesaiscing et se dam south eso ‘cos ot hoet lr gan agin et eat ‘Loves pom dolor met. eae acing et eda my ed ‘sc toot ole gan sgt et vent Lorem pi alt tat onset ‘Sptecng ta td doe nmtany coed yg sey ‘Talat Loreto er rene: comes abSeRs ‘utd teu het deen ano A REDUSERS Bi PROGRAMADOR WEB Full Stack indo con miltiples imagenes de fondo Himagenesdefondo { background: url(logo _ redusers.png) right bottom no-rey ty uri(ru_logo_ ackground.png) left top rept padding: 15px; } Fondo gradiente Los gradientes en C5S3 permiten establecerfondos de color combinando dos o mis tonos especticos. sto oficla como reemplaze de una imagen de fondo determinada ¥ permite combinar mis de un colar, reduckendo as el ancho de banda que ocupariamos si descargaramos una imagen determinada para tal fin. Dentro de Tos tipos de tonalidadesgradientes que pocemos estabeceren C553, contamos con dos opciones: © Linear-gradient Radial-gradient La primera de estas permite especificar un fondo con degradado de colores lineales, ya sea vertical, horizontal 0 diagonal. La segunda opcién permite establecer un radio determinado, definido por supuesto desde su centro, Veamos un ejemplo de estos. Linear gradient Creemos un documento HTML estindar, donde indliremos un elemento diy, yun elementoh. exo reamos um estilo CSS para dicho documento, eon el siguiente cigo ‘éivgradiente ( J+ Para browsers que no soportan gradiente */ utilizamos la propiedad CSS background, ‘combinando dos imagenesbackground: blue; /* sintaxisestandar */ background: linear-gradient(to bottom right, blue, 1ightblue); height: 400px; width: 100%; ) ar ( font-family: Helvetica;, Verdana, Arial; color: white text-align: center; d Por titimo, establecemos la propiedad id del div, con el nombre divgradiente, y ejecutamos nuestro documento. El resultado debe ser como el de la Imagen 11, La sintaxis to bottomright permite que degrademos el color hacia el extrema inferior derecho, Podemos combinar para esto la orden bottom, top, right y left, de la manera que nos parezca conveniente. Gradiente radial Reemplazamos e| estilo CSS linear gradient por racial- gradient y podremos obtener un fondo degradado en estilo radial, Modifiquemos nuestro cbdigo CSS anterior, quitando la linea linear-gradient(.) y agregando, en su lugar lo siguiente: background: radial-gradient(darkblue, blue, lightbiue 708); En esta sentencia, parametrizamos la propiedad radial- gaint, estableciendo tres colores: darkblue, blue lightblue BOX SHADOW En la Clase 06 de esta coleccién, trabajamos con hox-shadow, aplicando sombras y gradientes ‘sobre imagenes, textos y otros elementos HTML. Esta propiedad pertenece a CSS3,y es muy itil para resaltar con énfasis diferentes elementos html. Tengamos a mano dicha clase para cuando realicemos el ejercicio final de este capitulo. {yen el iltimo de ellos, indicamos que este debe tener tuna transparencia del 70%. La transparencia puede establecerse en uno o todas los calares que definamos dentro de la propiedad lneargradient oradil-gradient, earn et ecw nce Imagen tt, Gradiente lineal que ‘combina color azul y celeste, degradéndose El gradiente de fondos requiere el uso de Los prefijos —moz, ,-0, para poder establecer -webki el comportamiento CSS de acuerdo al navegador web. que combina tres tonalidades dol color establece en Clase 1018 CSS avanzadoTransformaciones CSS Las transformaciones CSS permiten aplicar, sobre elementos HTML, diferentes efectos, cambiando el estado original de estos, Dentro de las efectos que podemos aplicar, destacamos los siguientes: translate, scale, rotate, skew. Veamos, en la Tabla 03, el significado de cada uno de estos métados. Ee Pen ‘transform transform-origin Aplica tansformaciones 20 y 30 sobre un elemento HTML uelve al estado original el elemento HTML transformado. méToDOs matrix(n,n,n,n,n,n) Define una transformacién on 2 dimansionas, usando una matrz de seis valores. Define una raslacién en? dimensiones, maviendo un elemento entre sus ees x ey. Se ‘puede utilizar solo uno de sus ees, invocando al método translateXo translatey. translate(#, y) Escala en dos dimensiones un element, cambianda el ato el ancho de este, Se puede ‘scalar solamente el ancho ol ato, utiizando scalex 0 ecaley, respectivament. scale(x, y) rotate (a°) meres) Tuorce un elemento sobre los ei Rota un elemento hacia un anguiodoterminado en ol parémeto, Esto angulova de 0° 2 360° Xe especificados. Se puede torcer sobre un solo og, ulllzando los métodos skewx 0 skewy. ‘Tabla 03, Métodos para transformar elementos HTML. Efectos y transformaciones CSS Veamos, através de un ej ‘ejemplo rapido de comi ‘transformaciones CSS sobre los elementos HTML de un documento web, Recuperemos nuestro antiguo ejercicio de barra horizontal, realizado en la Clase 04 de este na barra de navegacié horizontal con una serie de botones que ofician de mend, horizontal, de 04, para agre animacién sobre el isologo REDUSERS Ei PROGRAMADOR WEB Full Stack ‘A dicha barra de herramientas, le agregamos un isotogo en su extremo superior izquierdo, tal como si fuese un elemento mas de la lista desordenada, <1i> “rotame” alt="Users Life” Elresultado de esto debe ser al dela Imagen 13 ‘A.continuacién, modificamos el archiva CSS vinculado, agregando al final las siguientes lineas de cédigo: -rotame { transition: transform 1s e: )rotame:hover ( Por otro lado, la propiedad transform leva dos transform: rotate(360deq); ardmetros: el primero es 1s, que indica el tiempo que ) tardaré en ejecutarse el efecto (en este caso, 1 segundo). vel otto, ease-out, que indica el tipo de efecto. Este aplica da. Através de estas lineas, creamos una clase llamada tun giro sobre su eje de derecha a izq -rotame. Esta clase incluye la propiedad transition, que ejecuta la propiedad transform seguida de isease-out. Amagen 8. Lego tenemos un estado diterente para la clase nover, Fjecucion deta ‘que invoca una rotaci6n del elemento en cuestion de 360 Latrassey Sr arados. La propiedad rotate(260" indica qu eect rotara sobre su eje unos 360 grados. litsscands ol siete ut, Imagen 14, Definidas las clases donde se aplicaran los efectos, debemos asegurarnos de que estas se apliquen en cada elemento HTML. Transformaciones 3D Recon pene Para potenctar los efectos aplicables sobre elementos HPML, las transformaciones 3D agregan un eje mis alas transformaciones 20:1 eje. De esta Cd eS manera, no solo podemas madificar el alto o el ancho Imagen 6. de un elemento, también es posible modificar su wplo de rotacion profundidad, gracias a este altima parémetro, sobre eje, modiicando \Veamos la Tabla 04 con ls propiedades y los métodos jeinowen ra eae incline unos 45° sobre we agrogan las transformacion «que agregan las transformaciones 30: enna Eo DESCRIPCION perspective Expects a perspectva através dela cual vrems ls elementos 20 back#ace-visibi1ity Define cuandounelementoha cesar visible (om), cuando este no aparece on pant Mas matrix3d(nja/n/n,n (8, 2,/0,/0/0/2/0 Define une matriz de 4x4 (16 valores en total), para establecer una trensformacién 3D. inn) ‘eanslate30 (x, y, 2) Define una traslacin sobre los tres jes. translater (2) Define una taslacién de un elemento, sabre su ejeZ scaie30(x, ¥, 2) Define una transformacién a escala en 3 dimensiones. acalez (2) Define una transformacién a partir del valor de su eje Z. rotate3d(x, y, 2) Define une rotacién 30 a partir do sus valores x, , 2 rotatez(z) Detine a otacién de un elemento partiendo de su eje 2, las transformaciones 30. Tabla 04. Propiedades y métodos adicionales, pa OB Clase 1081 CSS avanzadoTransiciones CSS Durante la evolucién de HTMLS y CSS3, hemos visto como las web que saltaron hacia esta tecnologia comenzaron a aplicar diferentes efectos visuales sobre la carga de la pagina, ejecucién de ments 0 interacci6n con elementos, como las imagenes. Estos efectos visuales, que antes eran propios de Como utilizar transition Flash, ahora pueden ser elaborados con la utilidad S83 Transitions. Este permite cambiar de forma gradual los valores de las otras propiedades de animacién que repasamos hhasta aguf, integrando una fustén de uno o mas efectos con un tiempo de duracién determinado. eo img { opacity: 0.05 width: 200px3 border: 20% solid #lightgrays ‘transition: all 0.35 ease-outy}}~ » img:nover { opacity: 15 width: 220% | [” transform: rotate(-3deg)3. ) rw En primera instancia, dfinimos los diforontos ostilos CSS que tendra nto HTML (en este caso, una imagen). Los estlos definidosindicen que la imagen tendré un ancho de 200 pixeles, tendré una opacidad del 40% y un borde de 2pixeles solidos en colo ais claro. Alfinalizar la definicién de estilos CSS, agragemos una linea donde invocamos a transition conlos diferantes valores. El primero de ellos all, define que el tiempo yla ‘ransicion se aplicarén states los efectos predefinidos. El segundo valor 0.3s, indica el tiempo. Latransicién de efectos durara 0.3 sequndas (o 130% de un segundo}. Finalmente, ease-outindica eltipa de transicién que se 3r4 sabre los efectos defini, REDUSERS Bi PROGRAMADOR WEB Full Stack Enla definicion de Finalmente, dfinimos estilos CSS para el ‘otro CSS especitico lomento img, n0 donde st estarin los ofinimos ningun tipo diferontas ofectos que ée efecto. Esto indica: ‘deseamos aplicar sobre estado por defecto que elelemento HTML. Estes ebetener el elemento. _propiedadles definen que (Cuando transition Fa imagen estara 100% visible (opacity: 1), tendré un ancho de 220 piel su eje 3grados negative. se ejecute, marcara cltiming y el modo de transicion sobre la cl SS que contenga los efectos _yrotara sobrePropiedades Veamos, a continuaelén, la Table 05 con las principales propiedades que se apican a Transition, para que este sea efectivo en el momento de elecutar diversas ‘wansition-delay ‘ansition-duration, ‘ransition-property, ‘transitioning function Nota: Debemos tener presente que, para ejecutar transiciones entre diversos efectos, necesitaremos anteponer la sigla correspondiente a cada browser (-moz, -webkit,-o), para asegurarnos de que la transicién se realice de manera efectiva. ESCA io Es a version acotada para configurar la ejecucién de uno a mas efectas CSS3, Especifica un delay (tempo de retardo] en segundos para el efecto de transicion Especifica el tempo (en segundos o miisegundos) que tardaré en completarse la ejecu- cid de los efectos, Pormite especificar el nombre dol efecto de transicibn quo se esté por ojacutar, Permite especificar la curva de velocidad para el efecto detransicion, ‘Tabla 05. Las dterentes propiedades que pueden aplicarse para transicionar uno o més efectos a través de CSS3. Efecto transition sobre imagenes Construyamos un ejemplo funcional en conjunto, para ‘comprenider mejor el comportamionto de la propiedad CSS. ‘ransition. Para ello, ereemos un documento HTML yasociomos a esto una hoja de estilos CSS. Dentro del documento HTML, definiremos un titulo , un elemento - y das elementos dentro del elemento civ