Langganan Feed

Masukkan Email Anda:

Delivered by FeedBurner

Arsip

Total Tayangan Halaman

Tampilkan postingan dengan label css. Tampilkan semua postingan
Tampilkan postingan dengan label css. Tampilkan semua postingan

Membuat Efek Border Pada Hover Link

Written By batikbumi on 10 Nov 2012 | 04.21

Berikut ini adalah cara membuat link memiliki efek border saat mouse berada pada link tersebut. Jadi, maksudnya, ketika mouse diarahkan ke link, maka link tersebut akan memiliki border yang mengelilinginya. Efek tersebut akan saya buat dengan menggunakan CSS

Pertama, saya siapkan gambar dalam folder borderHover (nama terserah anda), gambar tersebut adalah anjing.jpg
anjing.jpg
Kemudian saya buat file html yang saya beri nama link_border.html yang saya taruh pada folder yang sama dengan folder gambar anjing.jpg. Kode html nya sebagai berikut:

<html>
<head>
<title>Link Border Hover</title>
<link rel="stylesheet" href="efek_border.css" type="text/css">
</head>
<body>
<a class="efekborder" href="http://www.bum1.info" target="_blank">
<img src="anjing.jpg">
</a>
</body>
</html>

Kemudian buat file .CSS yang juga ditaruh dalam folder yang sama. Saya akan memberi nama file .CSS nya efek_border.css, kodenya sebagai berikut:

.efekborder{
    border: 6px solid #ccc;
}
.efekborder:hover img{
    border: 6px solid blue;
}

hasilnya akan seperti di bawah ini :

    

Gambar sebelum Hover dan gambar setelah di hover.

04.21 | 3 komentar | Read More
di 04.21 3 komentar
Label:

Validasi HTML dan CSS

Written By batikbumi on 2 Jun 2012 | 01.43

Validasi HTML dan CSS
Kemungkinan besar anda yang sering berkutat dengan dunia maya sering mendengar istilah Validasi HTML dan CSS, namun apakah sebenarnya validasi HTML dan CSS tersebut? Dan apakah perlu kita memvalidasi file HTML dan file CSS kita? Apa pula keuntungan yang kita dapat bila kita memvalidasi file HTML dan CSS kita? 
Untuk itu marilah kita bahas satu persatu, dan semoga bisa menjawab pertanyaan di atas.
Validasi file HTML dan file CSS adalah sebuah layanan online dengan tujuan memeriksa website yang anda buat berisi ERROR atau tidak.
  • HTML validator akan memeriksa kode HTML pada website anda dengan dasar acuan dari W3C Konsorsium. Validator HTML akan memeriksa terjadinya error pada website anda, dan juga menyarankan kode HTML yang baik digunakan pada website anda.
  • Sebuah CSS validator akan memeriksa style sheet CSS yang anda gunakan pada website anda dengan cara yang sama dengan HTML validator, kebanyakan akan memastikan bahwa kode CSS yang anda gunakan kompatibel dengan standar yang diberikan oleh W3C.

Perlukah Memvalidasi HTML dan CSS?

Berikut ini adalah beberapa alasan kenapa anda harus memvalidasi kode HTML maupun CSS anda:
  1. Membantu agar website anda dapat diakses pada berbagai browser (Cross-Browser), berbagai platform (Cross-Platform) dan kompatibilitas website anda di masa depan. Karena koding CSS dan HTML website dikatakan berhasil jika website tersebut dapat berjalan pada berbagai browser dan platform system dan harus kompatibel dengan berbagai perubahan yang terjadi pada browser dan platform.
  2. Jika terdapat error koding HTML maupun CSS pada website anda, maka browser akan berusaha mengkompensasi error tersebut. Pada beberapa browser kesalahan kode HTML maupun CSS ini akan diacuhkan, sedangkan browser yang lain berusaha untuk mengkompensasi error tersebut. Hal ini akan berpengaruh pada pengindex-an website dari search engine (jika terdapat error search engine akan lebih susah mengakses website).
  3. Jika tidak terdapat error pada kode HTML maupun CSS pada website anda tentu akan membuat website anda terlihat lebih Profesional.

Beberapa Alasan Kenapa Tidak Perlu Memvalidasi HTML dan CSS

  1. Memvalidasi HTML maupun CSS tidak menjamin bahwa website anda akan berjalan dengan baik pada Cross-Browser.
  2. Mengkonversi website menjadi bebas dari error memakan banyak waktu dan resource.
  3. Pengunjung website anda kebanyakan tidak akan memeriksa source code halaman website anda.

Keuntungan Bila Memvalidasi Kode HTML atau CSS 

  1. Melindungi halaman website anda dari masalah yang muncul ketika terjadi syntax error, seperti terhentinya peng-index-an website anda oleh search engine karena kesalahan kode HTML atau CSS yang terjadi pada awal kode website anda.
  2. Dengan tampilan website yang baik dan ditambah dengan kode yang bebas error, maka website anda akan menjadi lebih kuat dan semakin mudah di akses.
01.43 | 0 komentar | Read More
di 01.43 0 komentar
Label: ,

Membuat Efek Pop-Up dengan CSS

Written By batikbumi on 31 Mei 2012 | 07.35

Membuat Efek Pop-Up dengan CSS

Membuat efek pop-up gambar pada link ataupun pada thumbnail gambar dan mengaktifkan OnMouseover dengan menggunakan CSS. Dengan menggunakan bantuan elemen CSS;pseudo hover class digabungkan dengan posisi absolute dan relative, maka gambar yang akan diberi efek Pop-Up akan dengan mudah diletakkan pada halaman HTML.
Pertama-tama yang harus anda buat adalah file CSS untuk mengatur format tampilan Pop-Up gambar dengan menulis kode CSS berikut:


.thumbnail{
position:relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

/*style untuk pop-up gambar*/
.thumbnail span{
position:absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility:hidden;
}

/*style untuk pop-up gambar*/
.thumbnail span img{
border-width: 0;
padding:2px;
}

/*style pada saat di hover*/
.thumbnail:hover span{
visibility:visible;
top: 0;
left: 60px;
}

Simpan file tersebut dan beri nama dengan style.css


Lalu buat sebuah file HTML dan beri nama index.html, untuk memperlihatkan thumbnail gambar anda. Letakkan gambar dan deskripsi yang akan di pop-up diantara tag <span>

<body>


<link href="style.css" rel="stylesheet" type="text/css" />
<a class="thumbnail" href="http://bum1.info">
<img src="1.jpg" width="100px" height="66px" border="0" />
<span><img src="1-besar.jpg" /><br />Contoh Gambar Pertama</span></a>


<a class="thumbnail" href="http://bum1.info">
<img src="2.jpg" width="100px" height="66px" border="0" />
<span><img src="2-besar.jpg" /><br />Contoh Gambar Kedua</span></a>


</body>

Setelah itu anda siapkan dua buah gambar sebagai thumbnail gambar yang akan di hover dan dua gambar lagi sebagai pop-up dari gambar yang di hover tersebut. Letakkan di sebuah folder ataupun dapat diletakkan di root folder dari website anda.

Membuat Efek Pop-Up dengan CSS
File dalam 1 folder
 
Selamat mencoba...

Demikian Tutorial Website Membuat Efek Pop-Up dengan CSS

07.35 | 1 komentar | Read More
di 07.35 1 komentar
Label:

Dropdown Menu dengan CSS

Written By batikbumi on 24 Feb 2012 | 03.36

css
Dropdown menu berfungsi saat kita membutuhkan sub menu untuk menu utama. Pada posting kali ini saya akan mencoba membuat menu dropdown sederhana dengan menggunakan css (Cascading Style Sheet). Disini saya akan membuat dua buah file yaitu style.css yang berfungsi untuk mengatur tampilan dari code html dan yang kedua adalah dropdown.html yang akan tampil di dalam browser internet. Kedua file ini harus diletakkan dalam folder yang sama.


Baiklah, berikut ini adalah file style.css nya :
Buka notepad anda, tulis atau copy paste code di bawah, lalu save as style.css.

/* CSS Document */

#menu { position: relative;
width: 100%;
height: 40px;
background: #6699cc;
border: 1px solid #000000;
}
#menu ul{ margin: 0;
 padding: 0;
 list-style: none;
}
#menu ul li{ position: relative;
   float: left;
}
#menu ul li a{ display: block;
      text-decoration: none;
      color: #ffffff;
      padding: 10px;
              float: left;
      border-right: 1px solid #000000;
}
#menu ul li a:hover{ background-color: #000000; }
#menu ul li ul { display: none;}
#menu ul li:hover ul { display: block;
 position: absolute;
 top: 41px;
 left: 0px;
}
#menu ul li:hover ul li a{ display: block;
     background: #6699cc;
     color: #ffffff;
     width: 130px;
     border-left: 1px solid #000000;
}
#menu ul li:hover ul li a:hover { background: #000000;
       color: #ffffff;
 }


Lalu file dropdown.html nya adalah :
Buka notepad kembali, tulis atau copy paste code di bawah, lalu save as dropdown.html.

<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dropdown menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a>
<ul>
<li><a href="">Web Design</a></li>
<li><a href="">Web Programming</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="http://www.bum1.info">bumi.info</a></li>
<li><a href="http://www.prodesign.web.id">Prodesign</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>

Simpan kedua file dalam folder yang sama. Setelah selesai coba ditest dengan membuka file dropdown.html dengan browser kesayangan anda. Bila berhasil maka akan terlihat seperti gambar di bawah ini :

css

Semoga bermanfaat.

03.36 | 5 komentar | Read More
di 03.36 5 komentar
Label:
Langganan: Postingan (Atom)