Inspire Use All

Showing posts with label CSS. Show all posts

Home » Posts filed under CSS

Membuat Dropdown Menu

Posted by Unknown on Friday, December 7, 2012

Dropdown menu sering sekali muncul pada halaman sebuah web. Fungsinya sangat vital yaitu sebagai tombol navigasi yang sering dipakai dalam suatu halaman web. Misal menu page About Us jika diklik akan menuju ke page about us, dan sebagainya.
Untuk menjelaskannya mungkin agak rumit, lebih jelasnya saya akan memraktekkan cara membuat menu dropdown pada halaman web.

Krtik script dibawah ini kemudian simpan dengan ekstensi .html. Saya akan menyimpan dengan nama index.html :

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a>
<ul>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Email</a></li>
<li><a href="">Mobile</a></li>
</ul>
</li>
<li><a href="">Post Feed</a>
<ul>
<li><a href="">Via Web</a></li>
<li><a href="">Via Phone</a></li>
<li><a href="">Via RSS</a></li>
</ul>
</li>

</ul>
</body>
</html>

Kemudian buat file baru dengan ektensi .css, saya akan memberi nama style.css. File css ini berguna untuk membuat tampilan lebih menarik.

ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
position: relative;
float: left;
width: 100px;

}
li ul {
position: absolute;
top: 30px;
display: none;
}
ul li a {
display: block;
text-decoration: none;
line-height: 20px;
color: #000;
padding: 5px;
background: #CC0;
margin: 0 2px;
}

ul li a:hover { background: #66F; }
li:hover ul, li.over ul { display: block; }

Jalankan file index.html ke browser kesayangan anda. File index.html dan style.css usahakan satu folder. Untuk tampilannya adalah sebagai berikut :

Pahami contoh sederhana diatas, akan lebih paham jika anda mencobanya.
Semoga bermanfaat !!!

Baca Selengkapnya →

Perbedaan ID dengan CLASS

Posted by Unknown on Saturday, November 24, 2012

Perbedaan ID dengan CLASS

1. id

ID adalah sebuah identitas untuk sebuah elemen maka dari itu ID bersifat unik, jadi dalam satu document tidak boleh ada lebih dari 1 ID.

Contoh :

<div id=”konten”> isi konten </div>

<div id=”sidebar”> isi sidebar </div>

</div>

2. class

Berbeda dengan ID, CLASS dapat dipakai untuk lebih dari 1 elemen.

Contoh :

<h1>Header 1</h1>

<p class=”rata-kiri”> Paragraf pertama rata kiri </p>

<h2>Header 2</h2>

<p class=”rata-kiri”> Paragraf kedua rata kiri </p>

Baca Selengkapnya →

Membuat Dropdown Menu Dengan CSS

Posted by Unknown on Friday, November 23, 2012

Pada artikel kali ini saya ingin mencontohkan membuat dropdown menu dengan css.
Fungsi dari dropdown menu sendiri adalah untuk menghemat ruang pada web kita karena terlalu banyaknya link atau teks yang ditampilkan di halaman web.
Langsung saja saya suka memberi contoh daripada bertele-tele dengan tulisan.
Lihat contoh dibawah ini kalau perlu praktekkan sendiri :

Persiapan, saya akan membuat 2 file yaitu terdiri dari file index.html. Untuk file css nya akan terpisah dengan nama file style.css.

Untuk file index.html berikut scriptnya :

Untuk file style.css berikut scriptnya :

body {
 background:black;}
 
#navMenu{
 margin:0;
 padding:0;
 width:180px;
 height:30px;
 cursor:pointer;
 background-color:red;
 color:#ffffff;
 font:normal 20px/100% Georgia,Serif;
 text-decoration:none;
 outline:none;
 vertical-align:middle;
 float:left;
 text-align: center;
 text-shadow: 0 1px 1px rgba(0,0,0,.3);
 vertical-align: baseline;
 border-radius:10px;
}

#navMenu:hover{
 background: #d57ea5;
 background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
 background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
 border-radius:10px;
}

#navMenu ul{
 margin:0;
 padding:0;
 line-height:30px;
}

#navMenu li{
 margin:0;
 padding:0;
 list-style:none;
 float:left;
 position:relative;
}

#navMenu ul li a {
 text-align:center;
 font-family:"Comic Sans";
 text-decoration:none;
 height:30px;
 width:180px;
 display:block;
 color:#404040;
}

#navMenu ul li a:hover {
 background: #d57ea5;
 background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
 background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
 border-radius:10px;
}

#navMenu ul li  ul{
    width:180px;
 height:auto;
    background:pink;
    box-shadow:0 1px 4px #e0e0e0;
    -webkit-box-shadow:0 1px 4px #e0e0e0;
    -moz-box-shadow:0 1px 4px #e0e0e0;
    border:1px solid #e0e0e0;
}

#navMenu ul ul{
 position:absolute;
 visibility:hidden;
}

#navMenu ul li:hover ul{
 visibility:visible;
}

Untuk hasil, simpan kedua file tersebut kedalam satu folder. Jalankan index.html pada browser kesayangan anda. Tampilannya seperti berikut ini :

File style.css hanya memberikan efek warna supaya tampilan dari dropdown menu agar lebih menarik.
Jika anda mungkin malas mencoba file diatas berikut saya akan berikan file index.html dan style.css secara gratis.

DOWNLOAD FILE DROPDOWN MENU CSS

Baca Selengkapnya →

Belajar CSS Menggunakan Padding

Posted by Unknown on Thursday, November 22, 2012

Padding adalah jarak dalam. Masih bingung mungkin dari pengertian padding. Sebagai contoh saya mempunyai sebuah kaos, setelah saya pakai terdapatlah sebuah jarak antara badan saya dengan kaos tadi. Begitu kira-kira yang dimaksud dengan padding.
Apakah juga masih bingung pengertiannya?
Mending langsung saja saya akan memberikan contoh dari kasus padding ini.

Berikut contoh script padding :

Untuk tampilannya adalah sebagai berikut :

Maka akan terlihat jika paragraf yang diatas tidak menggunakan padding sedangkan yang bawah menggunakan padding.

Pada bagian ini anda bisa melihat perbedaanya :

<style>

{

background-color:pink;

}

p.padding

{

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

}

</style>

<body>

<p>Disini adalah sebuah paragraf yang tidak menggunakan padding</p>

<p class="padding">Paragraf ini menggunakan padding, dan terlihat bedanya top=atas,bottom=bawah,right=kanan,left=kiri</p>

Baca Selengkapnya →

Membuat Bayangan Kotak dengan CSS

Posted by Unknown on Wednesday, November 21, 2012

Dalam artikel sederhana saya sebelumnya membahas tentang Belajar Border Radius di CSS , kali ini saya akan mencoba membuat sebuah bayangan kotak dengan CSS.
Wahh pasti sangat kerenn nihh !! :D
Mari kita praktekkan bersama-sama.

Tulis script dibawah ini :

Simpan dengan nama file index.html, kemudian jalankan pada browser favorit anda. Maka tampilannya seperti berikut :

Kenapa bisa muncul bayangan??
Berikut penjelasannya :

width:300px; = adalah panjang objek yang kita buat
height:100px; = lebar objek yang kita buat
background-color:blue; = warna latar belakang
-moz-box-shadow: 10px 10px 5px #888888; = bayangan untuk browser Mozilla Firefox
box-shadow: 10px 10px 5px #888888; = bayangan, #888888 = adalah warna dari bayangan

Sebenarnya box-shadow sudah compatible disemua browser yang ada sekarang ini.
Selamat mencoba !!

Baca Selengkapnya →

Belajar Border Radius di CSS

Posted by Unknown

Border radius adalah membuat sudut bulat di CSS. Border radius semakin memudahkan kita dalam membuat desain yang menarik untuk halaman web.
Properti border radius mudah digunakan dan mendukung untuk semua browser walaupun dengan beberapa perbedaan.

Langsung saja, saya lebih suka memberi contoh daripada ber-teori.

Tulis script dibawah ini dengan text editor simpan dengan nama file index.html

Untuk tampilannya gunakan Mozilla Firefox atau browser lainnya, jalankan file index.html.

Priview dari script diatas adalah seperti ini :

Maka bentuk akan menjadi lebih menarik dengan garis lengkung di setiap sudutnya.
Tertarik untuk belajar lagi silahkan anda kembangkan sendiri script diatas untuk lebih jelasnya.

Baca Selengkapnya →

Membuat Template Sederhana dengan CSS

Posted by Unknown on Tuesday, November 20, 2012

Template sederhana ini adalah buatan saya ketika masih berkenalan pertama kali dengan CSS. Agar dapat menginspirasi banyak orang akhirnya saya buat saja artikel tutorial mengenai Membuat Template Sederhana dengan CSS. Semoga bermanfaat nantinya !! :D

Hal pertama yang harus disiapkan tentu saja text editor, saya sering memakai Notepad++.
Kedua adalah web browser, saya memakai Mozilla Firefox versi terbaru.

Disini saya menggunakan cara Eksternal CSS, yaitu memanggil file .css untuk ditampilkan di HTML. Cara ini sudah saya tulis di artikel sebelumnya yang berjudul Belajar CSS dimana terdapat cara-cara pemakaian CSS untuk mempercantik halaman web.

Langsung saja, tulis script dibawah ini dan simpan didalam satu folder (terserah anda) dengan nama style.css :

Setelah anda menulis script diatas, kemudian buka lembar kerja baru kemudia tulis script seperti dibawah ini :

Simpan script diatas dengan nama index.html dan harus satu folder bersama file style.css tadi.
Jalankan file index.html di Mozilla Firefox!!!
Jika tidak ada kesalahan maka tampilannya akan seperti berikut ini :

Taraaaaa !!!! anda sudah memiliki sebuah template sederhana menggunakan CSS. kabari teman-teman anda jika anda berhasil :D, sekian terima kasih.
Mungkin dari artikel diatas masih banyak yang belum jelas janganlah ragu untuk bertanya ke saya. Mari kita belajar bareng :D

Baca Selengkapnya →

Belajar CSS

Posted by Unknown on Sunday, November 18, 2012

Apa itu CSS? dan apa kegunaanya?. Pernahkah anda melihat sebuah halaman web dengan bentuk yang rapi, warna-warna yang indah. Itulah yang disebut dengan CSS(Cascading Style Sheet). Penggunaan CSS dilakukan untuk mempercantik tampilan web. Kode CSS ditulis didalam tag <style> </style>.
Ada 3 cara untuk membuat CSS bisa diterapkan ke dalam HTML :

Inline CSS
Embedded CSS
External CSS

Untuk bisa belajar CSS yang harus disiapkan adalah :

Text Editor (Notepad, Adobe Dreamweaver, dll), disini penulis lebih senang menggunakan text editor Notepad++
Browser seperti Mozilla Firefox, Google Chrome,Opera, dll

Inline

Inline CSS digunakan pada tag HTML-nya

Sebagai contoh, ketikkan source code berikut :

Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya. Disini sebagai contoh adalah akan membuat tag header <h1> </h1> yang akan dibuat menjadi warna merah. Untuk tampilannya seperti berikut :

Embedded CSS

CSS ini menempel diantara tag <head> .. </head>

Sebagai contoh :

Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya.

<style type="text/css">
p {
color:red;
}
</style>
Source kode diatas adalah tag untuk CSS yang akan membuat tag yang didalam paragraf <p> </p> berubah menjadi warna merah.

Untuk tampilannya sebagai berikut :

External CSS

External CSS adalah cara dimana kita nantinya akan membuat file.css sendiri, kemudian memanggilnya dengan link dari tag HTML. Langsung saja saya contohkan dari External CSS.
Pertama buatlah satu Folder. Buatlah halaman dengan nama style.css simpan kedalam folder yang anda buat tadi, kemudian ketik source code dibawah :

#kotak1 {
background-color:red;
width:200px;
height:200px;
float:left;
}
Pengertian source code diatas adalah :
#kotak1 = nama id
background-color:red; = membuat background menjadi warna merah
width:200px; = membuat panjang dengan ukuran 200px
height:200px; = membuat lebar kebawah dengan ukuran 200px
float:left; = posisi objek berada di kiri

Untuk bisa menampilkan kita harus memanggil file .css yang telah dibuat tadi. Buatlah satu file dengan nama index.html. Kemudian tuliskan source code dibawah ini :

<link rel="stylesheet" href="style.css" type="text/css"> = memamnggil file style.css

Masukkan kedua file tersebut ke dalam satu folder. Jika file style.css dan index.html sudah ada di dalam satu folder langkah selanjutnya adalah jalankan file index.html di Mozilla Firefox atau Browser lainnya.

Untuk tampilannya sebagai berikut :

Artikel diatas hanyalah dasar dari membuat CSS yang saya ketahui. Jika ada kekurangan dari penulisan harap dimaafkan.

Baca Selengkapnya →

Membuat Dropdown Menu

Perbedaan ID dengan CLASS

Perbedaan ID dengan CLASS

Membuat Dropdown Menu Dengan CSS

Belajar CSS Menggunakan Padding

Membuat Bayangan Kotak dengan CSS

Belajar Border Radius di CSS

Membuat Template Sederhana dengan CSS

Belajar CSS

Inline

Embedded CSS

External CSS

Followers

Categories

Posts

Popular Posts

About Me