Cómo usar CSS puro para realizar Rabbit Calendar

Ruitu Calendar es un calendario tradicional con un estilo de diseño único y patrón Ruitu. En este artículo, implementaremos el calendario Rabbit usando CSS puro.

Estructura HTML

Primero necesitamos crear la estructura HTML para albergar nuestro calendario. Usaremos un <div>elemento como contenedor para el calendario y representaremos cada celda del calendario como un <div>elemento.

<div class="calendar">
  <div class="calendar-header">
    <span class="calendar-month"></span>
    <span class="calendar-year"></span>
  </div>
  <div class="calendar-body">
    <div class="calendar-date">1</div>
    <div class="calendar-date">2</div>
    <div class="calendar-date">3</div>
    <!-- ... -->
  </div>
</div>

estilo css

A continuación, usaremos CSS para implementar Rabbit Calendar.

Establecer el estilo básico

Primero, necesitamos establecer algunos estilos básicos para el contenedor del calendario:

.calendar {
    
    
  width: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 16px;
}

Establecer el estilo del encabezado del calendario

A continuación, debemos diseñar el encabezado del calendario. Usaremos flexun diseño para organizar los meses y años:

.calendar-header {
    
    
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f1f1f1;
  padding: 10px;
}

.calendar-month {
    
    
  font-weight: bold;
}

.calendar-year {
    
    
  font-weight: bold;
}

Dale estilo al cuerpo del calendario

Ahora vamos a diseñar el cuerpo del calendario. Usaremos gridun diseño para organizar las celdas de fecha:

.calendar-body {
    
    
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;
  padding: 10px;
}

.calendar-date {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: #f1f1f1;
  border-radius: 50%;
  cursor: pointer;
}

.calendar-date:hover {
    
    
  background-color: #ccc;
}

Añadir patrón de conejo

Finalmente, necesitamos agregar el patrón Rabbit. background-imagePodemos agregar imágenes usando propiedades CSS :

.calendar-date::before {
    
    
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("<https://cdn.pixabay.com/photo/2017/04/04/19/18/rabbit-2200124_960_720.png>");
  background-size: cover;
}

código completo

Para mayor comodidad, aquí está el código HTML y CSS completo:

<div class="calendar">
  <div class="calendar-header">
    <span class="calendar-month"></span>
    <span class="calendar-year"></span>
  </div>
  <div class="calendar-body">
    <div class="calendar-date">1</div>
    <div class="calendar-date">2</div>
    <div class="calendar-date">3</div>
    <!-- ... -->
  </div>
</div>

.calendar {
    
    
  width: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 16px;
}

.calendar-header {
    
    
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f1f1f1;
  padding: 10px;
}

.calendar-month {
    
    
  font-weight: bold;
}

.calendar-year {
    
    
  font-weight: bold;
}

.calendar-body {
    
    
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;
  padding: 10px;
}

.calendar-date {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: #f1f1f1;
  border-radius: 50%;
  cursor: pointer;
}

.calendar-date:hover {
    
    
  background-color: #ccc;
}

.calendar-date::before {
    
    
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("<https://cdn.pixabay.com/photo/2017/04/04/19/18/rabbit-2200124_960_720.png>");
  background-size: cover;
}

Ahora que ha aprendido a implementar Rabbit Calendar con CSS puro, ¡puede intentar crear uno usted mismo!