Nivel 5. Mike

Neus Agüera
12-02-2020
12-02-2020

Para el número 5 de este curso traigo a Mike de Monstruos S.A, con él seguiremos practicando los background, esta vez aprenderemos a crear un patrón. Para seguir con las buenas prácticas veremos que funciones tienes la organización W3C.

Paso 1: Las formas básicas.

Como en los anteriores niveles empezaremos por crear dos ficheros mike.html y mike.css, una vez tenemos los ficheros creamos algo parecido a esto:

mike.html

<div class="character">
  <div class="mike-ear"></div>
  <div class="mike-ear right"></div>
  <div class="mike-hand"></div>
  <div class="mike-hand right"></div>
  <div class="mike-head"></div>
</div>

mike.css

:root {
  --main-mike: #c6fd81;
}

.character {
  position: relative;
  display: block;
  height: 200px;
  width: 200px;
  margin: 0 auto 32px auto;
  overflow: hidden;
}

.mike-head {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 130px;
  height: 125px;
  border-radius: 50%;
  background-color: var(--main-mike);
  z-index: 10;
}
.mike-hand {
  position: absolute;
  left: 30%;
  bottom: 2%;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--main-mike);
}

.mike-hand.right {
  left: 60%;
}
.mike-ear {
  position: absolute;
  height: 40px;
  width: 35px;
  left: 25%;
  top: 30%;
  border-radius: 100% 0% 100% 0%;
  background: var(--main-mike);
  transform: rotate(-12deg);
}
.mike-ear.right {
  left: 58%;
  border-radius: 0% 100% 0% 100%;
  transform: rotate(12deg);
}

Paso 2: El ojo de Mike

Mike es un Tsum bastante sencillo de crear, ahora que ya tenemos las formas básicas vamos a crear el ojo de Mike y le aplicaremos los degradados circulares que aprendimos en el nivel anterior degradados circulares.

mike.html

<div class="character">
  <div class="mike-ear"></div>
  <div class="mike-ear right"></div>
  <div class="mike-hand"></div>
  <div class="mike-hand right"></div>
  <div class="mike-head">
    <div class="mike-eye">
      <div class="mike-iris"></div>
    </div>
  </div>
</div>

mike.css

:root {
  --dark-mike: #7dbd3c;
  --main-mike: #c6fd81;
  --gray-mike: #aaa;
  --black: #000;
  --white: #fff;
  --iris-mike: #00c2b2;
  --dark-gray: #010101;
}
.character {
  position: relative;
  display: block;
  height: 200px;
  width: 200px;
  margin: 0 auto 32px auto;
  overflow: hidden;
}

.mike-head {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 130px;
  height: 125px;
  border-radius: 50%;
  background-color: var(--dark-mike);
  background: radial-gradient(var(--main-mike) 0%, var(--dark-mike) 100%);
  z-index: 10;
}
.mike-hand {
  position: absolute;
  left: 30%;
  bottom: 2%;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: radial-gradient(var(--dark-mike) 0%, var(--main-mike) 100%);
}
.mike-hand.right {
  left: 60%;
}
.mike-ear {
  position: absolute;
  height: 40px;
  width: 35px;
  left: 25%;
  top: 30%;
  border-radius: 100% 0% 100% 0%;
  background: var(--main-mike);
  background: radial-gradient(var(--dark-mike) 0%, var(--main-mike) 100%);
  transform: rotate(-12deg);
}
.mike-ear.right {
  left: 58%;
  border-radius: 0% 100% 0% 100%;
  transform: rotate(12deg);
}
.mike-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  background: radial-gradient(var(--white) 60%, var(--dark-mike) 100%);
}
.mike-iris {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--iris-mike);
  background: radial-gradient(var(--iris-mike) 60%, var(--main-mike) 100%);
}

.mike-iris:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--dark-gray);
  background: radial-gradient(var(--dark-gray) 60%, var(--dark-mike) 100%);
}
.mike-iris:after {
  content: "";
  position: absolute;
  left: 40%;
  top: 62%;
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

W3C

W3C (World Wide Web Consortium) es el consorcio que se encarga de dirigir el desarrollo de protocolos para la evolución web. En la web podrás ver los últimos desarrollos y en qué se está trabajando para mejorar, también encontrarás todas las explicaciones que necesites sobre web y un apartado que seguro que usarás mucho que son los validadores HTML, CSS, mobile… Puedes analizar tus proyectos para ver si están dentro de los estándares. Vamos hacer una pequeña prueba con el código de Mike.

Para revisar nuestro HTML vamos a dirigirnos a la sección validator, como ves hay tres pestañas, en este momento nos interesa validate by input , aquí copiaremos el HTML de Mike. Si solo copiamos el trozo de HTML veremos que nos dan varios errores, añade los tags necesarios hasta que sea válido.

Para revisar CSS iremos al siguiente enlace CSS Validator, el validador no está actualizado con las “nuevas” propiedades de CSS3, probablemente si introduces código como variables, saltarán varios errores de parse error . Si tienes dudas sobre algún error, puedes acudir a CAN I USE como ya hemos comentado en niveles anteriores.

Paso 3: Fondo con patrones

A Mike en solo dos pasos lo hemos tenido listo así que ahora lo acompañaremos con un bonito fondo creado con las propiedades de degrado. Utilizando la imaginación puedes crear miles de patrones para la propiedad background, ahora te mostraré como crear el sencillo patrón que ves en la imagen, después sientete libre de probar mil cosas.

mike.css

:root{
  --main-background: #d2ebd3;
  --dark-background: #93a493;
}

body {
  background:
    linear-gradient(
      var(--dark-background) 1px,
      transparent 2px
    ),
    linear-gradient( 90deg,
      var(--dark-background) 1px,
      transparent 2px
    ),
    linear-gradient(  45deg,
      var(--main-background) 50%,
      transparent 51%
    );
 
  background-size: 20px 20px;
}

Patrones con degradados

¿Te acuerdas que comentamos en el nivel anterior que podíamos añadir más de un degradado dentro de la propiedad background ? Vamos a ver cómo trabajamos con difrentes degradados.

  1. El primer linear-gradient crea la linea horizontal del patrón, contiene una linea horizontal de 1px y el resto será transparente, como no le hemos dado dirección está linea será pintada en el primer píxel contando desde arriba.
  2. El siguiente pinta la linea vertical, como puedes ver, lo único que cambia es la rotación de 90º del degradado. En este caso al darle una rotación de 90º nos pinta el primer píxel de la izquierda. Ya tenemos la cuadrícula pintada.
  3. En el tercero queremos rellenar medio cuadrado en diagonal así que le añadimos una rotación de 45º y el color secundario al 50%.
  4. La propiedad background-size marca el tamaño del patrón, actualmente es de 20px de alto por 20px de ancho,puedes cambiar y veras como se va transformando.

Te dejo un enlace de codepen donde puedes ver otros patrones.

Paso 4: Mejora tu Mike

Ahora sí, ya tenemos a Mike acompañado de un bonito fondo con patrones, como siempre digo seguro que tú lo puedes mejorar. ¿Lo intentas? Este es el enlace a Codepen para que veas mi Mike final. Juega un rato, mejora y enséñame el resultado.

Codepen Mike

Nos leemos en el próximo nivel.