Want to make creations as awesome as this one?

Transcript

AnimeFreak

Sección Comunidad- estilos y responsive

Sexta fase

Lo que haremos será crear un modificador para la clase que más se repite o que es más genérica, es decir, para .titulo-img-comunidad.

Si observamos las clases .titulo-img-comunidad y .titulo-arena-franart, que corresponden a los estilos de los títulos de cada apartado, la única propiedad que cambia entre una y otra es el tamaño, el resto son exactamente iguales. De las dos clases, es la primera (.titulo-img-comunidad) la que predomina en número dentro del html, hay cuatro elementos que la tienen frente a dos que tienen .titulo-arena-franart.

Para hacerlo utilizaremos modificadores. Primero los definiremos en el css y después se los añadiremos en el html al elemento que correspondan.

El siguiente paso es añadir estilos y animaciones a los seis apartados y configurar responsive. Pero antes, vamos a depurar un poco el código que hicimos en la quinta fase.

En nuestra anterior presentación, dejamos hecha la maqueta de la parte de comunidad de nuestra web.

Borrar clase

Modificador

Con esto hemos reducido unas seis líneas de código.

Ahora debemos ir al html para modificar las clases a los elementos que tenían asignada la clase que hemos borrado, es decir los títulos de arena y fanArt. En su lugar añadiremos la clase .titulo-img-comunidad y también su modificador .titulo-img-comunidad-size.

En nuestro caso vamos a crear en el css .titulo-img-comunidad--size, y le vamos a añadir simplemente el parámetro que indica el tamaño de la fuente, en este caso 100px, que es el que tiene la clase que vamos a eliminar.

Recordemos que para añadir un modificador a una clase simplemente hay que añadir a la clase un doble guión ( -- ) seguido del nombre del modificador

Lo que haremos será poner las tres en una sola línea. En la propiedad background se pueden incluir varios parámetros. Los parámetros más comunes que se pueden incluir en una sola línea de la propiedad background son:

background-color background-image background-repeat background-attachment (Indica si la imagen de fondo se desplaza con el contenido o se mantiene fija.)background-position background-size

Vamos a reducir algo más, esta vez será con la propiedad background que tienen los elementos de la lista (arena, fanArt, blog, etc...). Si nos fijamos, las clases de estos elementos tienen tres propiedades background dentro del código: background, background-position y background-size.

Vemos que hemos utilizado una barra divisoria (/) entre "center" y "cover". La barra diagonal (/) se usa solo para separar los valores de background-position y background-size cuando se especifican juntos en una sola declaración. En el resto de casos no es necesario poner una barra divisoria entre cada valor.

background: background-color background-image background-repeat background-attachment background-position background-size;

Por tanto nuestro código quedaría: background: url(../img/comunidad/arena/inicio.jpg) center / cover;

En nuestro caso necesitamos tres valores: la imagen, la posición y el tamaño (image, position y size).

Se pueden asignar valores a cada uno de estos parámetros según lo que necesitemos. Se debe seguir el orden, en caso de no necesitar uno de ellos simplemente se omite.

background: background-color background-image background-repeat background-attachment background-position background-size;

La sintaxis sería la siguiente:

Nuestro siguiente paso es dar estilos y vida a nuestra sección. Será laborioso puesto que son seis apartados, por tanto debemos poner atención.

background: url(../img/comunidad/eventos/japan_weekend.png) no-repeat center / contain;

Haremos lo mismo con cada uno de los seis apartados, excepto con "eventos". En este último utilizaremos "contain" en lugar de "cover" y añadiremos el valor "no-repeat". Quedaría del siguiente modo:

En nuestra página no debe haber cambios ya que simplemente estamos depurando algo de código antes de seguir.

De modo que crearemos un div dentro de los elementos de los apartados (arena, fanArt, etc) e incluiremos en ellos los elementos de texto <h1> y <p> que ya tenemos. A ese div le asignaremos una nueva clase que se llamará: .div-txt-comunidad.

Vamos a añadir ciertos eventos que van a requerir que los dos elementos de cada apartado (<h1> y <p>) estén en un contenedor nuevo, hijo del contenedor en el que están. Esto es porque queremos que el fondo de cada apartado cambie de color al pasar el ratón, pero no podemos poner un color de fondo a un contenedor que ya tiene imagen de fondo.

Como evento :hover añadimos un color de fondo con opacidad de 0.5.

all: indica que todas las propiedades CSS animables del elemento tendrán una transición. Algunos ejemplos de propiedades animables son background-color, opacity, height, width, etc. Background-image no tiene transición.0.5s: Esta es la duración de la transición en segundos.ease-in-out: especifica un efecto de transición con un inicio y un final lentos

Hemos añadido también la propiedad "transition", que esta vez hemos definido de tal modo que tenga en cuenta tanto la entrada como la salida de la animación.

En esta clase establecemos la altura del elemento en 100%, ya que vamos a querer que el cambio de color de fondo ocupe toda la imagen. Si no lo establecemos así, el div sólo ocupará lo necesario para contener el texto, y no el 100% de su contenedor.

Ahora añadimos en el css la clase del div que acabamos de crear: div-txt-comunidad.

Utilizaremos : background-size: 110% auto;. Esto establece el tamaño del fondo del elemento a un 110% de su ancho y automático de alto, lo que aumentará el ancho del fondo a un 110% de su tamaño original, mientras que el alto se ajustará automáticamente.

Comenzaremos con el elemento "arena". Vamos a hacer un zoom de la imagen cuando pase el ratón. Pondremos el evento :hover en la clase .comunidad .lista-comunidad .arena.

Ahora los seis apartados se oscurecen al pasar el ratón. Pero vamos a añadir más efectos a cada uno.

A continuación vamos a la clase .arena, sobre la que se está realizando el evento :hover, y establecemos su background-size original a 100%. También añadimos "transition" (para que nadie diga que nuestros efectos son "cutres"...... ).

También añadiremos transition a la clase .fanArt.

rotateX(10deg): Aplica una rotación al elemento alrededor del eje X. Esta función toma un ángulo como parámetro y gira el elemento alrededor del eje X. En este caso, el ángulo es de 10 grados (10deg). La rotación se produce sobre el eje X del elemento. Si el ángulo es positivo, la rotación es en sentido horario; si es negativo, es en sentido antihorario.

En este caso vamos a usar la propiedad transform para crear un efecto 3D en el elemento. Dentro de esa propiedad utilizaremos perspective y la función rotate dentro de transition.

perspective(1000px): Define la perspectiva desde la cual se visualiza el elemento en un entorno 3D. Cuanto menor sea el valor, más pronunciado será el efecto de perspectiva. En este caso, se establece en 1000 píxeles, lo que significa que la perspectiva se verá desde una distancia de 1000 píxeles.

Continuamos ahora con "fanArt". Crearemos el evento :hover en la clase .fanArt (.comunidad .lista-comunidad .fanArt:hover).

También añadiremos transition a la clase .originalFreak.

Haremos exactamente lo mismo en el apartado "blog" , con la única diferencia de que aquí girará a la izquierda. El código será el mismo que para originalFreak, pero en los grados que indicamos a rotate(), utilizaremos valores negativos, lo que hace que gire en contra de las agujas del reloj. No olvidemos añadir transition en la clase .blog.

El siguiente turno es para "originalFreak". Aquí también vamos a utilizar perspective y rotate dentro de transition, pero no utilizaremos ningún eje para rotate(), es decir quela rotación se realizará en el plano 2D del elemento, lo que significa que el elemento gira sobre su propio eje, como si estuviera dibujado sobre un papel y lo estuvieras girando.

Además de rotar los dos elementos, les añadiremos una sombra al realizar el :hover. Como siempre, añadiremos también transition en la clase del elemento.

Utilizaremos valores positivos para webDescargas y negativos para "eventos".

con los dos apartados que nos quedan, "eventos" y "webDescargas", utilizaremos también rotación pero sobre el eje Y (vertical). Un valor positivo en rotateY() girará el elemento en sentido horario alrededor del eje Y y un valor negativo en sentido antihorario.

Nuestro siguiente paso será definir el responsive.

Añadiremos una clase genérica para párrafos (<p>) en la clase .lista-comunidad. Esto hará que todos los párrafos incluidos en los elementos hijos de esa clase tengan el formato que vamos a definir.

Para terminar, debemos dar algo de estilo a las descripciones que hemos puesto en los apartados "arena", "originalFreak", "fanArt" y "webDescargas".

Responsive- comunidad

La primera fila incluirá todo el apartado "arena".La segunda fila, tendrá "originalFreak" y "blog".En la tercera pondremos únicamente a "fanArt".Finalmente compartirán la cuarta fila "webDescargas" y "eventos".

Distribuiremos los apartados del siguiente modo en las filas:

Comenzaremos añadiendo el media query a nuestro código.

El responsive de esta sección lo haremos cambiando el número de columnas de nuestra rejilla, queremos que en lugar de 9 sean dos columnas por cada fila. Es un trabajo laborioso, pero la única dificultad es estar atentos.

Esto nos obliga a realizar una modificación en el media query de la cabecera.

Fijémonos en que, tanto la chica como el apartado webDescargas, quedan por encima de la cabecera responsive y del logo. Esto es porque en esos dos elementos hemos definido z-index, la chica en 2 para quedar sobre los apartados, y webDescargas en 3 para quedar sobre la chica.

Nos aparecerá todo descolocado, por eso vamos a decir a cada apartado dónde debe colocarse. Lo haremos modificando el grid-area de cada uno.

Lo que definiremos aquí es que las columnas sean 2, de 1fr cada una, la separación entre items (gap) la reduciremos a 10px y, finalmente, también reduciremos el padding.

Como tenemos que cambiar la rejilla, debemos añadir en nuestro media query para empezar la clase donde definimos el número de columnas. Es la clase .comunidad .lista-comunidad.

En el tamaño móvil, vamos a hacer que la chica no aparezca, con display:none.

A continuación vamos a quitar el párrafo de originalFreak y de webDescargas, quedaría demasiado pequeño en dispositivo móvil.

La modificación de la cabecera responsive es sencilla, bastará con añadir un z-index superior a 3 en la clase .cabecera del media query.

¡¡¡ Hasta pronto !!!