How to make an article card or blog post pure css

On this occasion, we will again present an interesting tutorial that you can refer to and can also apply to your blog. In terms of appearance, in my opinion this is very good for those of you who like beauty.

Here we will practice it directly, you can see below step by step how to make it. And most of all, this only uses HTML and CSS.

Well, maybe we just go to the stages of making this article or blog post card.

How to Make an Article Card

For the first, let's first make the Css. You can see the following appearance:

@import url("https://fonts.googleapis.com/css?family=Arbutus+Slab|Open+Sans&display=swap");
body {
  background: #F9F9F9;
  color: #495456;
  margin: 72px;
  font-family: Open Sans, sans-serif;
}

h2 {
  font-family: Arbutus Slab, serif;
  font-weight: normal;
  color: #000;
  line-height: 1.25;
}

p {
  position: absolute;
  bottom: 0;
  font-size: 14px;
}

.container {
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 48px;
  margin: 0 auto;
}

.card {
  cursor: pointer;
  position: relative;
  height: 0;
  padding-bottom: 120%;
  --offset-multiplier: 4px;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  --translate: 0;
  -webkit-transform: translate(var(--translate), var(--translate));
          transform: translate(var(--translate), var(--translate));
}
.card:hover {
  --offset-multiplier: 6px;
}
.card:hover {
  --translate: calc(-1px * (var(--cards) - 1));
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px -4px 8px rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  transition: inherit;
  --translate: calc(var(--offset) * var(--offset-multiplier));
  -webkit-transform: translate(var(--translate), var(--translate));
          transform: translate(var(--translate), var(--translate));
  z-index: 5;
}
.child:nth-child(1) {
  --offset: 0;
  z-index: 4;
}
.child:nth-child(2) {
  --offset: 1;
  z-index: 3;
}
.child:nth-child(3) {
  --offset: 2;
  z-index: 2;
}
.child:nth-child(4) {
  --offset: 3;
  z-index: 1;
}
.child:nth-child(5) {
  --offset: 4;
  z-index: 0;
}
.child:nth-child(6) {
  --offset: 5;
  z-index: -1;
}
.child:nth-child(7) {
  --offset: 6;
  z-index: -2;
}
.child:nth-child(8) {
  --offset: 7;
  z-index: -3;
}
.child:nth-child(9) {
  --offset: 8;
  z-index: -4;
}
.child:nth-child(10) {
  --offset: 9;
  z-index: -5;
}

If so, you just save it in style.css.
Next to the next step is to make the html. You can note the code below:

<div class="container">
  <div class="card" style="--cards:5;">
    <div class="child">
      <h2>Why do I need a will</h2>
      <p>5 articles</p>
    </div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="card" style="--cards:3;">
    <div class="child">
      <h2>How to choose who inherits your estate</h2>
      <p>3 articles</p>
    </div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="card" style="--cards:2;">
    <div class="child">
      <h2>What happens when you die</h2>
      <p>2 articles</p>
    </div>
    <div class="child"></div>
  </div>
  <div class="card" style="--cards:4;">
    <div class="child">
      <h2>How to choose guardians</h2>
      <p>4 articles</p>
    </div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="card" style="--cards:4;">
    <div class="child">
      <h2>Why you've been disinherited</h2>
      <p>4 articles</p>
    </div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="card" style="--cards:3;">
    <div class="child">
      <h2>How to commit fraud, legally</h2>
      <p>3 articles</p>
    </div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="card" style="--cards:5;">
    <div class="child">
      <h2>Stay together for the kids</h2>
      <p>5 articles</p>
    </div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="card" style="--cards:3;">
    <div class="child">
      <h2>Picking music for your funeral</h2>
      <p>3 articles</p>
    </div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Save the code above again, and name it index.html or whatever you want to be named according to your wishes.

If all the equipment is complete and you follow the method as I have given above, please immediately see what it looks like and how it works.

For a live demo, you can see via the button below:

Live Demo
That is the tutorial for today that I can give. Hopefully it can be useful for everyone and thank you for reading this article.

Tags: Blogging Tutorials

Share this: