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 https://jendeladuniainternet.blogspot.com/2015/12/membuat-piramid-pure-css.html
0 Response to "Membuat Piramid - Pure CSS"
Posting Komentar