Css Code Only Pixeldev Code

60

<div class="macbook">
  <div class="inner">
    <div class="screen">
      <div class="face-one">
        <div class="camera"></div>
        <div class="display">
          <div class="shade"></div>
        </div>
        <span>MacBook Air</span>
      </div>
      <img src="http://www.clker.com/cliparts/i/s/H/f/4/T/apple-logo-white.svg" class="logo" />
    </div>
    <div class="body">
      <div class="face-one">
        <div class="touchpad">
        </div>
        <div class="keyboard">
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key space"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
        </div>
      </div>
      <div class="pad one"></div>
      <div class="pad two"></div>
      <div class="pad three"></div>
      <div class="pad four"></div>
    </div>
  </div>
  <div class="shadow"></div>
</div>
<div>
<a href="https://twitter.com/neoberg" target="_blank">@neoberg</a>
<a href="mailto:neoberg@gmail.com">contact me</a>
</div>

body {
  background: #fff;
}

.macbook {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -75px 0 0 -48px;
  perspective: 500px;
}
.shadow {
  position: absolute;
  width: 60px;
  height: 0px;
  left: 40px;
  top: 160px;
  transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  animation: shadow infinite 7s ease;
}
.inner {
  z-index: 20;
  position: absolute;
  width: 150px;
  height: 96px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform:rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  animation: rotate infinite 7s ease;
}
.screen {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #ddd;
  transform-style: preserve-3d;
  transform-origin: 50% 93px;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: lid-screen infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
  background-position: left bottom;
  background-size: 300px 300px;
  box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
}
.screen .logo {
  position: absolute;
  width: 20px;
  height: 24px;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -10px;
  transform: rotateY(180deg) translateZ(0.1px);
}
.screen .face-one {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #d3d3d3;
  transform: translateZ(2px);
  background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.screen .face-one .camera {
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background: #000;
  position: absolute;
  left: 50%;
  top: 4px;
  margin-left: -1.5px;
}
.screen .face-one .display {
  width: 130px;
  height: 74px;
  margin: 10px;
  background: url("https://upload.wikimedia.org/wikipedia/en/9/98/MacOS_Monterey_Desktop.png") no-repeat center center #000;
  background-size: 100% 100%;
  border-radius: 1px;
  position: relative;
  box-shadow: inset 0 0 2px rgba(0,0,0,1);
}
.screen .face-one .display .shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 74px;
  background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
  animation: screen-shade infinite 7s ease;
  background-size: 300px 200px;
  background-position: 0px 0px;
}
.screen .face-one span {
  position: absolute;
  top: 85px;
  left: 57px;
  font-size: 6px;
  color: #666
}

.body {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #cbcbcb;
  transform-style: preserve-3d;
  transform-origin: 50% bottom;
  transform: rotateX(-90deg);
  animation: lid-body infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.body .face-one {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  transform-style: preserve-3d;
  background: #dfdfdf;
  animation: lid-keyboard-area infinite 7s ease;
  transform: translateZ(-2px);
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.body .touchpad {
  width: 40px;
  height: 31px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 4px;
  margin: -44px 0 0 -18px;
  background: #cdcdcd;
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
  box-shadow: inset 0 0 3px #888;
}
.body .keyboard {
width: 130px;
height: 45px;
position: absolute;
left: 7px;
top: 41px;
border-radius: 4px;
transform-style: preserve-3d;
background: #cdcdcd;
background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
box-shadow: inset 0 0 3px #777;
padding: 0 0 0 2px;
}
.keyboard .key {
  width: 6px;
  height: 6px;
  background: #444;
  float: left;
  margin: 1px;
  transform: translateZ(-2px);
  border-radius: 2px;
  box-shadow: 0 -2px 0 #222;
  animation: keys infinite 7s ease;
}
.key.space {
  width: 45px;
}
.key.f {
  height: 3px;
}
.body .pad {
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 100%;
  position: absolute;
}
.pad.one {
  left: 20px;
  top: 20px;
}
.pad.two {
  right: 20px;
  top: 20px;
}
.pad.three {
  right: 20px;
  bottom: 20px;
}
.pad.four {
  left: 20px;
  bottom: 20px;
}

@keyframes rotate {
  0% {
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  }
  5% {
    transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
  }
  20% {
    transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
  }
  25% {
    transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
  }
  60% {
    transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
  }
  65% {
    transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
  }
  80% {
    transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
  }
  85% {
    transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
  }
  87% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }
}

@keyframes lid-screen {
  0% {
    transform: rotateX(0deg);
    background-position: left bottom;
  }
  5% {
    transform: rotateX(50deg);
    background-position: left bottom;
  }
  20% {
    transform: rotateX(-90deg);
    background-position: -150px top;
  }
  25% {
    transform: rotateX(15deg);
    background-position: left bottom;
  }
  30% {
    transform: rotateX(-5deg);
    background-position: right top;
  }
  38% {
    transform: rotateX(5deg);
    background-position: right top;
  }
  48% {
    transform: rotateX(0deg);
    background-position: right top;
  }
  90% {
    transform: rotateX(0deg);
    background-position: right top;
  }
  100% {
    transform: rotateX(0deg);
    background-position: right center;
  }
}

@keyframes lid-body {
  0% {
    transform: rotateX(-90deg);
    
  }
  50% {
    transform: rotateX(-90deg);
    
  }
  100% {
    transform: rotateX(-90deg);
    
  }
}

@keyframes lid-keyboard-area {
  0% {
     background-color: #dfdfdf;
  }
  50% {
    background-color: #bbb;
  }
  100% {
    background-color: #dfdfdf;
  }
}
@keyframes screen-shade {
  0% {
    background-position: -20px 0px;
  }
  5% {
    background-position: -40px 0px;
  }
  20% {
    background-position: 200px 0;
  }
  50% {
    background-position: -200px 0;
  }
  80% {
    background-position: 0px 0px;
  }
  85% {
    background-position: -30px 0;
  }
  90% {
    background-position: -20px 0;
  }
  100% {
    background-position: -20px 0px;
  }
}
@keyframes keys {
  0% {
    box-shadow: 0 -2px 0 #222;
  }
  5% {
    box-shadow: 1 -1px 0 #222;
  }
  20% {
    box-shadow: -1px 1px 0 #222;
  }
  25% {
    box-shadow: -1px 1px 0 #222;
  }
  60% {
    box-shadow: -1px 1px 0 #222;
  }
  80% {
    box-shadow: 0 -2px 0 #222;
  }
  85% {
    box-shadow: 0 -2px 0 #222;
  }
  87% {
    box-shadow: 0 -2px 0 #222;
  }
  100% {
    box-shadow: 0 -2px 0 #222;
  }
}
@keyframes shadow {
  0% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
  5% {
    transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
  20% {
    transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
    box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);
  }
  25% {
    transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
    box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);
  }
  60% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
  100% {
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
}
.links {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.links a {
  color : #555;
  margin-left: 10px;
  text-decoration: none;
}

59

Macbook Air

By: rald_dev

59

Pure CSS using Flexbox CSS Gallery

By: rald_dev

nav {
	margin: 27px auto 0;

position: relative;
	width: 590px;
	height: 50px;
	background-color: #34495e;
	border-radius: 8px;
	font-size: 0;
}
nav a {
	line-height: 50px;
	height: 100%;
	font-size: 15px;
	display: inline-block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
	cursor: pointer;
}
nav .animation {
	position: absolute;
	height: 100%;
	top: 0;
	z-index: 0;
	transition: all .5s ease 0s;
	border-radius: 8px;
}
a:nth-child(1) {
	width: 100px;
}
a:nth-child(2) {
	width: 110px;
}
a:nth-child(3) {
	width: 100px;
}
a:nth-child(4) {
	width: 160px;
}
a:nth-child(5) {
	width: 120px;
}
nav .start-home, a:nth-child(1):hover~.animation {
	width: 100px;
	left: 0;
	background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
	width: 110px;
	left: 100px;
	background-color: #e74c3c;
}
nav .start-blog, a:nth-child(3):hover~.animation {
	width: 100px;
	left: 210px;
	background-color: #3498db;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
	width: 160px;
	left: 310px;
	background-color: #9b59b6;
}
nav .start-contact, a:nth-child(5):hover~.animation {
	width: 120px;
	left: 470px;
	background-color: #e67e22;
}

body {
	font-size: 12px;
	font-family: sans-serif;
	background: #2c3e50;
}
h1 {
	text-align: center;
	margin: 40px 0 40px;
	text-align: center;
	font-size: 30px;
	color: #ecf0f1;
	text-shadow: 2px 2px 4px #000000;
	font-family: 'Cherry Swash', cursive;
}

p {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #ecf0f1;
    font-family: 'Cherry Swash',cursive;
    font-size: 16px;
}

span {
    color: #2BD6B4;
}

59

Ringing call pluse animation

By: rald_dev

58

Red loading animation

By: rald_dev

58

Text sliding animation

By: rald_dev

58

Pulsating heart

By: rald_dev

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

57

Border Animation

By: rald_dev

57

Facebook Loading Animation

By: rald_dev

body{
  background: #333642;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 250px;
  height:600px;
}

.cog-one {
  --cog-color: #898888;
  --cog-accent-color: #A5A2A2;
  --cog-inner-size: 30px;
  --cog-outer-size: 50px;
  
  --start-rotation: 360deg;
  --end-rotation: 0deg;
}

.cog-two {
  --cog-color: #A16036;
  --cog-accent-color: #BC7F60;
  --cog-inner-size: 15px;
  --cog-outer-size: 40px;
  
  --start-rotation: 16deg;
  --end-rotation: 376deg;
  
  left: 120px;
  top: 110px;
  
  transform: rotate(var(--start-rotation));
}

.cog-three {
  --cog-color: #F1B72E;
  --cog-accent-color: #FFD100;
  --cog-inner-size: 20px;
  --cog-outer-size: 50px;
  
  --start-rotation: 300deg;
  --end-rotation: -60deg;
  
  left: 33px;
  top: 210px;
  
  transform: rotate(var(--start-rotation));
  
}

.cog {
  position: absolute;
  width: var(--cog-inner-size);
  height: var(--cog-inner-size);
  background: transparent;
  border-radius: 50%;
  border: var(--cog-outer-size) solid var(--cog-color);
  
  animation: 5s cogRotate infinite linear;
}

@keyframes cogRotate {
  0% {
    transform: rotate(var(--start-rotation));
  }
  
  100% {
    transform: rotate(var(--end-rotation))
  }
}

/* Inner circle accent */
.cog::before {
  content: '';
  position: absolute;
  width: calc(var(--cog-inner-size) + 10px);
  height: calc(var(--cog-inner-size) + 10px);
  border: 3px solid var(--cog-accent-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Outer circle accent */
.cog::after {
  content: '';
  position: absolute;
  width: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px);
  height: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px);
  border: 3px solid var(--cog-accent-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.teeth.vertical {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Top and bottom teeth */
.cog-one .teeth.vertical {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 170px;
  width: 25px;
  top: -70px;
}

.cog-two .teeth.vertical {
  width: 15px;
  height: 125px;
  top: -55px;
  
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  
}

.cog-three .teeth.vertical {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 160px;
  width: 25px;
  top: -70px;
}

.teeth.vertical::after {
  content: '';
  position: absolute;
  transform:rotate(45deg);
}

/* Top right and bottom left teeth */
.cog-one .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 170px;
  width: 25px;
}

.cog-two .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  width: 15px;
  height: 125px;
}

.cog-three .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 160px;
  width: 25px;
}

.teeth.horizontal {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

/* Left and right teeth */
.cog-one .teeth.horizontal {
  left: -70px;
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 170px;
}

.cog-two .teeth.horizontal {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  height: 15px;
  width: 125px;
  left: -55px;
}

.cog-three .teeth.horizontal {
  left: -70px;
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 160px;
}

.teeth.horizontal::after {
  content: '';
  position: absolute;
  transform: rotate(45deg);
}

/* Top left and bottom right teeth */
.cog-one .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 170px;
}

.cog-two .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  height: 15px;
  width: 125px;
}

.cog-three .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 160px;
}

57

All

Text reveal animation v2

By: rald_dev

Rainbow Box

By: rald_dev

Macbook Air

By: rald_dev

Pure CSS using Flexbox CSS Gallery

By: rald_dev

Navigation Menu

By: rald_dev

Ringing call pluse animation

By: rald_dev

Red loading animation

By: rald_dev

Text sliding animation

By: rald_dev

Pulsating heart

By: rald_dev

Border Animation

By: rald_dev

Facebook Loading Animation

By: rald_dev

Cogs Animation

By: rald_dev