Minggu, 04 Desember 2011

membuat 8 kotak simetris menggunakan css

> > membuat 8 kotak simetris menggunakan css

Minggu, 04 Desember 2011


kali ini saya akan posting bagaimna membuat 8 kotak simetris menggunakan css

tools yg di perlukan notepad/dream weafer tapi saya sarankan anda menggunakan notepad karena membuat anda lebih pintar

Yg harus diperhatikan dalam membuatnya adalah ukuran kotak height dan width harus sesuai dengan ukuran padding nya, sekarang kita akan membuat dengan ukuran kotak width: 600px dan height:400px dan padding 20 px menggunakan css internal


1. buat coding seperti ini dulu
    <html>
<head>
<title>coba </title>
</head>
<style type="text/css">
</style>
<body>
<div class="kotak-besar">
<div class="kotak-kecil"></div>
<div class="kotak-kecil"></div>
<div class="kotak-kecil"></div>
<div class="kotak-kecil"></div>
<div class="kotak-kecil"></div>
<div class="kotak-kecil"></div>
<div class="kotak-kecil"></div>
<div class="kotak-kecil"></div>
</div>
</body>
</html> 

ini adalh coding html dimana div class berguna untuk memunculkan kotak css pada html


2.kemudian ketik coding berikut ini 

body {
margin:0px;
}
.kotak-besar {
width:560px;
height:360px;
padding-left:20px;
padding-top:20px;
padding-bottom:20px;
background-color: #293DA3;
margin:auto;
box-shadow: 20px 10px 30px #888888;
border:5px solid;
border-radius:5px;
-moz-border-radius:5px; /* Firefox 3.6 and earlier */
border-color:red;
}
.kotak-kecil {
width:120px;
height:170px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #6699FF;
float: left;
animation:coba 7s;
-moz-animation:coba 7s; /* Firefox */
-webkit-animation:coba 7s; /* Safari and Chrome */
}


@coba myfirst
{
0%   {background: black;}
25%  {background: red;}
50%  {background: yellow;}
100% {background: #998066;}
}






@-moz-keyframes coba /* Firefox */
{
0%   {background black;}
25%  {background: red;}
50%  {background: yellow;}
100% {background: #998066;}
}


@-webkit-keyframes coba /* Safari and Chrome */
{
0%   {background: black;}
25%  {background: red;}
50%  {background:yellow;}
100% {background: #998066;}
}


ketiklah pada bagian <style type="text/css"> jangan lupa beri coding endtag seperti ini </style> ini adalah screenshotnya nya dengan menggunakan tools notepad++



3. dan hasil jadinya akan seperti ini 


perhatian title boleh anda ganti sesuai keingininan anda juga ukuran kotaknya,dan coding css animation juga boleh tidak dipakai itu hanya sebagai pemercantik tampilan.
thanks, mohon maaf bila ada kesalahan kata 
mhon komentarnya
(^.^)


SILAHKAN BERIKAN KRITIK DAN SARAN YANG MEMBANGUN

CRIST YONATHAN E - 19.58
MASUKKAN TOMBOL TWEET DISINI

0 komentar:

Posting Komentar