The Power of Pure CSS - No JavaScript Needed

72

CSS Grid Layout

By: pixeldev

.body{
        display: flex;
        justify-content: center;
        height: 100vh;
        background: #240229;
	}

.loader{
        margin-top:8%; 
        position: relative;
        width: 70%;
        height: 70%;
        border-radius: 5% ;
        background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
        animation: animate 0.5s linear infinite;
	}

.loader span{
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 5% ;
        background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0); 
        animation: animate 0.5s linear infinite;
	}

.loader span:nth-child(1){
        filter: blur(5px);
	}

.loader span:nth-child(2){
        filter: blur(10px);
	}

.loader span:nth-child(3){
        filter: blur(25px);
	}

.loader span:nth-child(4){
        filter: blur(50px);
	}

.loader:after{
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: #240229;
        border-radius: 5%;
	}

h1{
        position: absolute;
        margin: 0%;
        padding: 0%;
        margin-top: 12%;
        letter-spacing: 5px;
        color: rgb(196, 146, 230);
        font-family: "Comic Sans MS", cursive, sans-serif;
	}

q{
        position: absolute;
        margin: 0%;
        padding: 0%;
        margin-top: 20%;
        color: rgb(196, 146, 230); 
        font-family: "Comic Sans MS", cursive, sans-serif;
	}

.glow {
        -webkit-animation-duration: 1s;
        -webkit-animation-name: glow;
        -webkit-animation-direction: alternate;
        -webkit-animation-iteration-count: infinite;
        animation-duration: 1s;
        animation-name: glow;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    
	}

@-webkit-keyframes glow {
        from { text-shadow: 0 0 0px rgb(196, 146, 230); }
        to { text-shadow: 0 0 20px rgb(196, 146, 230); }
	}

72

Happy birthday banner

By: pixeldev

*{
	margin: 0; padding: 0;
	list-style-type: none;
}

body{
  background:#dae;
}

#container{
	width: 1200px;
	margin: 20px auto;
}

#myContent{
	-moz-column-count: 6;
	-moz-column-gap: 0px;
	-webkit-column-count: 6;
	-webkit-column-gap: 0px;
	column-count: 6;
	column-gap: 0px;
	width: 1200px;
}

#myContent li{
	display: inline-block;
	margin-bottom: 0px;
	width: 100%;
	margin-top: 0px;
}

#item{
    padding:10px;
    border:solid 4px transparent;
    background:#eee;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}
#item div{
    background:#cef;
    height:50px;
    width:100%;
}

@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#myContent{
		-moz-column-count: 5;
		-moz-column-gap: 0px;
		-webkit-column-count: 5;
		-webkit-column-gap: 0px;
		column-count: 5;
		column-gap: 0px;
		width: 1000px;
	}
	
	#container{
		width: 1000px;
	}
}

@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#myContent{
		-moz-column-count: 4;
		-moz-column-gap: 0px;
		-webkit-column-count: 4;
		-webkit-column-gap: 0px;
		column-count: 4;
		column-gap: 0px;
		width: 800px;
	}
	
	#container{
		width: 800px;
	}
}

@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#myContent{
		-moz-column-count: 3;
		-moz-column-gap: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 0px;
		column-count: 34;
		column-gap: 0px;
		width: 600px;
	}
	
	#container{
		width: 600px;
	}
}

@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#myContent{
		-moz-column-count: 2;
		-moz-column-gap: 0px;
		-webkit-column-count: 2;
		-webkit-column-gap: 0px;
		column-count: 2;
		column-gap: 0px;
		width: 400px;
	}
	
	#container {
		width: 400px;
	}
}

@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
	#myContent {
		-moz-column-count: 1;
		-moz-column-gap: 0px;
		-webkit-column-count: 1;
		-webkit-column-gap: 0px;
		column-count: 1;
		column-gap: 0px;
		width: 200px;
	}
	
	#container {
		width: 200px;
	}
}

67

Pure CSS Layouts Examples

By: pixeldev

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

/* OTHER STYLES */

body {
  background-color: #3b404e;
  display: flex;
  justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.item {
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  color: #ffffff;
  border-radius: 4px;
  border: 6px solid #171717;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.header {
  background-color: #1EAAFC;
  background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

.sidebar {
  background-image: linear-gradient(203deg, #3EDFD7 0%, #29A49D 90%)
}

.content-1,
.content-2,
.content-3 {
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
}

.footer {
  background-color: #6C52D9;
  background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

63

CSS Grid Layout – with color

By: pixeldev

53

Pure CSS masonry layout

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;
    }
}

52

Responsive tables with pure CSS using Grid Layout Module

By: pixeldev

51

Card masonry layout 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);
}

51

100% Responsive Page Example in Pure CSS

By: pixeldev

<main>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Paleo_food.jpg">
      <h3>1) All of These Headlines Are Not Exactly The Same</h3>
      <p>In the real world, you don't know how long the content will be. Writers will write what they need. Photos will be cropped to the shape that they should be. That's good. Make a system that allows this. You want it to be flexible and robust.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Indian_bengali_food.jpg">
      <h3>2) Some Are Short</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Food_in_Miyajima.jpg">
      <h3>3) Some Headlines Can Sometimes Be Quite Long, Because It Takes Time to Make A Point</h3>
      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P1-Food_with_love.jpg">
      <h3>4) Also, Why Are We Using Fake Content? Let's Make Some Real-ish Content.</h3>
      <p>By using real content, we can see the variation inherent in what this site might present. And we can design for those real world needs.
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Beautiful_Chaldean_Food_for_Everyone.jpg">
      <h3>5) Look At That</h3>
      <p>Doesn't that look yummy?</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Birds_on_stick_Shanghai_Qibao.jpg">
      <h3>6) See how this layout is broken?</h3>
      <p>That's because floats are really crap at handling layout. We've been using a screwdriver as a hammer. It sort of works, but badly.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Restaurant_food_Kunming_Yunnan.jpg">
      <h3>7) The New CSS Will Fix Things</h3>
      <p>Finally we get some real hammers.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Bunter_Teller.jpg">
      <h3>8) Several Kinds of Hammers</h3>
      <p>Grid, Flexbox, Alignment, Shapes, .</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P3-Egyptian_food_Koshary.jpg">
      <h3>9) Size, Isn't That Magical!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Mexican_food.jpg">
      <h3>10) All of These Headlines</h3>
      <p>Always three lines of text, which fits exactly in the available space. Describing where you will go when you click.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P2-Arepitas_Food_Macro.jpg">
      <h3>11) Are Exactly the Same</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Ravenna_food.jpg">
      <h3>12) Size, Isn't That Magical!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
</main>

50

CSS Grid: Columns (Pure CSS Masonry Layout)

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>