En este tutorial, aprenderemos cómo crear algunas tablas de precios interactivas y atractivas, ¡en CSS puro! Por lo general, las tablas de precios se crean utilizando imágenes estáticas que siguen el proceso de hacerlas interactivas, pero la técnica que aprenderemos hoy facilitará el proceso y nos permitirá crear hermosas tablas de precios con el siguiente aspecto:
Esto es lo que debe verse cuando se hace

Plan standard

$ 59.99

por mes
100 GB de espacio en disco
50 cuentas de correo
600 subdominios
SEO gratis
Regístrate ahora
Se ve muy bien, ¿no? Vamos a profundizar en cómo crearlo.
Configuración de la estructura de la tabla
Todos los elementos de la tabla se agregarán todos dentro de una divclase ui_boxque contendrá dos divs principales , la parte superior de la tabla y la parte interior de la tabla. La parte superior tendrá el nombre del plan y el precio se mostrará muy bien. La parte interior mantendrá las características y el botón de soltar. El HTML debe verse como el siguiente:
   <div class = "ui_box">
     <div class = "ui_box_top highlight">
        <h1> Plan estándar </h1>
        <h2> $ 59.99 </h2>
        <p> por mes </p>
     </div>
     <div class = "ui_box_inner">
       <p> 100 GB de espacio en disco </p>
       <p> 50 cuentas de correo electrónico </p>
       <p> 600 subdominios </p>
       <p> SEO GRATIS </p>
     </div>
     <div class = "drop">
      <p> Regístrese ahora </p>
      <div class = "arrow"> </div>
     </div>
  </div>
ui_box
Diseño de la caja del contenedor exterior El ui_box será el contenedor principal que capturará el evento de desplazamiento y escalará la tabla de precios. Así que tendremos que escribir el CSS para animar la base de la tabla de precios al pasar con el siguiente CSS:
  .ui_box {
      posición: relativa;
      ancho: 300px;
      flotador izquierdo;
      margen: 0 auto;
      fondo: #dedede;
      cursor: puntero;
      transformar: escala (1);
      propiedad de transición: todos;
      duración de transición: .1s; 
      borde inferior: 5px sólido # 107FC9;
      -webkit-box-shadow: 0 1px 1px 0px rgba (0,0,0, .25);
      cuadro de sombra: 0 1px 1px 0px rgba (0,0,0, .25);
      }
  .ui_box: hover {
      transformar: escala (1.1);
      propiedad de transición: transformar, fondo;
      -webkit-box-shadow: 0 1px 3px 2px rgba (0,0,0, .25);
      cuadro de sombra: 0 1px 3px 2px rgba (0,0,0, .25);
      duración de la transición: .3s;
      posición: relativa;
      índice z: 1; 
      }
Ahora que hemos creado la base de la tabla, tendremos que aplicar un estilo al texto dentro de la tabla. Lo haremos seleccionando las fuentes adecuadas y configurando los tamaños de fuente correctamente. Podemos hacerlo utilizando @importpara obtener las fuentes web que vamos a usar y luego asignarlos al texto. Estaremos utilizando Montserraty Source Sans Prowebfonts.
       @import url (https://fonts.googleapis.com/css?family=Montserrat:400,700);
       @import url (https://fonts.googleapis.com/cssfamily=Source+Sans+Pro:300,400,600);      
      .ui_box h2 {
        fuente-peso: normal;
        tamaño de fuente: 40px;
        Familia tipográfica: 'Montserrat', sans-serif;
        margen: -4px 0px 3px 0px; }
      .ui_box h1 {
        fuente-peso: normal;
        tamaño de letra: 20px;
        Familia tipográfica: 'Montserrat', sans-serif;
        margen: -4px 0px 3px 0px; }
      .ui_box p {
        tamaño de fuente: 15px;
        familia de fuentes: 'Source Sans Pro', sans-serif;
        color: #fff;
        claro: izquierda;
        peso de la fuente: 400;
        margen: 1px 0px 0px 0px; }
Adición del
contenido de la tabla El contenido de la tabla se divide en dos partes principales: la parte superior, que tiene el nombre del plan y el precio, y la parte interior que contiene los detalles del plan. Al diseñar la parte superior, debemos tener en cuenta que es posible que tengamos que resaltar una tabla, por lo que tendremos que crear una .highlightclase adicional para agregarla a la tabla y hacer que el encabezado sea azul.
Panel de mesa (sin .highlightclase)

Plan standard

$ 59.99

por mes
.ui_box__top {
   fondo: # 3b3b3b;
   relleno: 15px;
}
.highlight {
  fondo: # 107FC9! importante;
}
.ui_box .ui_box__inner p {
  text-align: center;
  fondo: # f0f0f0;
  color: # 131313;
  relleno: 10px;
}

.ui_box: desplazarse> .ui_box__inner p {
  margen: 1px 0px 0px 0px; 
  fondo: # f0f0f0;
  color: # 131313;
  relleno: 10px;}
Panel de mesa (con .highlightclase)

Plan standard

$ 59.99

por mes
Cada fila en la parte interior de la tabla se hará usando un <p>elemento para mantener el texto. Esto debe ser estilizado de la siguiente manera:
.ui_box .ui_box__inner p {
  text-align: center;
  fondo: # f0f0f0;
  color: # 131313;
  relleno: 10px;
}
Añadiendo <p>etiqueta con texto dentro<div class="ui_box_inner">

Plan standard

$ 59.99

por mes
100 GB de espacio en disco
Haciendo el panel desplegable
Notaste el botón azul que cae cuando pasas el mouse sobre la mesa, ¿verdad? Al usar animaciones CSS podemos crear fácilmente este efecto. Primero creamos un archivo regular divy luego le damos una caída de clase y luego diseñamos esa clase en CSS de la siguiente manera:
.ui .drop {
      índice z: 3;
      opacidad: 0;
      ancho: 240px;
      fondo: # 107FC9;
      posición: absoluta;
      color blanco;
      parte inferior: 100px;
      relleno: 15px 30px 0px 30px;
      propiedad de transición: fondo, opacidad;
      duración de la transición: .8s; }
      cuerpo .ui .drop p {
        color: # f8fbfa; }

.ui_box: hover> .drop {
  posición: relativa;
  propiedad de transición: fondo, opacidad;
  duración de la transición: .2s;
  parte inferior de relleno: 18px;
  -webkit-box-shadow: 0 1px 1px 0px rgba (0,0,0, .35);
  cuadro de sombra: 0 1px 1px 0px rgba (0,0,0, .35);
  abajo: 0px;
  opacidad: 1; }

.ui_box: hover> .drop .arrow {
  propiedad de transición: transformar;
  duración de transición: .5s;
  transformar: rotar (405deg); }

.arrow {
  ancho: 6px;
  altura: 6px;
  margen superior: 15px;
  propiedad de transición: transformar;
  duración de la transición: 1s;
  transformar: rotar (0deg);
  -webkit-transition-timing-function: cubic-bezier (0.68, -0.55, 0.265, 1.55);
  borde superior: 1px sólido # CDEAD3;
  borde derecho: 1px sólido # CDEAD3;
  flotar derecho;
  posición: relativa;
  arriba: -24px;
  derecha: 0px; }
Coloca el cursor sobre la tabla de abajo para ver la animación de revelar al pasar

Plan standard

$ 59.99

por mes

Regístrate ahora
Resultado final: 
haga clic aquí para ver una demostración completa que hice en el codepen. 
¡Eso es! Ahora hemos creado una tabla de precios atractiva e interactiva. Espero que disfrutes este tutorial.


Resultado sin .highlightclase

Plan standard

$ 59.99

por mes
100 GB de espacio en disco
50 cuentas de correo
600 subdominios
SEO gratis
Regístrate ahora