CSS for an "index card" effect:

<div class="card-title">
      Milkshake
    </div>
  <div class="card">
    
    <span class="card-text">
      <ul>
        <li>1c 2% milk</li>
        <li>1/8c cream</li>
        <li>1c ice cream</li>
      </ul>
      <p>Blend well, top with whipped cream or crushed candy, and serve cold.</p>
    </span>
  </div>
/* Styling specific to an index card */
.card {
  background-color: white;
  background: repeating-linear-gradient(rgb(240,250,250), rgb(240,250,250) 25px, #9198e5 26px, #9198e5 27px);
  height: 300px;
  width: 500px;
  padding: 0;
}
.card-title {
  background-image: linear-gradient(rgb(240,250,250), rgb(240,250,250) 42px, pink 43px, pink 44px, rgb(240,250,250) 46px);
  height: 46px;
  width: 500px;
  padding-left: 25px;
  padding-top: 3px;
  color: black;
  line-height: 46px;
  font-size: 30px;
  font-weight: bold;
}
.card-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 18px;
  line-height: 27px;
  padding-top: 4px;
}
p {
  padding-left: 25px;
}

CSS Tips:


Tags: presentation   browser  

Last modified 19 May 2022