The Power of Pure CSS - No JavaScript Needed

22

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

22

CSS Grid: Columns (Pure CSS Masonry Layout)

By: pixeldev

22

Pure CSS table gadgets

By: pixeldev

.carousel-wrapper {
  width: 520px; /* 400px * 1.3 */
  height: 350px; /* 250px * 1.4 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
  border-radius: 20px;
  margin: 100px auto 20px;
}

.carousel-container {
  width: 400px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel {
  display: flex;
  width: 1200px; /* 400px * 3 */
  animation: sliding 12s infinite;
}

.carousel div {
  width: 400px;
  height: 250px;
  background-size: cover;
  background-position: center;
}

.carousel:hover {
  animation-play-state: paused;
}

.carousel .image-one {
  background-image: url("https://images.unsplash.com/photo-1480936600919-bffa6b7ecf1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-two {
  background-image: url("https://images.unsplash.com/photo-1475053081036-c8eb31d187b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-three {
  background-image: url("https://images.unsplash.com/photo-1525278070609-779c7adb7b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

@keyframes sliding {
  30% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-400px);
  }
  65% {
    transform: translateX(-400px);
  }
  70% {
    transform: translateX(-800px);
  }
  98% {
    transform: translateX(-800px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Responsive: max-width 768px */
@media screen and (max-width: 768px) {
  .carousel-wrapper {
    width: 312px; /* 240px * 1.3 */
    height: 210px; /* 150px * 1.4 */
  }

.carousel-container {
    width: 240px;
    height: 150px;
  }

.carousel {
    width: 720px; /* 240px * 3 */
  }

.carousel div {
    width: 240px;
    height: 150px;
  }

@keyframes sliding {
    30% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(-240px);
    }
    65% {
      transform: translateX(-240px);
    }
    70% {
      transform: translateX(-480px);
    }
    98% {
      transform: translateX(-480px);
    }
    100% {
      transform: translateX(0);
    }
  }
}

22

Responsive Sliding Carousel (CSS Animation Journey Collection)

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

22

Pure CSS Layouts Examples

By: pixeldev

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 10rem;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.15rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0cf;
  border-radius: 10rem;
  z-index: -2;
}

.button:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #0099cc; /* manually darkened #0cf */
  transition: all 0.3s;
  border-radius: 10rem;
  z-index: -1;
}

.button:hover {
  color: #fff;
}

.button:hover:before {
  width: 100%;
}

/* Optional reset for presentation */
* {
  font-family: Arial;
  text-decoration: none;
  font-size: 20px;
}

.container {
  padding-top: 50px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 2rem;
  color: #777;
}

22

Pure Css Button Hover effect

By: pixeldev

body {
    background: #282828; /* #492540/* #282828; */
}

#grid {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding: 0; /* Clears unordered list default of 40px */
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}
#grid li {
    list-style-type: none;
    position: relative;
    float: left;
    width: 27.85714285714286%;
    padding: 0 0 32.16760145166612% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
    background: fd005f;
    visibility: hidden;
    overflow: hidden;
}
#grid li .hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdbf00;
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
}
#grid li * {
    visibility: visible;
}
#grid li:nth-child(3n+2) {
  margin: 0 1%;
}
#grid li:nth-child(6n+4), #grid li:nth-child(6n+5), #grid li:nth-child(6n+6) {
    margin-top: -6.9285714285%;
    margin-bottom: -6.9285714285%;
    -o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#grid li:nth-child(6n+4) { 
    margin-left: 0.5%;
}

22

Pure CSS Hexagonal Grid

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">