The Power of Pure CSS - No JavaScript Needed

body {
  text-align:center;
}
header {
  display:inline-table;
  vertical-align:middle;
  margin:1em ;
  padding:0.5em 1em;
  background:
    linear-gradient(
      to right,
      transparent 20%,
      turquoise 20%,
      turquoise 80%,
      transparent 80%
    ) bottom no-repeat,
    linear-gradient(
      to top,
      turquoise 0%,
      turquoise 300%
    ) right 300% no-repeat,
    linear-gradient(
      to right,
      turquoise 0%,
      turquoise 100%
    )   9000% 0 no-repeat,
    linear-gradient(
      to top,
      turquoise 0%,
      turquoise 300%
    ) left 9000% no-repeat
    ;  
  transition:background-size 2s ease-in;
}
header, header ~ header:hover {
  background-size: 
    100% 8px, 
    3px 0, 
    3px 3px, 
    3px 0;

}
header:hover, header ~ header {
  background-size: 
    200% 3px , 
    3px 100%, 
    100% 3px, 
    3px 100%;
  transition:background-size 2s ease-in-out;
}

span {
  font-size:4em;
  display:inline-block;
  vertical-align:middle;
  background:turquoise;
  border-radius:100%;
  box-shadow:0 0 5px;
}

70

Border Animation

By: pixeldev

<title>Responsive Tables</title>

<section>
   <ol class="collection collection-container">
     
     <li class="item item-container">
       <div class="attribute"></div>
       <div class="attribute" data-name="#">#</div>
       
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">Part Number</div>
           <div class="attribute" data-name="Part Description">Part Description</div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute">Vendor Number</div>
           <div class="attribute">Vendor Name</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute">Order Qty</div>
         <div class="attribute">Receive Qty</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute">Cost</div>
         <div class="attribute">Extended Cost</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute">Duty %</div>
         <div class="attribute">Duty</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute">Freight %</div>
         <div class="attribute">Freight</div>
       </div>
       <div class="attribute">UOM</div>
       <div class="attribute">Vendor Part Number</div>
     </li>
      
     <li class="item item-container">
       <div class="attribute" data-name="Select"></div>
       <div class="attribute" data-name="#">1</div>
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">100-10001</div>
           <div class="attribute" data-name="Part Description">Description of part</div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute" data-name="Vendor Number">001</div>
           <div class="attribute" data-name="Vendor Name">Vendor Name A</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute" data-name="Order Qty">10</div>
         <div class="attribute" data-name="Receive Qty">20</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute" data-name="Cost">$5.00</div>
         <div class="attribute" data-name="Extended Cost">$2.00</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute" data-name="Duty %">3.0%</div>
         <div class="attribute" data-name="Duty">$0.15</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute" data-name="Freight %">3.0%</div>
         <div class="attribute" data-name="Freight">$0.15</div>
       </div>
       <div class="attribute" data-name="UOM">EA</div>
       <div class="attribute" data-name="Vendor Part Number">100001</div>
     </li>
     <li class="item item-container">
       <div class="attribute" data-name="Select"></div>
       <div class="attribute" data-name="#">2</div>
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">100-10002</div>
           <div class="attribute" data-name="Part Description">A long description of part. This description may overflow.
           </div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute" data-name="Vendor Number">002</div>
           <div class="attribute" data-name="Vendor Name">Vendor Name B</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute" data-name="Order Qty">10</div>
         <div class="attribute" data-name="Receive Qty">20</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute" data-name="Cost">$5.00</div>
         <div class="attribute" data-name="Extended Cost">$2.00</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute" data-name="Duty %">3.0%</div>
         <div class="attribute" data-name="Duty">$0.15</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute" data-name="Freight %">3.0%</div>
         <div class="attribute" data-name="Freight">$0.15</div>
       </div>
       <div class="attribute" data-name="UOM">EA</div>
       <div class="attribute" data-name="Vendor Part Number">E4-64B</div>
     </li>
   </ol>
</section>

ol.collection {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

* {
    box-sizing: border-box;
}

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

.item {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

/* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container>li:first-child {
        display: none;
    }

.attribute::before {
        content: attr(data-name);
    }

/* Attribute name for first column, and attribute value for second column. */
    .attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tabular Layout */
@media screen and (min-width: 737px) {
    /* The maximum column width, that can wrap */
    .item-container {
        display: grid;
        grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
    }

.attribute-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

/* Definition of wrapping column width for attribute groups. */
    .part-information {
        --column-width-min: 10em;
    }

.part-id {
        --column-width-min: 10em;
    }

.vendor-information {
        --column-width-min: 8em;
    }

.quantity {
        --column-width-min: 5em;
    }

.cost {
        --column-width-min: 5em;
    }

.duty {
        --column-width-min: 5em;
    }

.freight {
        --column-width-min: 5em;
    }

.collection {
        border-top: 1px solid gray;
    }

/* In order to maximize row lines, only display one line for a cell */
    .attribute {
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.collection-container>.item-container:first-child {
        background-color: blanchedalmond;
    }

.item-container:hover {
        background-color: rgb(200, 227, 252);
    }

/* Center header labels */
    .collection-container>.item-container:first-child .attribute {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }
}

69

Responsive tables with pure CSS using Grid Layout Module

By: pixeldev

<h1 class="heading1">Our Partners</h1>

<div class="rc-carousel" style="--tiles: 18">
  
  <div class="rc-carousel-strip">
    
    <div class="rc-carousel-box">
      
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" />
      </div>

<div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" />
      </div>
      
    </div>
    
  </div>
  
</div>

<div class="rc-carousel" style="--tiles: 18">
  
  <div class="rc-carousel-strip reverse">
    
    <div class="rc-carousel-box">
      
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" />
      </div>
      <div class="rc-carousel-item">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" />
      </div>
      
      
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" />
      </div>
      <div class="rc-carousel-item" aria-hidden="true">
        <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" />
      </div>
      
    </div>
    
  </div>
  
</div>

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 versions
*/

/* Base css */
html {
  font-size: 80%;
}
body {
  --body-bg: #eee;
  margin: 0;
  padding: 2rem 2rem 4rem;
  background: var(--body-bg);
  color: #212121;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
}

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 100%;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 125%;
  }
}
@media screen and (min-width: 2560px) {
  html {
    font-size: 150%;
  }
}

/* Heading */
.heading1 {
  font-size: 2rem;
  text-align: center;
}

/* reference */
.reference {
  text-align: center;
}

/* reference link */
.reference-link {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Carousel and animation css starts */
.rc-carousel {
  --box-gap: 1.5rem;
  --tile-size: 8rem;
  width: 100%;
  max-width: calc(
    (var(--tile-size) + var(--box-gap)) * ((var(--tiles) / 2) - 1)
  );
  margin: var(--box-gap) auto;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.rc-carousel::before,
.rc-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 5rem;
  height: 100%;
  background-image: -webkit-gradient(
    linear,
    ,
    from(transparent),
    to(var(--body-bg))
  );
  background-image: -o-linear-gradient(
    var(--direction),
    transparent,
    var(--body-bg)
  );
  background-image: linear-gradient(
    to var(--direction),
    transparent,
    var(--body-bg)
  );
  z-index: inherit;
}
.rc-carousel::before {
  left: 0;
  --direction: left;
}

.rc-carousel::after {
  right: 0;
  --direction: right;
}
.rc-carousel-strip {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-animation: slideX 20s linear infinite;
  animation: slideX 20s linear infinite;
}
.rc-carousel-strip.reverse {
  /* reverse animation */
  animation-direction: reverse;
}
.rc-carousel-strip:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.rc-carousel-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: var(--box-gap);
}

.rc-carousel-item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: var(--tile-size);
  height: var(--tile-size);
}

.rc-carousel-item-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@-webkit-keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

@keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

/* Animation won't work if you preferes reduced motion */
@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */
  .rc-carousel::before,
  .rc-carousel::after {
    display: none;
  }
  .rc-carousel-box {
    flex-wrap: wrap;
    justify-content: center;
  }
  .rc-carousel-box [aria-hidden="true"] {
    display: none;
  }
  .rc-carousel-strip {
    animation: none;
  }
}
/* reduced motion css ends */
/* Carousel and animation css ends */

/* Footer and credits styles */
.footer {
  position: fixed;
  z-index: 99;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background: #fff;
  font-size: 0.75rem;
  text-align: right;
  font-weight: 600;
}

69

Continuous infinite Animation Image carousel – Pure CSS

By: pixeldev

html, body {
  margin:0;
  padding:0;
}

.comic {
  display:flex;
  flex-wrap:wrap;
  font-family:'Comic Sans', cursive;
  padding:1vmin;
}

.panel {
  background-color:#fff;
  border:solid 2px #cecece;
  box-shadow:0 6px 6px -6px #333;
  display:inline-block;
  flex:1 1;
  height:200px;
  margin:1vmin;
  overflow:hidden;
  position:relative;
}

.text {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.top-left {
  left:-6px;
  position:absolute;
  top:-2px;
  transform:skew(-15deg);
}

.bottom-right {
  bottom:-2px;
  position:absolute;
  right:-6px;
  transform:skew(-15deg);
}

.speech {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position:relative;
}

.speech:before {
  border:solid 12px transparent;
  border-left:solid 12px #000;
  border-top:solid 12px #000;
  bottom:-24px;
  content:"";
  height:0;
  left:24px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.speech:after {
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  left:27px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.panel:nth-child(1) {
  flex-basis: 400px;
}
.panel:nth-child(2) {
  flex-basis: 200px;
}
.panel:nth-child(3) {
  flex-basis: 200px;
}
.panel:nth-child(4) {
  flex-basis: 200px;
}
.panel:nth-child(5) {
  flex-basis: 200px;
}
.panel:nth-child(6) {
  flex-basis: 200px;
}
.panel:nth-child(7) {
  flex-basis: 400px;
}
.panel:nth-child(8) {
  flex-basis: 200px;
}
.panel:nth-child(9) {
  flex-basis: 200px;
}

/* background colours */

.panel:nth-child(4n+1) {
  background-image:radial-gradient(circle, pink, red);
}

.panel:nth-child(4n+2) {
  background-image:radial-gradient(circle, pink, #65378F);
}

.panel:nth-child(4n+3) {
  background-image:radial-gradient(circle, #999, #333);
}

.panel:nth-child(4n+4) {
  background-image:radial-gradient(circle, #cecece, #3366FF);
}

69

100% Responsive Page Example in Pure CSS

By: pixeldev

69

Pure CSS Horizontal Accordion

By: pixeldev

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Twitter</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="First Name">James</td>
      <td data-column="Last Name">Matman</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@james</td>
    </tr>
    <tr>
      <td data-column="First Name">Andor</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Designer</td>
      <td data-column="Twitter">@andornagy</td>
    </tr>
    <tr>
      <td data-column="First Name">Tamas</td>
      <td data-column="Last Name">Biro</td>
      <td data-column="Job Title">Game Tester</td>
      <td data-column="Twitter">@tamas</td>
    </tr>
    <tr>
      <td data-column="First Name">Zoli</td>
      <td data-column="Last Name">Mastah</td>
      <td data-column="Job Title">Developer</td>
      <td data-column="Twitter">@zoli</td>
    </tr>
    <tr>
      <td data-column="First Name">Szabi</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@szabi</td>
    </tr>
  </tbody>
</table>

table { 
	width: 750px; 
	border-collapse: collapse; 
	margin:50px auto;
	}

/* Zebra striping */
tr:nth-of-type(odd) { 
	background: #eee; 
	}

th { 
	background: #3498db; 
	color: white; 
	font-weight: bold; 
	}

td, th { 
	padding: 10px; 
	border: 1px solid #ccc; 
	text-align: left; 
	font-size: 18px;
	}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

table { 
	  	width: 100%; 
	}

/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}

td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		/* Label the data */
		content: attr(data-column);

color: #000;
		font-weight: bold;
	}

}

68

Pure CSS Responsive Table.

By: pixeldev

<div class="cat-container">
  <div class="cat-size cat-one">
    <a class="b" href="https://lenadesign.org/html/" target="_blank">
    <div class="center">
        <h1 class="title-html">HTML</h1></a>
    <p class="textHTML">HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
      <a class="a" href="https://lenadesign.org/html/" target="_blank"><p class="learnHTML">LEARN HTML></p></a>
    </div>
    </div>
  
    <div class="cat-size cat-two">
      <div class="center">
        <a class="b" href="https://lenadesign.org/css/" target="_black">
          <h1 class="title-css">CSS</h1></a>
      <p class="textCSS">CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.</p>
        <a class="a" href="https://lenadesign.org/css/" target="_black">
          <p class="learnCSS">LEARN CSS></p></a>
      </div>
    </div>
    <div class="cat-size cat-three">
      <div class="center">
        <a class="b" href="https://lenadesign.org/javascript/" target="_blank">
          <h1 class="title-js">JavaScript</h1></a>
      <p class="textJS">JavaScript is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.</p>
        <a class="a" href="https://lenadesign.org/javascript/" target="_blank">
          <p class="learnJS">LEARN JavaScript></p></a>
      </div>
    </div>
    <div class="cat-size cat-four">
      <div class="center">
        <a class="b" href="https://lenadesign.org/jquery/" target="_blank">
          <h1 class="title-jQ">jQuery</h1></a>
      <p class="textJQ">jQuery is a JavaScript library created to simplify and make it easier to write JavaScript and HTML.</p>
        <a class="a" href="https://lenadesign.org/jquery/" target="_blank">
          <p class="learnJQ">LEARN jQuery></p></a>
      </div>
    </div>
    <div class="cat-size cat-five">
      <div class="center">
        <a class="b" href="https://lenadesign.org/svg-4/" target="_blank">
          <h1 class="title-svg">SVG</h1></a>
      <p class="textSVG">SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.</p>
        <a class="a" href="https://lenadesign.org/svg-4/" target="_blank">
          <p class="learnSVG">LEARN SVG></p></a>
      </div>
    </div>
    <div class="cat-size cat-six">
      <div class="center">
         <a class="b" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank">
           <h1 class="title-a">Animations</h1></a>
      <p class="textA">Learn how to create amazing animations using HTML, CSS and JavaScript!</p>
        <a class="a" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank">
          <p class="learnA">Animations></p></a>
      </div>
    </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');

body {
  margin:0;
  padding:0;
}

.cat-container {
	position: relative;
	height: 100vh;
	width: 100%;
  display: -webkit-flex;
	display: flex;
  font-family: 'Fira Sans', sans-serif;
	overflow: hidden;
  color: white;
}

@media screen and (max-width: 768px) {
  .cat-container {flex-direction: column;}
}

@media screen and (max-width: 480px) {
  .cat-container {flex-direction: column;}
}

.cat-size {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content:center;
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
}

.cat-one, .cat-two, .cat-three, .cat-four, .cat-five, .cat-six {
  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;
	-moz-transition: flex-grow .3s;
	-ms-transition: flex-grow .3s;
	-o-transition: flex-grow .3s;
  width:100%;
  height: 100vh;
}

.cat-one {
  background-color: #56ab91;
}

.cat-two {
  background-color: #469d89;
}

.cat-three {
  background-color: #4358f80;
}

.cat-three {
  background-color: #358f80;
}

.cat-four {
  background-color: #248277;
}

.cat-five {
  background-color: #14746f;
}

.cat-six {
  background-color: #036666;
}

.cat-one:hover {
  flex-grow: 3;
}

.cat-two:hover {
  flex-grow: 3;
}

.cat-three:hover {
  flex-grow: 3;
}

.cat-four:hover {
  flex-grow: 3;
}

.cat-five:hover {
  flex-grow: 3;
}

.cat-six:hover {
  flex-grow: 3;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 2;
  text-align: center;
  width:100%;
  height: 100vh;

}

.title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {
  writing-mode: vertical-rl; 
  margin: 30px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.cat-one:hover .title-html {
  writing-mode: horizontal-tb; 
}

.cat-two:hover .title-css {
  writing-mode: horizontal-tb; 
}

.cat-three:hover .title-js {
  writing-mode: horizontal-tb; 
}

.cat-four:hover .title-jQ {
  writing-mode: horizontal-tb; 
}

.cat-five:hover .title-svg {
  writing-mode: horizontal-tb; 
}

.cat-six:hover .title-a {
  writing-mode: horizontal-tb; 
}

@media screen and (max-width: 768px) {
  .title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {writing-mode: horizontal-tb !important; 
  }
  .textHTML, .learnHTML, .textCSS, .learnCSS, .textJS, .learnJS, .learnJQ, .textJQ, .learnA, .textA, .learnSVG, .textSVG {
    display: none !important;
  }
}

.textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA, .learnHTML, .learnCSS, .learnJS, .learnJQ, .learnSVG, .learnA {
  display: none;
}

.cat-one:hover .textHTML {
 display: block;
 animation: up .5s ease forwards;
}

.textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA {
  width:50%;
  border: 3px solid white;
  border-radius:20px;
  padding:20px;
}

.cat-one:hover .learnHTML {
 display: block;
 animation: up .5s ease forwards;
}

.cat-two:hover .learnCSS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-three:hover .learnJS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-three:hover .textJS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-two:hover .textCSS {
 display: block;
 animation: up .5s ease forwards;
}

.cat-four:hover .textJQ {
 display: block;
 animation: up .5s ease forwards;
}

.cat-four:hover .learnJQ {
 display: block;
 animation: up .5s ease forwards;
}

.cat-five:hover .learnSVG {
 display: block;
 animation: up .5s ease forwards;
}

.cat-six:hover .learnA {
 display: block;
 animation: up .5s ease forwards;
}

.cat-six:hover .textA {
 display: block;
 animation: up .5s ease forwards;
}

.cat-five:hover .textSVG {
 display: block;
 animation: up .5s ease forwards;
}

@keyframes up {
  0% {opacity:0; transform: translateY(50px);}
  50% {opacity:0; transform: translateY(50px);}
  100% {{opacity:1; transform: translateY(0px);}}
}

.a {
  text-decoration: underline;
  color: white;
}

.b {
  text-decoration: none;
  color: white;
}

68

Pure CSS Responsive Navigation Menu (sliding effect)

By: pixeldev

68

Card masonry layout Pure CSS

By: pixeldev

<section id="slideshow">
			<div class="entire-content">
				<div class="content-carrousel">
					<figure class="shadow"><img src="https://images.pexels.com/photos/758733/pexels-photo-758733.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/21261/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/776653/pexels-photo-776653.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/131046/pexels-photo-131046.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/302515/pexels-photo-302515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/301682/pexels-photo-301682.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/933054/pexels-photo-933054.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
		</div>
	</div>
</section>

/* 3D Slideshow */ 
* {
	margin: 0;
	padding: 0;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: #6adecd;
}

#slideshow {
	margin: 0 auto;
	padding-top: 50px;
	height: 600px;
	width: 100%;
	background-color: #6adecd;
	box-sizing: border-box;
}

.slideshow-title {
	font-family: 'Allerta Stencil';
	font-size: 62px;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	margin-top: 25%;
	letter-spacing: 3px;
	font-weight: 300;
}

.sub-heading {
	padding-top: 50px;
	font-size: 18px;
} .sub-heading-two {
	font-size: 15px;
} .sub-heading-three {
	font-size: 13px;
} .sub-heading-four {
	font-size: 11px;
} .sub-heading-five {
	font-size: 9px;
} .sub-heading-six {
	font-size: 7px;
} .sub-heading-seven {
	font-size: 5px;
} .sub-heading-eight {
	font-size: 3px;
} .sub-heading-nine {
	font-size: 1px;
}

.entire-content {
	margin: auto;
	width: 190px;
	perspective: 1000px;
	position: relative;
	padding-top: 80px;
}

.content-carrousel {
	width: 100%;
	position: absolute;
	float: right;
	animation: rotar 15s infinite linear;
	transform-style: preserve-3d;
}

.content-carrousel:hover {
	animation-play-state: paused;
	cursor: pointer;
}

.content-carrousel figure {
	width: 100%;
	height: 120px;
	border: 1px solid #3b444b;
	overflow: hidden;
	position: absolute;
}

.content-carrousel figure:nth-child(1) {
	transform: rotateY(0deg) translateZ(300px); 
} .content-carrousel figure:nth-child(2) {
	transform: rotateY(40deg) translateZ(300px); 
} .content-carrousel figure:nth-child(3) {
	transform: rotateY(80deg) translateZ(300px); 
} .content-carrousel figure:nth-child(4) {
	transform: rotateY(120deg) translateZ(300px); 
} .content-carrousel figure:nth-child(5) {
	transform: rotateY(160deg) translateZ(300px); 
} .content-carrousel figure:nth-child(6) {
	transform: rotateY(200deg) translateZ(300px); 
} .content-carrousel figure:nth-child(7) {
	transform: rotateY(240deg) translateZ(300px); 
} .content-carrousel figure:nth-child(8) {
	transform: rotateY(280deg) translateZ(300px); 
} .content-carrousel figure:nth-child(9) {
	transform: rotateY(320deg) translateZ(300px); 
} .content-carrousel figure:nth-child(10) {
	transform: rotateY(360deg) translateZ(300px); 
}

.shadow {
    position: absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius: 1px;
}

.content-carrousel img {
	image-rendering: auto;
	transition: all 300ms;
	width: 100%;
	height: 100%;
}

.content-carrousel img:hover {
	transform: scale(1.2);
	transition: all 300ms;
}

@keyframes rotar {
	from {
		transform: rotateY(0deg);
	} to {
		transform: rotateY(360deg);
	}
}

68

3D Slider | Pure CSS

By: pixeldev

body {
  height: 100vh;
}

.cont {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: inline-block;
}

.dots {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  transform: translate(0px,0px);
}

.d1 {
  transform: rotate(0deg) translateX(80px);
  background: #ff7171;
  animation: orbit1 2.5s ease-in-out infinite alternate;
  z-index: 10;
}

.d2 {
  transform: rotate(-90deg) translateX(80px);
  background: #377b37;
  animation: orbit2 2.5s ease-in-out infinite alternate;
  z-index: 8;
}

.d3 {
  transform: rotate(180deg) translateX(80px);
  background: #afaf29;
  animation: orbit3 2.5s ease-in-out infinite alternate;
  z-index: 6;
}

.d4 {
  transform: rotate(90deg) translateX(80px);
  background: #7a5afb;
  animation: orbit4 2.5s ease-in-out infinite alternate;
  z-index: 4;
}

.d5 {
  transform: rotate(135deg) translateX(80px);
  background: #e62575;
  animation: orbit5 2.5s ease-in-out infinite alternate;
  z-index: 5;
}

.d6 {
  transform: rotate(225deg) translateX(80px);
  background: #967e77;
  animation: orbit6 2.5s ease-in-out infinite alternate;
  z-index: 7;
}

.d7 {
  transform: rotate(315deg) translateX(80px);
  background: #d432c7;
  animation: orbit7 2.5s ease-in-out infinite alternate;
  z-index: 9;
}

.d8 {
  transform: rotate(405deg) translateX(80px);
  background: #00bcd4;
  animation: orbit8 2.5s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(360deg) translateX(0px) scale(1.2,1.2);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(-90deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(270deg) translateX(0px) scale(1.6,1.6);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(180deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(540deg) translateX(0px) scale(2,2);
  }
}

@keyframes orbit4 {
  0% {
    transform: rotate(90deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(450deg) translateX(0px) scale(2.4,2.4);
  }
}

@keyframes orbit5 {
  0% {
    transform: rotate(135deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(495deg) translateX(0px) scale(2.2,2.2);
  }
}

@keyframes orbit6 {
  0% {
    transform: rotate(225deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(585deg) translateX(0px) scale(1.8,1.8);
  }
}

@keyframes orbit7 {
  0% {
    transform: rotate(315deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(675deg) translateX(0px) scale(1.4,1.4);
  }
}

@keyframes orbit8 {
  0% {
    transform: rotate(405deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(765deg) translateX(0px) scale(2.6,2.6);
  }
}

68

Circle(dots) css animation loader

By: pixeldev

68

Button Hover Effect

By: pixeldev

<div class="container">
  <h1>Text</h1>
  <div class="block">
    <div class="p-container">
      <p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

<div class="block">
    <div class="p-container">
      <p class="img-p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt.
      </p>
    </div>
  </div>

</div>

<div class="container">
  <h1>Images</h1>
  <div class="block image">
    <div class="layer"></div>
    <div class="p-container">