Membuat Piramid - Pure CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Piramid - Pure CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Piramid - Pure CSS
link : Membuat Piramid - Pure CSS

Membuat Piramid - Pure CSS

Membuat Piramid dengan CSS - Halo gengs, kali ini juragan ingin berbagi kode bagai mana membuat piramid dengan hanya menggunakan CSS. lebih ringan dan stylis dari pada menggunakan image.
Berikut adalah kodenya.

HTML

<div class="container">
   <section>
      <header>
         <h1>Pure <strong>CSS</strong> Pyramid</h1>
         <h2>belajar website bagi pemula</h2>
       </header>
       <article class="factor">
          <div class="pyramid">
             <div class="faces shadow"></div>
             <div class="faces"></div>
             <div class="faces"></div>
             <div class="faces"></div>
             <div class="faces"></div>
          </div>
       </article>
   </section>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);

html {
  line-height: 1;
}

article {
  display: block;
}

body,
html {
  height: 100%;
}

body {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  background: #d0d0d0;
  color: #444444;
}

h1 {
  font-size: 2.5em;
  margin: 1em 0 0.5em;
}

h2 {
  margin-bottom: 3em;
}

p {
  margin-bottom: 1em;
}

strong {
  font-weight: 700;
}

div {
  position: relative;
}

input {
  display: none;
}

article {
  padding: 2em;
  max-width: 470px;
  text-align: center;
  margin-bottom: 2em;
}
article h3 {
  font-size: 1.5em;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #444444;
}

.container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

body {
  text-align: center;
}

.factor {
  font-size: 5em;
  -webkit-perspective: 900px;
          perspective: 900px;
  -webkit-perspective-origin: 50% 100%;
          perspective-origin: 50% 100%;
}

.pyramid {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  background-color: #f5f5f5;
  -webkit-transform: rotateX(60deg) rotate(0);
          transform: rotateX(60deg) rotate(0);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotation 8s linear infinite;
          animation: rotation 8s linear infinite;
}
.pyramid .faces {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.pyramid .faces.shadow {
  opacity: .7;
  background-color: black;
  -webkit-transform: translateZ(-0.2em) scale(0.9);
          transform: translateZ(-0.2em) scale(0.9);
  box-shadow: 0 0 .1em .02em black, 0 0 .4em black, 0 0 1.5em white, 0 0 3.4em black;
}
.pyramid .faces.shadow:before {
  border: 0;
}
.pyramid .faces:nth-child(2) {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.pyramid .faces:nth-child(2):before {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
.pyramid .faces:nth-child(3) {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.pyramid .faces:nth-child(3):before {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.pyramid .faces:nth-child(4) {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.pyramid .faces:nth-child(4):before {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.pyramid .faces:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: .5em solid transparent;
  border-top-width: 0;
  border-bottom-color: #f5f5f5;
  border-bottom-width: 1em;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(-60deg);
          transform: rotateX(-60deg);
  -webkit-transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
  -webkit-animation: illumination 8s linear infinite;
          animation: illumination 8s linear infinite;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotateX(60deg) rotate(0);
            transform: rotateX(60deg) rotate(0);
  }
  100% {
    -webkit-transform: rotateX(60deg) rotate(360deg);
            transform: rotateX(60deg) rotate(360deg);
  }
}
@-webkit-keyframes illumination {
  0% {
    border-bottom-color: #f5f5f5;
  }
  50% {
    border-bottom-color: #cfcfcf;
  }
  100% {
    border-bottom-color: #f5f5f5;
  }
}

Kalian bisa memaksimalkan kode diatas sesuai kebutuhan, terimakasih ..
Assalamualaikum ^_^

Demikianlah Artikel Membuat Piramid - Pure CSS

Sekianlah artikel Membuat Piramid - Pure CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Piramid - Pure CSS dengan alamat link http://jendeladuniainternet.blogspot.com/2015/12/membuat-piramid-pure-css.html

Tweet