Estilos CSS para Tarjetas y Botones en HTML

Clase 25 de 32 • Curso de Responsive Design: Maquetación Mobile First

Resumen

El siguiente paso para finalizar tu sección de planes es agregar estilos en las tarjetas. Vamos a nuestra hoja de estilos.

Agregando estilos en las tarjetas de planes

Ten en cuenta los siguientes elementos:

Botón flotante

Llamamos la clase del párrafo con .recommended.
Establecemos su posición en absolute para moverlo dentro del contenedor.
Ajustamos su ancho en 120px y su alto en 31px.
Lo movemos hacia arriba hasta sacarlo del contenedor con top: -15px.
Centramos la caja con ***left: calc(50% - 60px)***.
Ajustamos el tamaño de fuente en 1.2rem.
Le damos un espaciado interno en todos los lados de padding: 6px.
Ajustamos el color de fondo con la variable –bitcoin-orange y el color del texto con –just-white.
Redondeamos las esquinas de la caja con border-radius: 8px.

.recommended {
    position: absolute;
    width: 120px;
    height: 31px;
    top: -15px;
    left: calc(50% - 60px);
    font-size: 1.2rem;
    padding: 6px;
    background-color: var(--bitcoin-orange);
    border-radius: 8px;
    color: var(--just-white);
}

Título

Llamamos la clase de la etiqueta h3 con .plan-card–title.
Le damos un espaciado superior con padding: 30px.
Ajustamos el tamaño de fuente en 1.4rem y su peso en 500.
Le damos un interlineado de 1.8rem.
Ajustamos el color del texto con la variable –black.

.plan-card--title {
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--black);
}

Precio

Llamamos la clase de la etiqueta p con .plan-card–price.
Le damos un espaciado superior e inferior de 30px y 0 a los lados.
Ajustamos el tamaño de fuente en 5.2rem y su peso en bold.
Le damos un interlineado de 5.3rem.
Ajustamos el color del texto con la variable –black.

Para el signo de dólar:

Llamamos la etiqueta sup desde su clase contenedora con .plan-card–price sup.
Ajustamos el tamaño de fuente en 1.2rem y su peso en 300.
Ubicamos el signo hasta arriba con vertical-align: 25px.

.plan-card--price {
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: var(--black);
}
.plan-card--price sup {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 25px;
}

Descripción

Llamamos la etiqueta de párrafo con su clase .plan-card–saving.
Le damos un tamaño de fuente de 1.2rem y cambiamos su color a #757575.

.plan-card--saving {
    font-size: 1.2rem;
    color: #757575;
}

Hasta ahora, este sería nuestro resultado en pantalla:
ejemplo de estilo en figma

¿Te diste cuenta que el color #757575 lo hemos usado varias veces a lo largo del proyecto, pero aún no está en una variable? ¡Buena observación! De eso se trata el ser un desarrollador. Aplica lo aprendido y mejora cada parte. Aunque el equipo de diseño no lo ha agregado, nosotros podemos hacerlo.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor) con aportes de Juan Carlos Verdugo Salazar.

Horacio Andres Flores Alberto

student•

Para poner en arriba el $ agregar lo siguiente

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: text-top;
}```

Juan Carlos Verdugo Salazar

student•

A mi me paso que no estaba tan arriba el "$", así que use pixeles

.plan-card--price span{
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 25px;
}

Christian Velázquez

student•

Gracias por el dato.

Julieta Gallego

student•

Hola a todos! Decidí agregar el signo $ a través de un pseudo elemento creado con ::before (utilicé ::before porque el símbolo está _antes _del número).

.price-card .price-card__planPrice {
    font-size: 5.2rem;
    line-height: 6.3rem;
    font-weight: bold;
    position: relative; /*para qeu el símbolo se posicione en relación al número*/
}
.price-card .price-card__planPrice::before {
    position: absolute;
    top: 20%;
    left: calc(50% - 45px);
    content: '$';
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;  /*La altura de la línea del texto es igual a la altura del texto (sería algo así como sacarle el padding  top y bottom a una caja)*/
}

Este es el resultado:

¿Qué les parece?

Victor Andres Castillo Zambrano

student•

buenisimo

Luis Alejandro Nieto Ruth

student•

Muy bien

Anderson Josué Oroya Silva

student•

La primera solución que se me ocurrió fue usar la posición absoluta y colocar un top y left. Al principio puse ⚠ left: -60px; pero al hacer más grande la resolución de la página esto se corría de lugar por lo cual no era viable. Entonces usé el siguiente código que nos enseño Diego en las clases anteriores.

.plan-card__price {
    position: relative;
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5.3rem;
    color: black;
}

.plan-card__price span {
    position: absolute;
    top: -7px;
    left: calc(50% - 40px);
    font-size: 1.2rem;
    font-weight: 300;
}

Usando calc podemos mover el elemento desde la línea central del elemento, y como la línea central nunca va a variar porque el centro siempre será el centro, entonces no se mueve del lugar a pesar de cambiar el tamaño de la página. En cambio, tomando como referencia los costados como left o right porque estos pueden variar al hacer más grande la pantalla.

Jeyson David Vargas Crespo

student•

Hola, que bien, pero porque tomas 40px de donde puede uno sacar ese dato???

Anderson Josué Oroya Silva

student•

Hola, entiendo lo que me comentás. Te hice una pequeña explicación que creo que te servirá :)

Sneyder Barreto

student•

Otra manera de centrar de manera vertical el texto de 'Recomendado' es usando line-height:

.recommended {
	line-height: 31px; /* El mismo valor que se asigna a height */
}

Santiago Yepes

student•

yo agregué

padding: 6px 2px;

Piero Angulo Cubas

student•

Sí, es una forma sin embargo hay que tener cuidado al aplicar esto , ya que solo funciona cuando el texto ocupa solo una linea , sino , puede verse muy mal.

Duarte Rosa

student•

Este fue el código que utilice para posicionar la etiqueta de span :)

Orangel Brito

student•

Gracias!!

Melquin Umanzor

student•

¡Muchas gracias! Me sirvió el recordatorio de la propiedad relative.

Para la altura, tome como base el tamaño de la fuente del numero y lo dividí entre 2. Así que en el top lo hice retroceder esa medida -2.6rem y por último le di un ligero margin-right para separar el signo del número.

.plan-card--price span {    
    position: relative;
    top: -2.6rem;
    margin-right: 4px;
    font-size: 1.2rem;
    font-weight: 300;
}

Yosef Enmanuel Blandin Rios

student•

Rubén Darío Rodríguez Mora

student•

Yo lo que hice fué usar la etiqueta de HTML5 <sup></sup> Así

<sup><span>$</span></sup>

Rubén Darío Rodríguez Mora

student•

Me quedó así

Juan pablo Restrepo Muñoz

student•

Yo tambien utilize sup, pero sin la etiqueta span, me dio el mismo resultado creo que con sup es la forma mas facil de hacer esa parte de la card. 👌

Javier Estuardo Borja González

student•

Así lo hice con Flex

.card-planes__precio {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    font: bold 5.2rem/6rem 'Inter', 'sans serif';
    letter-spacing: -.5rem;
    color: #000000;
}

.card-planes__precio span {
    margin-right: 7px;
    padding-top: 9px;
    font: 500 1.2rem/1.45rem 'Inter', 'sans serif';
    color: #363636;
}

Israel Gutierrez

student•

Si por alguna razon, los estilos no les salen en los parrafos, es porque esta interfiriendo la parte de

.plans--title p {
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #757575;
}

interfieren con los estilos marcados hace dos videos, les recomiendo que a la parte de ese parrafo, le pongan una clase extra, que aumente la especificidad.

Diana Florez

student•

sip me paso ... yo le puse .plans--title > p { ... }

Mauricio Moo Aguilar

student•

Gracias por el apoyo!

Diego Hanssel Perez

student•

Este es el codigo que ultice para posicioner el boton de Recomendado:

display: inline-block;
position: relative;
bottom: 17px;

Juan Diego Sastre Moreno

student•

Hola Diego, muchas gracias por tu aporte, me sirvió mucho.

Axel Yaguana

Team Platzi•

Ya hice el botón y subí el signo de dolar. Lo hice con position: relative; y position: absolute;. Veo que diego prefiere centrar usando padding, yo uso flexbox.

Este es el código:

Victor Andres Castillo Zambrano

student•

se ve genial

HECTOR CAMILO RAMIREZ PEREIRA

student•

Se ve muy bien. Como dato adicional, viendo el diseño en Figma, la fuente de los números es 'Inter' y el font-weight es de 700. Así se mostrará el precio de forma más similar al diseño.

Obed Paz

student•

Una de las formas mas rapidas de posionar el texto de recomendado, aprovechando que ya tenemos un text-align: center aplicado a toda la seccion, es simplemente darle un display: inline-block, y position: relative con un bottom: 7.5px (la mitad del alto del parrafo), para que lo empuje desde su misma posicion hacia arriba.

.plans-container__card>p {
    display: inline-block;
    position: relative;
    bottom: 7.5px;
}

Y agregarle los demas estilos que son los mismos, backround, padding, etc.

Juan José Rodríguez Portillo

student•

Por alguna razón no me funiciona el left: calc(50% -6rem);

solo funciona cuando lo dejo asi: left: calc(25%), tengo que dejarlo en 25% para que pueda quedar centrado, ya cuando empiezo a poner el -6rem no me funciona.

Carlos Eduardo Gomez García

teacher•

¡Hola! Es porque debes dejar un espacio entre el signo - y el 6, no puedes escribirlo todo junto, CSS es muy estricto con esos espacios, debería ser así:

left: calc(50% - 6rem);

Juan José Rodríguez Portillo

student•

Gracias, increíble como algo tan pequeño te puede hacer las cosas muy difíciles, pero ya esta todo solucionado.

Diego Alejandro Presiga

student•

Compañeros yo utilicé el cal() y un absolute para poner el signo $ arriba del número:

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    left: calc(50% - 40px);
    top: calc(50% - 90px);
}

Juan Sebastian Monje Camacho

student•

yo usé la misma tecnica pero** como referencia los tamaños de fuente del $**, y salió super sencillo

Lex Urrea

student•

Asi lo realice yo :)

<.plan-card__price span {
    font-size: 1.2rem;
    font-weight: 300;
    vertical-align: 27px; /*para posicionar un elemento en la parte de arriba de un texto*/
    margin-right: -8px;
}>

Xhunik Miguel

student•

Esta es mi solución al problema:

.plan-card--price {
  position: relative;
  padding: 5px 0;
  font-size: 5.2rem;
  font-weight: bold;
  color: var(--black)
}

.plan-card--price span {
  font-size: 1.2rem;
  font-weight: 300;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  transform: translateX(-40px)
}

Jesús David Cuéllar

student•

Tengo que leer sobre esta propiedad. Probé flexbox incluso pero me gustá esta solución. Gracias por compartirla

Xhunik Miguel

student•

jesusdavc: ¿A que propiedad te refieres?

Antonio Rafael González Ferrer

student•

No sé si me compliqué mucho pero así me funcionó 😅🤪:

.main-plans-container .plans-container--slider .plans-container--card .plan-info-container .plan-card--price
{
    padding: 5px 0;
    font-size: 5.2rem;
    font-weight: bold;
    line-height: 5rem;
    color: var(--black);
    position: relative;
}
.main-plans-container .plans-container--slider .plans-container--card .plan-info-container .plan-card--price span
{
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    top: -6px;
    left: calc(50% - 40px);
}

Freivys Antonio Paredes Briceño

student•

Gracias por el aporte. :+1:

Daniel Fernando Roa Chamorro

student•

yo use position relative, y me funcionó. No entiendo muy bien por qué usar position absolute o relative, si igual me sirven. Podrian ayudarme?

ANDRO CARDENAS VARGAS

student•

la posición del $, lo resolví así, seguro habrá mejores técnicas, pero fue la que se me ocurrió al momento...👇

Sandra Fiallos Ruiz(Sandre)

student•

Yo lo hice así:

.plan-card--price span {
    font-size: 1.2rem;
    font-weight: 300;
    position: absolute;
    top: 25px;
    left: calc(50% - 40px);
    padding: 5px 0px;
}