Accordion Neumorphism with HTML and CSS || @Rayen-Code

Rayen

Neumorphism is a design trend that gives UI elements a soft, extruded, and almost 3D-like appearance using shadows and highlights. In this tutorial, we'll create a stylish Accordion Neumorphism using HTML and CSS. This accordion will enhance the visual appeal of your website and provide an engaging user experience.




Step 1: HTML Markup:

First, we'll set up the basic HTML structure for the accordion. Each accordion item will contain a header and a content section.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accordion Neumorphism style</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ul class="container">
      <li class="accordion-item">
        <input type="radio" id="one" name="accordion" checked />
        <label for="one" class="accordion-header"> Accordion Item One </label>
        <div class="accordion-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
          fugit distinctio debitis, consequatur est praesentium doloremque ad
          dolorem temporibus assumenda!
        </div>
      </li>
      <li class="accordion-item">
        <input type="radio" id="two" name="accordion" />
        <label for="two" class="accordion-header">
          How to create a Accordion?
        </label>
        <div class="accordion-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
          fugit distinctio debitis, consequatur est praesentium doloremque ad
          dolorem temporibus assumenda!
        </div>
      </li>
      <li class="accordion-item">
        <input type="radio" id="three" name="accordion" />
        <label for="three" class="accordion-header">
          What is Neumorphism style?
        </label>
        <div class="accordion-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
          fugit distinctio debitis, consequatur est praesentium doloremque ad
          dolorem temporibus assumenda!
        </div>
      </li>
      <li class="accordion-item">
        <input type="radio" id="four" name="accordion" />
        <label for="four" class="accordion-header">
          Is all CODE are Free?
        </label>
        <div class="accordion-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
          fugit distinctio debitis, consequatur est praesentium doloremque ad
          dolorem temporibus assumenda!
        </div>
      </li>
    </ul>
  </body>
</html>

Step 2: Styling with CSS:

Next, we'll style the accordion using CSS to create the Neumorphism effect.
/*-------------------- CSS --------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  list-style: none;
}

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: #e0ecf8;
  padding-top: 150px;
}

.container {
  width: 500px;
}

.accordion-item {
  width: 100%;
  background: #e0ecf8;
  box-shadow: 5px 5px 10px #00000048, -5px -5px 5px #ffffff86;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
}

input[type="radio"] {
  display: none;
}

.accordion-header {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.accordion-header::before {
  content: "+";
  text-align: left;
  width: 30px;
  font-size: 2rem;
}

input[type="radio"]:checked + .accordion-header::before {
  content: "-";
}

.accordion-body {
  max-height: 0;
  padding: 0 20px;
  overflow: hidden;
  transition: linear 0.5s;
}
input[type="radio"]:checked + .accordion-header + .accordion-body {
  max-height: 100px;
  padding: 10px 20px;
}

This CSS applies the Neumorphism effect to the accordion items using box-shadow. The accordion headers change color on hover for better user interaction.

With these steps, you've created a Neumorphism-styled accordion using HTML and CSS. This design not only looks modern but also enhances the user experience with smooth, interactive elements.


0 Comments