1. MENU DROP DOWN
<html>
<head>
<title> Belajar menu drop down </title>
<style type="text/css">
#logo-text {
font-family:Georgia, "calibri", Times, serif;
font-size:38px;
color:#9900FF;
font-weight:normal;
float:left;
margin:-40px 0px 0px 10px;
}
.dropmenu {
background: #FF0000;
height: 300px;
width: 929px;
list-style-type: none;
margin: 40 0 0 200;
padding: 0px;
}
.dropmenu li {
border-right: solid 1px white;
float: left;
height: 30px;
}
.dropmenu li a {
color: #fff;
display: block;
font: 20px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover { background: #FFFF00; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
background-color: #3f4a54;
border: 1px solid grey;
left: 0px;
padding: 1px;
top: 30px;
width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
background-color: #FFFF00;
border: 1px solid transparent;
color: #fff;
display: block;
font-size: 16px;
height: 18px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: white;
border: solid 1px #444;
color: #000000;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</head>
<boyd>
<h1 id="logo-text">Menu Dropdown</h1>
<ul class="dropmenu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Buku Tamu</a></li>
</ul>
</li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twetter</a></li>
</ul>
</li>
<li><a href="#">Kontak</a>
<ul>
<li><a href="#">Whatapps</a></li>
<li><a href="#">Wechat</a></li>
<li><a href="#">Line</a></li>
<li><a href="#">BBM</a></li>
</ul>
</li>
</ul>
</body>
</html>
2. TABEL DENGAN EFEK MOUSE HOVER
<html>
<title>Table Zebra</title>
<head>
<style>
#body
{ background-color:#FF7373;
}
.utama
{
width:80%;
margin-top:20px;
margin-left:100px;
border:1px solid #000000;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
text-align:center;
border-radius:0px;
}
td{border: 1px solid #ffffff;border-radius:0px;
}
th
{
text-align:center;
align:center;
background-color:#ffffff;
color:black;border-radius:0px;
}
.utama1
{
text-align:center;
border-radius:30px;
}
tr:hover {color: #ffffff;cursor: pointer;}
transition: all 1s;
</style>
</head>
<body>
<body id="body">
</div>
</body>
<table class="utama">
<tr>
<th>No</th>
<th>Nama</th>
<th>Tanggal lahir</th>
</tr>
<tr class="utama">
<td>1</td>
<td>ALFI NUR R</td>
<td>4 JANUARI 1994</td>
</tr>
<tr class="utama1">
<td>2</td>
<td>AULIA YUSTIKA P</td>
<td>4 JUNI 1998</td>
</tr>
<tr class="utama">
<td>3</td>
<td>ARIYANA CANDRA DEWI</td>
<td>13 DESEMBER 2003</td>
</tr>
</table>
</html>
Selasa, 17 Desember 2013
Senin, 18 November 2013
SEJARAH CSS
CSS - Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam tentunya tanpa CSS website tidak akan memiliki tampilan yang rapi.
CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Sejarah CSS
· CSS 1
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.
CSS 1 mendukung pengaturan tampilan dalam hal :
1. Font (Jenis ketebalan).
2. Warna, teks, background dan elemen lainnya.
3. Text attributes, misalnya spasi antar baris, kata dan huruf.
4. Posisi teks, gambar, table dan elemen lainnya.
5. Margin, border dan padiing.
· CSS 2
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
· CSS 3
CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.
Fitur terbaru CSS 3 :
2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".
3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.
Sedikit Contoh CSS :
body {
background-color:#d0e4fe;
font-size:12px;
color:#000000;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
Langganan:
Postingan (Atom)