السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
masih semangat kan untuk belajar coding nya heheh ^_^
pada kesempatan kali ini saya masih ingin membagikan sesuatu yang di buat oleh css.
kalau pada tutorial sebelumnya kita sudah membuat animasi yang terakhir adalah Membuat Animasi Motor Dengan CSS yang bisa anda lihat tutorial dan demonya DISINI
Nah pada hari ini saya tidak akan bahas mengenai pembuatan animasi lagi melainkan sebuah karya yang cukup indah yaitu Membuat Gedung Sate Dengan CSS, oh iya sekali lagi saya ingatkan karya ini bukan buatan saya melainkan salah seorang programmer yang hebatnya dia berasal dari INDONESIA yang bernama Khamil Aryansyah anda bisa melihat profilnya melalui twtternya di @arkhlima
seperti biasa karya dia sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
tidak usah berlama-lama lagi langsung saja ikuti tutorial Cara Membuat Gedung Sate Dengan CSS pada kali ini dengan baik dan benar.
1. Langkah Pertama Adalah Membuat Script HTML
seperti tutorial-tutorial sebelumnya untuk membuat sesuatu yang menarik jangan lupa untuk membuat file htmlnya terlebih dahulu, file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Gedung Sate</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<ul class="sky">
<li></li>
<li></li>
<li></li>
</ul>
<div class="gedung-sate">
<div class="bd bd1">
<div></div>
<div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="bd2-wrap">
<div class="bd bd2">
<div></div>
<div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="bd cbd absolutely">
<div></div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div></div>
</div>
<div class="bd bd2">
<div></div>
<div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bd bd3 absolutely">
<div></div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="bd bd4 absolutely">
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div></div>
<div></div>
</div>
<div class="bd bd5 absolutely">
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
<hgroup>
<h1>Gedung Sate</h1>
<h4>Bandung, Indonesia</h4>
</hgroup>
</div>
</body>
</html> Seperti biasa sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa titik yang gak jelas
agar terbentuk Gedung Sate nya Silahkan ikuti langkah selanjutnya
2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat gedung sate tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
*,
*:after,
*:before {
box-sizing:border-box;
}
body,
h1,
h4 {
margin:0;
padding:0;
}
body {
color:#607d8b;
font-family:"Roboto",sans-serif;
background:#263238;
}
h1,
h4 {
font-weight:300;
}
h1 {
font-style:italic;
}
ul,
ol {
margin:0;
padding:0;
}
li {
list-style:none;
}
hgroup {
margin-top:25px;
text-align:center;
}
/* container */
.container {
margin:75px auto;
}
/* gedung sate */
.gedung-sate {
margin:auto;
width:939px;
height:335px;
position:relative;
}
/* bd */
.bd:before,
.bd:after,
.bd,
.sky:before,
.sky,
.sky li:before,
.sky li:after,
.sky li,
.sky div {
position:absolute;
}
.bd:before,
.bd:after,
.bd5 ul li:before,
.bd5 ul li:after {
z-index:1;
top:-65px;
width:38px;
height:128px;
}
.bd:before,
.bd:after,
.bd > div:before,
.bd > div:after,
.bd5 ul li:before,
.bd5 ul li:after,
.bd5 ul li div:before,
.bd5 ul li div:after,
.bd5 ol:before,
.sky:before,
.sky li:before,
.sky li:after {
content:'';
display:block;
border:1px solid;
}
.bd > div:before,
.bd > div:after,
.bd > div {
background:#263238;
}
.bd > div:first-child:before,
.bd > div:first-child:after {
z-index:2;
height:4px;
}
.bd > div:first-child:after {
height:6px;
width:100%;
}
.bd > div:last-child:before,
.bd > div:last-child:after {
width:12px;
bottom:-1px;
position:absolute;
}
.bd > div:last-child:before {
left:-5px;
}
.bd > div:last-child:after {
right:-5px;
}
.bd div,
.bd ul {
width:100%;
display:flex;
display:-ms-flexbox;
display:-webkit-box;
display:-webkit-flex;
}
.bd {
bottom:0;
overflow:hidden;
}
.bd > div {
border:1px solid;
position:relative;
}
.bd > div:first-child {
border:0;
flex-direction:column;
-ms-flex-direction:column;
-webkit-flex-direction:column;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-pack:justify;
-webkit-box-pack:justify;
justify-content:space-between;
-webkit-justify-content:space-between;
align-items:center;
-ms-flex-align:center;
-webkit-box-align:center;
-webkit-align-items:center;
}
.bd > div:nth-child(2) {
margin:auto;
border-top:0;
}
.bd ul {
-ms-flex-pack:center;
justify-content:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
}
.bd > div:nth-child(2) li:before,
.bd > div:nth-child(2) li:after {
content:'';
}
.bd > div:nth-child(2) li {
width:21px;
height:21px;
margin:0 5px;
border:1px solid;
}
.absolutely {
left:0;
right:0;
margin:auto;
}
/* bd1 */
.bd1:before {
left:21px;
transform:rotate(77deg);
-ms-transform:rotate(77deg);
-webkit-transform:rotate(77deg);
}
.bd1:after {
right:21px;
transform:rotate(-77deg);
-ms-transform:rotate(-77deg);
-webkit-transform:rotate(-77deg);
}
.bd1 {
left:0;
right:0;
margin:auto;
width:794px;
height:183px;
}
.bd1 > div:first-child:before {
width:590px;
}
.bd1 > div:first-child {
height:33px;
}
.bd1 > div:last-child:before,
.bd1 > div:last-child:after {
height:30px;
}
.bd1 > div:last-child {
width:760px;
padding:6px 32px 8px;
}
.bd1 > div:last-child div {
-ms-flex-pack:justify;
-webkit-box-pack:justify;
justify-content:space-between;
-webkit-justify-content:space-between;
}
.bd1 ul {
width:auto;
}
/* bd2-wrap */
.bd2-wrap {
bottom:0;
z-index:3;
width:100%;
position:absolute;
display:flex;
display:-ms-flexbox;
display:-webkit-box;
display:-webkit-flex;
-ms-flex-pack:justify;
-webkit-box-pack:justify;
justify-content:space-between;
-webkit-justify-content:space-between;
}
.bd2-wrap .bd:last-child {
transform:scaleX(-1);
-ms-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
}
/* bd2 */
.bd2:before {
left:-3px;
transform:rotate(72deg);
-ms-transform:rotate(72deg);
-webkit-transform:rotate(72deg);
}
.bd2:after {
right:-3px;
transform:rotate(-72deg);
-ms-transform:rotate(-72deg);
-webkit-transform:rotate(-72deg);
}
.bd2 {
z-index:2;
width:448px;
height:121px;
position:relative;
}
.bd2 > div:first-child:before {
width:326px;
}
.bd2 > div:first-child {
height:29px;
}
.bd2 > div:last-child:before {
left:-6px;
width:14px;
height:83px;
}
.bd2 > div:last-child:after {
display:none;
}
.bd2 > div:last-child {
width:418px;
height:90px;
padding:12px 0 8px;
}
.bd2 > div:last-child div {
margin-left:14px;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
-ms-flex-direction:column;
-webkit-flex-direction:column;
-ms-flex-pack:justify;
-webkit-box-pack:justify;
justify-content:space-between;
-webkit-justify-content:space-between;
}
.bd2 > div:last-child ul:last-child li:before,
.bd2 > div:last-child ul:last-child li:after {
left:0;
width:100%;
border:1px solid;
position:absolute;
}
.bd2 > div:last-child ul:last-child li:before {
top:0;
height:23px;
border-radius:40%;
}
.bd2 > div:last-child ul:last-child li:after {
bottom:0;
height:19px;
background:#263238;
}
.bd2 > div:last-child ul:last-child li {
border:0;
height:32px;
position:relative;
}
/* cbd */
.cbd:before,
.cbd:after {
top:-24px;
}
.cbd:before {
left:-49px;
transform:rotate(40deg);
-ms-transform:rotate(40deg);
-webkit-transform:rotate(40deg);
}
.cbd:after {
right:-49px;
transform:rotate(-40deg);
-ms-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
}
.cbd {
z-index:1;
top:-138px;
width:45px;
height:107px;
}
.cbd div:first-child:before {
width:7px;
height:10px;
}
.cbd div:first-child:after {
height:8px;
}
.cbd div:first-child {
height:40px;
}
.cbd div:nth-child(2):before,
.cbd div:nth-child(2):after {
display:none;
}
.cbd div:nth-child(2) {
border:0;
padding:0;
z-index:2;
height:41px;
}
.cbd div:nth-child(2) ul,
.cbd div:last-child {
margin:auto;
}
.cbd div:nth-child(2) ul,
.bd4 div:nth-child(1) ul {
width:39px;
height:100%;
margin:auto;
padding:7px 0 1px;
border-left:1px solid;
border-right:1px solid;
}
.cbd div:nth-child(2) li {
width:7px;
height:inherit;
margin:0px 1px;
}
.cbd div:last-child:before,
.cbd div:last-child:after {
top:-10px;
z-index:-1;
width:22px;
height:22px;
}
.cbd div:last-child:before {
left:-1px;
border-right:0;
transform:skew(0,38deg);
-ms-transform:skew(0,38deg);
-webkit-transform:skew(0,38deg);
}
.cbd div:last-child:after {
right:-1px;
border-left:0;
transform:skew(0,-38deg);
-ms-transform:skew(0,-38deg);
-webkit-transform:skew(0,-38deg);
}
.cbd div:last-child {
top:0;
width:43px;
height:4px;
}
/* bd3 */
.bd3:before,
.bd3:after {
top:-60px;
}
.bd3:before {
left:-17px;
transform:rotate(72deg);
-ms-transform:rotate(72deg);
-webkit-transform:rotate(72deg);
}
.bd3:after {
right:-17px;
transform:rotate(-72deg);
-ms-transform:rotate(-72deg);
-webkit-transform:rotate(-72deg);
}
.bd3 {
z-index:3;
width:198px;
height:81px;
background:none;
}
.bd3 div:first-child:before {
width:75px;
}
.bd3 div:first-child {
height:30px;
}
.bd3 div:last-child:before,
.bd3 div:last-child:after {
height:43px;
}
.bd3 div:last-child {
width:161px;
height:49px;
padding:8px 18px 0;
}
.bd3 div:last-child ul {
width:100%;
align-items:center;
-ms-flex-align:center;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-pack:distribute;
justify-content:space-around;
-webkit-justify-content:space-around;
}
.bd3 div:last-child li:first-child,
.bd3 div:last-child li:last-child {
width:6px;
height:17px;
margin-top:-3px;
}
.bd3 div:last-child li:nth-child(2):before,
.bd3 div:last-child li:nth-child(2) {
border-bottom:0!important;
}
.bd3 div:last-child li:nth-child(2):before {
left:0;
right:0;
bottom:0;
width:36px;
height:28px;
margin:auto;
border:1px solid;
position:absolute;
}
.bd3 div:last-child li:nth-child(2) {
width:50px;
height:38px;
position:relative;
align-self:flex-end;
-ms-flex-item-align:end;
-webkit-align-self:flex-end;
}
/* bd4 */
.bd4:before,
.bd4:after {
top:auto;
bottom:-58px;
background:#263238;
}
.bd4:before {
left:-66px;
transform:rotate(-74deg);
-ms-transform:rotate(-74deg);
-webkit-transform:rotate(-74deg);
}
.bd4:after {
right:-66px;
transform:rotate(74deg);
-ms-transform:rotate(74deg);
-webkit-transform:rotate(74deg);
}
.bd4 {
z-index:2;
height:83px;
width:160px;
bottom:149px;
}
.bd4 div:first-child:before,
.bd4 div:first-child:after {
display:none;
}
.bd4 div:first-child {
width:94px;
height:31px;
margin:auto;
}
.bd4 div:first-child ul {
padding:0;
width:100%;
border-top:1px solid;
align-items:center;
-ms-flex-align:center;
-webkit-box-align:center;
-webkit-align-items:center;
}
.bd4 div:first-child li {
width:11px;
height:18px;
margin:0 3px;
border:1px solid;
}
.bd4 div:nth-child(2):before,
.bd4 div:nth-child(2):after {
bottom:0;
position:absolute;
}
.bd4 div:nth-child(2):before {
z-index:2;
left:-15px;
height:6px;
width:179px;
border-left:0;
border-right:0;
}
.bd4 div:nth-child(2):after,
.bd4 div:nth-child(2) {
border-bottom:0;
}
.bd4 div:nth-child(2):after {
left:0;
right:0;
z-index:3;
height:6px;
width:125px;
margin:auto;
border-top:0;
}
.bd4 div:nth-child(2) {
width:151px;
height:51px;
border-top:1px solid;
}
.bd4 div:last-child:before,
.bd4 div:last-child:after {
height:38px;
bottom:29px;
}
.bd4 div:last-child:before {
left:0;
}
.bd4 div:last-child:after {
right:0;
}
.bd4 div:last-child {
border:0;
z-index:2;
height:11px;
}
/* bd5 */
.bd5:before,
.bd5:after {
display:none;
}
.bd5 {
top:0;
bottom:auto;
width:175px;
height:116px;
overflow:unset;
}
.bd5 ul,
.bd5 ul li div {
width:100%;
}
.bd5 ul,
.bd5 ul li:before,
.bd5 ul li:after,
.bd5 ul li,
.bd5 ol:before,
.bd5 ol,
.bd5 div:before,
.bd5 div:after,
.bd5 > div {
position:absolute;
}
.bd5 ul {
bottom:0;
height:67px;
}
.bd5 ul li,
.bd5 ol:before,
.bd5 ol,
.bd5 ol li,
.bd5 div:before,
.bd5 div:after,
.bd5 > div {
left:0;
margin:auto;
border:1px solid;
right:0!important;
}
.bd5 ul li {
border:none;
overflow:hidden;
}
.bd5 ul li div:before {
bottom:0;
}
.bd5 ul li div:after {
border:none;
border-bottom:1px solid;
}
.bd5 ul li:first-child:before {
left:-29px;
transform:rotate(68deg);
-ms-transform:rotate(68deg);
-webkit-transform:rotate(68deg);
}
.bd5 ul li:first-child:after {
right:-29px;
transform:rotate(-68deg);
-ms-transform:rotate(-68deg);
-webkit-transform:rotate(-68deg);
}
.bd5 ul li:first-child {
top:34px;
width:127px;
height:34px;
}
.bd5 ul li:first-child div,
.bd5 ul li:nth-child(2) div {
height:16px;
}
.bd5 ul li:first-child div:before {
width:123px;
height:20px;
transform:perspective(150px)rotateX(-28deg);
-ms-transform:perspective(150px)rotateX(-28deg);
-webkit-transform:perspective(150px)rotateX(-28deg);
}
.bd5 ul li:first-child div:after {
width:55px;
}
.bd5 ul li:nth-child(2):before,
.bd5 ul li:nth-child(2):after {
top:-65px;
}
.bd5 ul li:nth-child(2):before {
left:-29px;
transform:rotate(69deg);
-ms-transform:rotate(69deg);
-webkit-transform:rotate(69deg);
}
.bd5 ul li:nth-child(2):after {
right:-29px;
transform:rotate(-69deg);
-ms-transform:rotate(-69deg);
-webkit-transform:rotate(-69deg);
}
.bd5 ul li:nth-child(2) {
top:14px;
width:95px;
height:28px;
}
.bd5 ul li:nth-child(2) div:before,
.bd5 ul li:last-child div:before {
border-bottom:0;
}
.bd5 ul li:nth-child(2) div:before {
width:93px;
height:14px;
transform:perspective(150px)rotateX(-32deg);
-ms-transform:perspective(150px)rotateX(-32deg);
-webkit-transform:perspective(150px)rotateX(-32deg);
}
.bd5 ul li:nth-child(2) div:after {
width:19px;
}
.bd5 ul li:last-child:before,
.bd5 ul li:last-child:after {
top:-69px;
}
.bd5 ul li:last-child:before {
left:-32px;
transform:rotate(71deg);
-ms-transform:rotate(71deg);
-webkit-transform:rotate(71deg);
}
.bd5 ul li:last-child:after {
right:-32px;
transform:rotate(-71deg);
-ms-transform:rotate(-71deg);
-webkit-transform:rotate(-71deg);
}
.bd5 ul li:last-child {
top:0;
z-index:1;
width:57px;
height:23px;
}
.bd5 ul li:last-child div {
height:10px;
}
.bd5 ul li:last-child div:before {
width:55px;
height:15px;
border-bottom:0;
transform:perspective(150px)rotateX(-45deg);
-ms-transform:perspective(150px)rotateX(-45deg);
-webkit-transform:perspective(150px)rotateX(-45deg);
}
.bd5 ul li:last-child div:after {
width:0;
}
.bd5 ol:before,
.bd5 ol {
margin:auto;
}
.bd5 ol:before {
width:0;
height:100%;
border-left:0;
}
.bd5 ol {
width:7px;
height:49px;
border:none;
transform:scaleY(-1);
-ms-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
}
.bd5 ol li {
width:4px;
height:4px;
display:block;
margin:1px auto;
background:#263238;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
/* sky */
.sky:before {
top:28px;
width:30px;
height:30px;
right:295px;
border-radius:30px;
}
.sky {
left:0;
right:0;
margin:auto;
width:888px;
height:152px;
}
.sky li:before,
.sky li:after {
z-index:1;
bottom:-1px;
border-bottom:0;
background:#263238;
}
.sky li {
border-bottom:1px solid;
}
/* cloud 1 */
.sky li:first-child:before {
left:20px;
width:50px;
height:25px;
border-radius:25px 25px 0 0;
}
.sky li:first-child:after {
left:53px;
width:30px;
height:15px;
border-radius:15px 15px 0 0;
}
.sky li:first-child {
bottom:30px;
width:190px;
height:25px;
}
/* cloud 2 */
.sky li:nth-child(2):before {
left:74px;
width:24px;
height:12px;
border-radius:12px 12px 0 0;
}
.sky li:nth-child(2):after {
left:38px;
width:40px;
height:20px;
border-radius:20px 20px 0 0;
}
.sky li:nth-child(2) {
top:0;
left:285px;
width:110px;
height:25px;
}
/* cloud 3 */
.sky li:last-child:before {
left:60px;
width:48px;
height:24px;
border-radius:24px 24px 0 0;
}
.sky li:last-child:after {
left:48px;
width:20px;
height:10px;
border-radius:10px 10px 0 0;
}
.sky li:last-child {
right:80px;
bottom:53px;
width:180px;
height:25px;
} jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya :D
Demikianlah Cara Membuat Gedung Sate Dengan CSS, keren bukan ? :D
Dan ternyata karya Anak Bangsa pun tidak kalah dengan karya orang luar, ini menunjukkan bahwa kita sudah sepatutnya mencintai buatan lokal yang kualitasnya pun tidak kalah dengan buatan luar. .
Namun kali ini saya minta maaf karena tidak menyediakan demonya :D
Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf .
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D
0 komentar:
Posting Komentar