Código creativo de Css: Animación de Accordion con Codificación de manos simples

1. Avance: Hola y bienvenidos. Mi nombre es coddles sueltos. Soy ingeniero y desarrollador Web. Para estas nueva clase, crearé un menú de navegación dinámico donde podrás ver todas las propiedades de apagado HTML CSS y caja de lino. Si estás cansado de crear los típicos menús de navegación, entonces esta es la maldición ideal para ti. Hagamos algo juntos que Bress es, y te sorprenderemos, pensando que te pones de pie en un nivel más alto. Vamos a crear, Transformar y facturar juntos un menú de navegación interactivo y moderno que pueda aplicar en sus propios sitios web o negocio en línea, Así que empecemos. 2. Menú de navegación dinámico /deslizador de acorde de imagen (parte 1): creación de diseño: Hola. Empecemos con este nuevo proyecto, donde aplico modelo de puntos flex y efectos CSS para crear un tipo diferente de menú de navegación . El proyecto fue diseñado para ser una plaga, ya que el menú principal a menudo galería de imágenes, y para este ejemplo, elijo a un acaudalero. You dead presenta para Image Cities entierra Londres, Nueva York y Madrid archivos que f en mi Made Fuller di Di es llevar cuatro páginas Web diferentes para cada una fuera de las ciudades. Y esta página que voy a crear en los próximos minutos funciona como menú inicial la muerte puede enlazar en el futuro a las cuatro páginas individuales. Es solo una idea posible para usar esta página, pero por supuesto se puede utilizar en muchas situaciones diferentes. Ahora se ve el finalmente fuera de la página en el hermano que fue diseñado con la propuesta mejor sobre una fuera de las secciones, creando un efecto sobre en la imagen y textos respectivos. Esto es sólo en panorama general sobre el solo lote que ahora voy a desarrollar. Empiezo primero con HTML frío. Eso es muy sencillo, donde tengo un contenedor y para artículos flex, interiores, deuda contenía la imagen para cada una de las ciudades. Por lo que creo mi DIF con nombre de cristal, contenedor y para ladrones, nombre de clase de trigo Mame conteniendo y agregando teg con el nombre fuera de las ciudades, empezando por Berries, Londres, Nueva York y finalmente, El madrileño. Como ves, el código HTML es muy, muy sencillo. Ahora. Tiempo para que CSS cree los diferentes estilos, empezando por capa CSS. En primer lugar, definí el estilo para el contenedor de vidrio que solo necesita mostrar la propiedad con el valor flex que define a este elemento como un contenedor flex y habilita el contexto flex para todos los niños directos que están dentro del contenedor Dave ahora creando el estilo para mis artículos flex. En primer lugar, definí el ancho y yo 'd propiedades toe tienen el espacio ocupado por cada uno de los ítems flex desde I F. Cuatro imágenes diferentes a ocupar. Similar con yo defino esta propiedad, con el valor de descuento 25% de descuento en las partes de vista para cada imagen apagado por 1/4 fuera de las malas hierbas para los ojos. Quiero que cada como sytem apaciguado por el 100% de las partes de la vista, y luego defino texto la línea que centraríamos valor para que el texto dentro de los elementos de flancos sea central. Por el momento, es visible que no somos sus imágenes en los artículos de lino. Ese es el siguiente paso donde usaré entonces selector infantil para cada uno fuera de los elementos flex y la muerte, una imagen de fondo comenzando ahora con flex Item uno que es mi primer hijo. Yo utilicé para este elemento para propiedad imagen de fondo que recibe dentro que son l valor que está dentro del nombre del archivo correspondiente a la imagen de fondo siendo para este primer elemento flex imagen Bayas dot j peg. Ves ahora que la imagen no aparece toda visible porque eso mencioné es mucho más grande que la dimensión fuera del elemento flex. Para resolver esta situación, utilicé tres propiedades diferentes en nuestra clase principal. En primer lugar, la posición de fondo que recibe el valor central para centrar la imagen dentro del elemento flex . Entonces el fondo repite propiedad que se utiliza con el valor no repeticiones que obligó a la imagen a aparecer en los Lee. Y por último, el tamaño de fondo de la propiedad con la cubierta de valor La muerte redimensiona la imagen de fondo para decir con la misma dimensión fuera del elemento flex. Después de agregar estas tres propiedades, se ve que la imagen de fondo ya es completamente visible dentro de los primeros elementos Lex . Ahora realizaré el mismo procedimiento para los dos ítems reflejos restantes. En primer lugar, usando el selector de niño final para el segundo hijo, donde voy a tener una nueva imagen de fondo esta vez con el nombre off London dot jay Peak. La siguiente imagen para insertar dentro del tercer elemento flex. Tendremos una imagen de fondo con el archivo new york dot j. peg que ahora es visible después de Londres, imaged que pones dentro del segundo elemento flex y para terminar f r refleja ítem para donde tengo que presentar con el nombre de Madrid Dodge a peg para insertar dentro del elemento flex respectivo. Después hemos finalizado esta parte fuera del proyecto con todas las imágenes insertadas y con tamaño redimensionado correctamente usando algunas propiedades de fondo. 3. Menú de navegación dinámico /deslizador de acorde de imagen (parte 2): diseño de Tuning: El siguiente paso se define textil así como sobre efectos con el fin de cambiar el tamaño de los elementos flex, empezando por el texto que he insertado dentro de la adición Tex. Usé la línea que tengo propiedad que permiten la alineación vertical en las pruebas. Si doy un valor de descuento 100% de la parte de vista a esta propiedad, eso hace que una sola línea ocupe todo el ICT, 15% de descuento en la parte de vista para estar ocupado por encima de las cubiertas y el otro 50% de descuento en el puerto de vista por debajo las cubiertas. Si entro un valor menor al 100% ves que dext ya no será central. Entonces voy a dar un margen con el valor cero y para usar color de fondo a mi tener que, como dije, ocupar todo el espacio fuera del elemento flex. Usaré la propiedad de fondo con el RGB, una función para definir valores de recepción de color entre cero y 2 155 para el árbol para metros , respectivamente a 115 para rev. 145 para verde y 46 4 azul y el último oferta perimetral que define la opacidad del Golar que definí con tres perímetros previos dando el valor 0.32 alfa. Después de configurar el color de fondo étnico que ocupan todo el espacio fuera del elemento flex, asigné valor blanco al color de las deudas y una familia divertida, las Piras con el tamaño de fuente 15 pixels. Ahora he definido completamente mi rumbo antes de ir a los sobreefectos. Quiero ahora f un efecto sobre mi elemento de adición que cambia el color de fondo para este evento. Yo usé sobre selector dedo del pie efecto agregando elementos usando de nuevo propiedad de fondo con RGB una función esta vez con los valores cero cero cero que definió el color Bleck y el valor Alfa 0.1, dando una capacidad muy alta siendo visible, el cambio en el fondo cuando mejor sobre los elementos flex para ganar esta partes, utilicé la propiedad de espaciado de letras con el valor off píxeles lejanos para aumentar la especia entre letras y para la transición off. Este efecto no sea muy rápido. Doy valor un segundo a los efectos de transición. Hemos llegado al final de los cambios a los efectos de adición cuando mejor millas más para terminar. Quiero un efecto sobre que haga que el elemento flex, escribió el suyo. Hablamos un 50% de descuento en las partes de la vista para hacer ese cambio. Creo una regla para la clase principal y cuando paso por encima el elemento flex, el trigo simplemente cambia a 50% de descuento en la parte de vista. Como dije y aplico un tiempo de transición fuera de un segundo a esta situación de cambio que ocurre ahora cuando paso por encima de uno de los elementos flex. En este punto, tengo el 99% del proyecto entonces y se ve cuando paso por encima cuando la imagen, el efecto sucede con una ligera posición que no sucede cuando dejé de pasar por encima del elemento flex, haciendo la transición off flex ítem con muy ayunos sucediendo igual con la línea He apagado el agregado Cuando regresa a nuestro valor adicional para sortear la situación, solo tengo que definir el tiempo de transición desigual cuando el ítem flex volvió a los primeros estados donde no hay más efectos que se definió por la mina explosiva inicial para el elemento flex con y situación similar con agregar estilo para definir esta transición, simplemente aplico la propiedad de transición en nuestra clase principal, con el valor off un segundo y misma situación para el terminando, ahora hemos llegado al final del proyecto con todos los efectos creados, como se esperaba. Gracias por ver.