¡Hola mundo! Me gustaría compartir la manera en la que resuelvo los 100 retos de 100 DAYS CSS CHALLENGE.
El objetivo de realizar los 100 retos es el mejorar mi comprensión de CSS. Explicando lo que se hace se logra comprender de una manera más profunda lo que se está haciendo.
Day #1
Código base del reto
HTML
<div class="frame">
<div class="center">
<p>Happy coding :)</p>
</div>
</div>
CSS
// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
// use only the available space inside the 400x400 frame
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Pasare a describir el proceso que yo realizo para este tipo de retos
1. Identificar los elementos del reto
Para este caso, tomando el código base proporcionado por el reto, estos fueron los contenedores que identifique.
3. Maquetación de los elementos identificados
<div class="frame">
<div class="center">
<!-- 1.- Contenedor de las letras 100 -->
<div class="days">
<!-- 5.- Linea del uno principal-->
<div class="one one__line1"></div>
<!-- 4.- Linea diagonal del uno-->
<div class="one one__line2"></div>
<!-- 6.- Zero de en medio-->
<div class="zero zero1"></div>
<!-- 7.- Zero de el final -->
<div class="zero zero2"></div>
</div>
<!-- 2.- Texto days-->
<p class="text-big">Days</p>
<!-- 3.- Texto pequeño-->
<p class="text-small">css Challenge</p>
</div>
</div>
En este punto luce de la siguiente manera:
3. Degradado de fondo
El fondo del contenedor cuenta con un degradado de dos colores, el cual va del extremo inferior izquierdo al extremo superior derecho.
Se modificó la declaración de los estilos del contenedor con la clase .frame a la cual se le agregó la siguiente propiedad:
.frame {
background: linear-gradient(45deg, #6525b3, #b191e5);
}
45deg puede ser cambiado por to top right
Con esto logramos tener el fondo con gradiente. Yo escogí colores diferentes para este reto.
4. Tipografía
Tengo que admitir que para este punto si me vi en la necesidad de inspeccionar elemento para saber la el font-family necesario para el reto.
Se agregó al contenedor con la clase .frame las propiedades font-family y color.
Lo hago de esta forma para que todos los hijos del contenedor con la clase .frame hereden las propiedades agregadas.
.frame {
color: #f0ecec;
font-family: "Courier New", "Courier", sans serif;
}
Para el texto agregué la propiedad text-transform a la etiqueta p de manera general.
De igual manera, aplique un reset del margen a 0 y un font-weight de 700
p {
text-transform: uppercase;
font-weight: 700;
margin: 0;
}
p.text-big {
font-size: 80px;
line-height: 56px;
margin-top: 12px;
margin-top: 5px;
}
p.text-small {
margin-top: 2px;
font-size: 24px;
}
5. Número 100
Ya para este punto el reto va tomando forma.
Empecé delimitando el área, el cual va a abarcar el 200px* de ancho y una altura de la mitad de ese valor para obtener la forma rectangular, tomando de base el texto **DAYS
.days {
border: solid 1px red;
width: 200px;
height: 100px;
}
Pasando a con el número 1**
Para este inicie definiendo en la clase one los estilos que las dos partes del número uno compartirían.
.one {
box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
background-color: #f0ecec;
width: 24px;
}
En este punto visualmente no se puede apreciar el número 1 dado que revisando el reto nos podemos dar cuenta que se necesitara sobreponer elementos.
Para realizar esto de una manera más cómoda se necesita darle la propiedad positon con el valor relative al contenedor padre de los números, en este caso days. A si como asignarle la propiedad position con el valor absolute a los contenedores de los números.
.days {
position: relative;
border: solid 1px red;
width: 200px;
height: 100px;
}
.one {
position: absolute;
background-color: #f0ecec;
width: 24px;
}
Ahora ya se puede trabajar las dos partes del número uno.
Para el número 1 nos damos cuenta las siguientes características:
- Está posicionado en la parte izquierda.
- Abarca toda la altura del contenedor.
- Cuenta con bordes redondeados.
- Se encuentra al frente de los demás contenedores.
.one.one__line1 {
/* 1 */ left: 0;
/* 2 */ height: 100%;
/* 3 */ border-radius: 3px;
/* 4 */ z-index: 11;
}
Para la segunda línea del número 1 Nos percatamos de las siguientes características:
Los valores que asigne fue a prueba y error buscado el que mejor se adapte o paresca
- Inclinación de 50 grados.
- Altura menor de la mitad de la primera línea.
- Ancho menor a en comparación con la primera línea.
- Sale un poco del contenedor principal del lado izquierdo.
- Se ubica en la parte superior del contenedor principal.
- Se encuentra detrás de la línea principal.
.one.one__line2 {
/* 1 */ transform: rotate(50deg);
/* 2 */ height: 40px;
/* 3 */ width: 18px;
/* 4 */ left: -16px;
/* 5 */ top: 0;
/* 6 */ z-index: 0;
}
Ceros Para realizarlos de igual manera cree 3 clases. Una clase para asignar estilos que compartían. Dejando las otras dos clases para controlar posicionamiento.
Este es más fácil de lo que parece, lo dividiré en dos partes para que se pueda observar el cómo se realiza. Características:
- Los círculos posen el mismo alto que ancho
- El alto es igual que la línea principal del número uno.
- Pose un borde algo robusto.
.zero {
position: absolute;
box-sizing: border-box;
/* 1 */ width: 100px;
/* 2 */ height: 100%;
/* 3 */border: 24px #f0ecec solid;
}
Con esto todavía no contamos con la forma del cero. De esta forma obtenemos un cuadrado el cual luce de la siguiente forma:
Para darle la forma circular basta con aplicar un border-radius del 50%. De igual manera agregamos la propiedad position: absolute para modificar su posición.
.zero {
position: absolute;
box-sizing: border-box;
width: 100px;
height: 100%;
border-radius: 50%;
border: 24px #f0ecec solid;
}
Procedemos a modificar su posición utilizando las clases auxiliares que se agregaron.
.zero1 {
left: 20px;
z-index: 10;
}
.zero2 {
right: 0;
}
Resultado final
Muchas grasias por leer, pongan en los comentarios si quieren un post explicando la animacion que agregue.
Top comments (0)