Membuat Piramid - Pure CSS

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

Baca juga


Membuat Piramid - Pure CSS

belajar css dan html
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 https://jendeladuniainternet.blogspot.com/2015/12/membuat-piramid-pure-css.html

0 Response to "Membuat Piramid - Pure CSS"

Posting Komentar