The Power of Pure CSS - No JavaScript Needed

72

body{
  background:#133;
}
.container{
  width:200px;
  height:200px;
  margin:10px auto;
  background:;
}
#flame-1{
  height:95px;
  width:95px;
  background:#ff7200;
  position:relative;
  top:52px;
  left:2px;
  margin:30px 70px;
  border-radius:0% 50% 70% 50%;
  transform:rotateZ(45deg) scale(1.1);
  filter: drop-shadow(0 0 10px #d43322);
  animation:scale-alternate 2s ease-in-out infinite;
}
#flame-2{
  height:75px;
  width:75px;
  background:#ef5a00;
  position:relative;
  top:162px;
  left:-20px; 
  margin:30px 70px;
  border-radius:0% 40% 60% 40%;
  transform:scaleX(0.8) rotatez(45deg);
  filter: drop-shadow(0 0 10px #d43322);
  animation: scale-up 2s ease-in-out infinite;
}

#flame-3{
  height:75px;
  width:75px;
  background:#ef5a00;
  position:relative;
  top:-60px;
  left:50px; 
  margin:30px 70px;
  border-radius:0% 40% 60% 40%;
  transform:scaleX(0.8) rotatez(45deg);
  filter: drop-shadow(0 0 10px #d43322);
  animation: scale-up-3 3s ease-in-out infinite;
}
.wood{
  width:20px;
  height:120px;
  background:#563111;
  border-radius:5px;
  }
#wood-1{
  transform:rotate(72deg);
  position:relative;
  top:-220px;
  left:117px;
}

#wood-2{
  transform:rotate(106deg);
  position:relative;
  top:-340px;
  left:115px;
}
.small-element{
  height:20px;
  width:20px;
  border-radius:50%;
  background: #ef5a00;  
  position:relative;
  top:-130px;
  left:110px;
    
}
#small-element-1{
    
  animation: particle-up 3.5s ease-in-out infinite;
  
}
#small-element-2{
    
  animation: particle-up 3s ease-in-out infinite;
  
}

.fire-bottom .main-fire {
  position: relative;
  top: -190px;
  left: 90px;
  width: 55px;
  height: 55px;
  background-color: #ff7800;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 100% 40%;
  filter: blur(8px);
  animation: glow 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;

}
@keyframes glow{
  0%,100%{
    
    background:#ef5a00;
  }
  50%{
    background:#ff7800;

}
  
}

@keyframes scale-up-3{
  0%,100%{
    transform:scale(1.1) rotatez(45deg);
       
  }
  40%,90%{
    transform:scale(0.96) rotatez(45deg);
  }
  30%,75%{
    transform:scale(0.90) rotatez(45deg);
  }
  
  
}

@keyframes scale-up{
  0%,100%{
    transform:scale(1) rotatez(45deg);
       
  }
  40%,90%{
    transform:scale(0.96) rotatez(45deg);
  }
  30%,75%{
    transform:scale(0.90) rotatez(45deg);
  }
  
  
}

@keyframes scale-alternate{
   0%,100%{
    transform:scale(1.1) rotatez(45deg);
       
  }
  30%,90%{
    transform:scale(0.90) rotatez(45deg);
  }
   45%,60%{
    transform:scale(0.96) rotatez(45deg);
  }
  50%,75%{
    transform:scale(0.97) rotatez(45deg);
  }
  
  
}
@keyframes particle-up{
  0%{
    top:-130px;
    left:110px;
  }
  100%{
    position:relative;
    opacity:0.8;
    top:-270px;
     left:145px;
    transform:scale(0.1);
    
  }
  
  
}

72

Fire Animation

By: pixeldev

body
{
  background-color:#f2f2f2;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

*
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h5
{
  margin:0px;
  font-size:1.4em;
  font-weight:700;
}

p
{
  font-size:12px;
}

.center
{
  height:100vh;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* End Non-Essential  */

.property-card
{
  height:18em;
  width:14em;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  position:relative;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius:16px;
  overflow:hidden;
  -webkit-box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image
{
  height:6em;
  width:14em;
  padding:1em 2em;
  position:Absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
  background-size:cover;
  background-repeat:no-repeat;
}

/* Bottom Card Section */

.property-description
{
  background-color: #FAFAFC;
  height:12em;
  width:14em;
  position:absolute;
  bottom:0em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0.5em 1em;
  text-align:center;
}

/* Social Icons */

.property-social-icons
{
  width:1em;
  height:1em;
  background-color:black;
  position:absolute;
  bottom:1em;
  left:1em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Property Cards Hover States */

.property-card:hover .property-description
{
  height:0em;
  padding:0px 1em;
}
.property-card:hover .property-image
{
  height:18em;
}

.property-card:hover .property-social-icons
{
  background-color:white;
}

.property-card:hover .property-social-icons:hover
{
  background-color:blue;
  cursor:pointer;
}

/* Optional

.property-image-title
{
text-align:center;
position:Relative;
top:30%;
opacity:0;
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
color:black;
font-size:1.2em;
}

.property-card:hover .property-image-title
{
opacity:1;
}

*/

72

Pure CSS Card w/ Social Icons

By: pixeldev

72

Hexagon to Square

By: pixeldev

72

Bouncing text

By: pixeldev

<h1>Flip Cards Responsive</h1>

<div class="cardBox">
    <div class="card">
      <div class="front">
        <h3>Card One</h3>
        <p>Hover to flip</p>
        <strong>↻</strong>
      </div>
      <div class="back">
        <h3>Back Side One</h3>
        <p>Content in card one</p>
        <a href="#">Button 1</a>
      </div>
    </div>
  </div>

<div class="cardBox">
    <div class="card">
      <div class="front">
        <h3>Card Two</h3>
        <p>Hover to flip</p>
        <strong>↻</strong>
      </div>
      <div class="back">
        <h3>Back Side Two</h3>
        <p>Content in card two</p>
        <a href="#">Button 2</a>
      </div>
    </div>
  </div>

<div class="cardBox">
    <div class="card">
      <div class="front">
        <h3>Card Three</h3>
        <p>Hover to flip</p>
        <strong>↻</strong>
      </div>
      <div class="back">
        <h3>Back Side Three</h3>
        <p>Content in card three</p>
        <a href="#">Button 3</a>
      </div>
    </div>
  </div>

<div class="cardBox">
    <div class="card">
      <div class="front">
        <h3>Card Four</h3>
        <p>Hover to flip</p>
        <strong>↻</strong>
      </div>
      <div class="back">
        <h3>Back Side Four</h3>
        <p>Content in card four</p>
        <a href="#">Button 4</a>
      </div>
    </div>
  </div>

</div>

body {
  color: #333;
  font-family: Arial, Helvetica, serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  background: url(https://josetxu.com/img/fondo_blanco.png) repeat 0 0 #fff;
}

h1 {
  background: #333;
  color: #fff;
  text-align: center;
  margin: 0 0 5% 0;
  padding: 0.5em;
  margin: 0 0 5% 0;
}

.cardBox {
  float: left;
  font-size: 1.2em;
  margin: 1% 0 0 1%;
  perspective: 800px;
  transition: all 0.3s ease 0s;
  width: 23.7%;
}

.cardBox:hover .card {
  transform: rotateY( 180deg);
}

.card {
  background: #222;
  cursor: default;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease 0s;
  width: 100%;
  -webkit-animation: giro 1s 1;
  animation: giro 1s 1;
}

.card p {
  margin-bottom: 1.8em;
}

.card .front,
.card .back {
  backface-visibility: hidden;
  box-sizing: border-box;
  color: white;
  display: block;
  font-size: 1.2em;
  height: 100%;
  padding: 0.8em;
  position: absolute;
  text-align: center;
  width: 100%;
}

.card .front strong {
  background: #fff;
  border-radius: 100%;
  color: #222;
  font-size: 1.5em;
  line-height: 30px;
  padding: 0 7px 4px 6px;
}

.card .back {
  transform: rotateY( 180deg);
}

.card .back a {
  padding: 0.3em 0.5em;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 1px;
  font-size: 0.9em;
  transition: all 0.2s ease 0s;
}

.card .back a:hover {
  background: #fff;
  color: #333;
  text-shadow: 0 0 1px #333;
}

.cardBox:nth-child(1) .card .back {
  background: cornflowerblue;
}

.cardBox:nth-child(2) .card .back {
  background: orange;
}

.cardBox:nth-child(3) .card .back {
  background: yellowgreen;
}

.cardBox:nth-child(4) .card .back {
  background: tomato;
}

.cardBox:nth-child(2) .card {
  -webkit-animation: giro 1.5s 1;
  animation: giro 1.5s 1;
}

.cardBox:nth-child(3) .card {
  -webkit-animation: giro 2s 1;
  animation: giro 2s 1;
}

.cardBox:nth-child(4) .card {
  -webkit-animation: giro 2.5s 1;
  animation: giro 2.5s 1;
}

@-webkit-keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@media screen and (max-width: 767px) {
  .cardBox {
    margin-left: 2.8%;
    margin-top: 3%;
    width: 46%;
  }
  .card {
    height: 285px;
  }
  .cardBox:last-child {
    margin-bottom: 3%;
  }
}

@media screen and (max-width: 480px) {
  .cardBox {
    width: 94.5%;
  }
  .card {
    height: 260px;
  }
}

72

Flip Cards Responsive – Pure CSS

By: pixeldev

@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');
    		@import url('https://fonts.googleapis.com/css?family=Montserrat:300&display=swap');
        		@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap');
  body {
    
  background: #1f1a25;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  min-height: 100vh;
}
img{
    position: fixed;
  top: -8%;
  left: 0%;
  border-radius: 50px;
  opacity:0.9;
  transition: 0.5s;

}
h1{
  	   transition: transform 2s;
    font-size: 60px;
color: white;
 font-family: 'Big Shoulders Display', cursive;
}
.card:hover > p{
    opacity:1;
       transform: scale(1.5)
    top:80%;
 
}
img:hover .card{
        
  
}
img, #parent {
    cursor: pointer;
    
}
.card:hover > img{
    opacity:1;
       transform: scale(1.4);
             
}
.card header {
    position:absolute;
 
  top: 120%;
  left: 0%;
    padding: 1px;
    border-radius:  25px;
   width: 450px;
         height: 90px;
     transition: all .5s;
    opacity:0;
}
.card:hover > header{
  
    opacity:1;
         width: 450px;
         height: 90px;
             transform: translateY(-120px);
}

.card {

transition: transform .7s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 500px;
  margin: auto;
  text-align: center;
  font-family: arial;
  background: white;
    width: 450px;
  height: 450px;
}
.card:hover{

transform: scale(1.08)
}
  .centeri{ 
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  }
  span{
    
    position: relative;
  }

72

Pure CSS | Product Card

By: pixeldev

<!-- Inspired by: https://try.alexa.com/marketing-stack/seo-tools/ and https://stratus.hr/

With help from https://24ways.org/2010/intro-to-css-3d-transforms/-->

<div class="container">
  <div class="row flip-boxes">
    <div class="col-md-3 col-sm-4 col-8 flip-box">
      <div class="front">
        <div class="content text-center">
          First<br>
          <span class="click-for-more">
          </span>
        </div>
      </div>
      <div class="back">
        <div class="content">
          First Back
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-6 flip-box">
      <div class="front" style="background-image: url(https://thumbs.dreamstime.com/b/countryside-landscape-hillside-beautiful-scenic-view-river-rural-fields-summer-season-89540702.jpg)">
        <div class="content">
          Second
        </div>
      </div>
      <div class="back">
        <div class="content">
          Second Back
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-6 flip-box">
      <div class="front" style="background-image: url(https://llandscapes-ee1.kxcdn.com/wp-content/uploads/2017/09/33945202050_48027b6b38_z.jpg)">
        <div class="content">
          Third
        </div>
      </div>
      <div class="back">
        <div class="content">
          Third Back
        </div>
      </div>
    </div>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.flip-boxes {
  justify-content: center;
}

.flip-box {
  display: flex;
  align-content: stretch;
  min-height: 145px;
  flex-wrap: wrap;
  position: relative;
  border: 10px solid transparent;
  padding: 0;
  border-top: 0;
  perspective: 1000px;
}

.flip-box:hover .back {
  transform: rotateY(0deg);
  z-index: 10;
}

.flip-box:hover .front {
  transform: rotateY(180deg);
  z-index: -1;
}

.flip-box .back,
.flip-box .front {
  position: relative;
  background-color: #1b2d61;
  color: white;
  display: flex;
  justify-content: center;
  align-content: center;
  flex: 0 0 100%;
  transition: all 1s cubic-bezier(0.5, 1.3, 0.5, 1.3);
  transform-style: preserve-3d;
  background-size: cover;
  background-position: center;
}

.flip-box .back {
  background-color: #cecece;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
  transform: rotateY(-180deg);
}

.flip-box .back::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border: 15px solid transparent;
  border-bottom-color: white;
  border-left-color: white;
}

.flip-box .front {
  z-index: 10;
}

.flip-box .front .content {
  font-size: 2rem;
}

.flip-box .front::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border: 15px solid #cecece;
  border-bottom-color: white;
  border-right-color: white;
}

.flip-box .content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateZ(50px);
  text-shadow: 0px 0px 2px black;
}

71

3D Flip Cards Pure CSS and HTML

By: pixeldev

<div class="result">
  <div class="preview">
    <div class="row">
      <div class="hexagon">
        <span>
          <div class="content">
            <p class="title">Title</p>
            <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
          </div>
        </span>
      </div>
      <div class="hexagon">
        <span>
          <div class="content">
            <p class="title">Title</p>
            <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
          </div>
        </span>
      </div>
    </div>
    <div class="row even">
      <div class="hexagon">
      <span>
        <div class="content">
          <p class="title">Title</p>
          <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
        </div>
      </span>
    </div>
    <div class="hexagon">
      <span>
        <div class="content">
          <p class="title">Title</p>
          <p class="description">Lorem ipsum lorem upsum muspu merol lorem upsum muspu merol lorem upsum muspu merol</p>
        </div>
      </span>
    </div>
    </div>
  </div>
</div>

div, div:before, div:after {
  box-sizing: border-box;
}

.result {
  display: inline-block;
  padding: 13.33333px;
  background-color: #fefefe;
  background-image: linear-gradient(45deg, whitesmoke 25%, transparent 25%, transparent 75%, whitesmoke 75%, whitesmoke),
                    linear-gradient(45deg, whitesmoke 25%, transparent 25%, transparent 75%, whitesmoke 75%, whitesmoke);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.preview {
  box-sizing: border-box;
}

.hexagon {
  float: left;
  position: relative;
  width: 300px;
  height: 175px;
  background-color: #0088ff;
  margin: 86px 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-left: solid 150px #333333;
  border-right: solid 150px #333333;
  transition: all 0.3s ease-in;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212px;
  height: 212px;
  transform: scaleY(0.5) rotate(-45deg);
  background-color: inherit;
  left: -106px;
  transition: all 0.3s ease-in;
}

.hexagon::before {
  top: -106px;
  border-top: solid 212px #333333;
  border-right: solid 212px #333333;
}

.hexagon::after {
  bottom: -106px;
  border-bottom: solid 212px #333333;
  border-left: solid 212px #333333;
}

.hexagon span {
  display: block;
  position: absolute;
  top: 86px;
  left: 0;
  width: 0px;
  height: 0px;
  z-index: 2;
  background: inherit;
  opacity: 0;
  transition: all 0.3s ease-in;
  overflow: hidden;
}

.hexagon .content {
  padding: 0 10px;
}

.hexagon .content p {
  color: #fff;
}

.hexagon .content .title {
  font-weight: 100;
  font-size: 26px;
  text-transform: uppercase;
  margin: 10px 0 15px;
}

.hexagon:hover {
  border-left-width: 20px;
  border-right-width: 20px;
}

.hexagon:hover::before,
.hexagon:hover::after {
  left: 24px;
}

.hexagon:hover::before {
  border-top-width: 28px;
  border-right-width: 28px;
}

.hexagon:hover::after {
  border-bottom-width: 28px;
  border-left-width: 28px;
}

.hexagon:hover span {
  opacity: 1;
  top: 11px;
  width: 260px;
  height: 150px;
}

.even {
  padding-left: 160px;
}

.even .hexagon {
  margin: 0 10px 86px 0;
}

body {
  background: #3c9;
  font-family: Helvetica, Arial, sans-serif;
}

71

CSS Hexagon Grid with animation

By: pixeldev

69

Pendulum Wave

By: pixeldev

69

Wavy text animation

By: pixeldev

68

All

Pure CSS Card Flip

By: pixeldev

Fire Animation

By: pixeldev

Pure CSS Card w/ Social Icons

By: pixeldev

Hexagon to Square

By: pixeldev

Bouncing text

By: pixeldev

Flip Cards Responsive – Pure CSS

By: pixeldev

Pure CSS | Product Card

By: pixeldev

3D Flip Cards Pure CSS and HTML

By: pixeldev

CSS Hexagon Grid with animation

By: pixeldev

Pendulum Wave

By: pixeldev

Wavy text animation

By: pixeldev

Expanding Pure CSS Button

By: pixeldev