Kursus Web Desain

MEMBUAT KOTAK ROUND CORNER DENGAN CSS

20:35 |

Round corner merupakan istilah dalam css untuk membuat sebuah kotak yang ujung-ujungnya tumpul. Dengan menggunakan CSS3 pembuatan round corner sangatlah mudah, hanya saja tidak semua browser support akan peritah tersebut. Tips kali ini akan menjelaskan bagaimana caranya membuat round corner dengan css dan foto. Berikut adalah langkah-langkahnya:

Pembuatan kotak dimulai dengan membuat bagian sudut kiri atas. Kali ini kita akan menggunakan foto dengan ukuran tingginya adalah 9px dan lebarnya adalah 1024px. Dengan menggunakan ukuran lebar foto 1024, maka kotak bisa ditampilkan secara fleksibel dalam ukuran maksimal 1024px. Berikut adalah perintah CSSnya:
```
<style>
 .top_left{
  background-image:url(cornerImages/corner-topleft1024x9.gif);
  height:9px;
 }

HTML:
<div class="top_left">

</div>
Hasil:
```
Langkah berikutnya adalah membuat sudut bagian kanan atas. Background foto yang digunakan ukurannya adaah 9x9px, Agar tampilannya rata kanan, maka perlu diberikan perintah float:right. Berikut adalah perintah css-nya:

.top_right{
  background-image:url(cornerImages/corner-topright9x9.gif);
  width:9px;
  height:9px;
  float:right;
 }

HTML:
<div class="top_right"></div>

Hasil:

Terihat sudut pada samping kanan atas tersebut masih berada di bawah sudut kiri atas, hal ini dikarenakan sifat DIV adalah berupa block sehingga selalu membuat baris yang baru. Untuk memperbaiki ini, berikan margin-top:-9px. Nilai -9px difungsikan agar div class top_right bergeser ke arah atas sejauh 9px.Berikut adalah code CSS top right setelah diperbaiki:

.top_right{
  background-image:url(cornerImages/corner-topright9x9.gif);
  width:9px;
  height:9px;
  float:right;
 }

Setelah sudut kanan atas naik sejauh 9px, ujung garis kiri atas lewat sejauh 9px. Untuk memperbaiki ini perlu dimodifikasi sedikit kode css top_leftnya dengan memberikan margin-right sebesar 9px. Berikut adalah perbaikan kode cssnya:

.top_left{
  background-image:url(cornerImages/corner-topleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }

Sampai tahap ini garis atas dan sudut kiri kanannya sudah selesai, selanjutnya tinggal membuatkan garis pinggir kanan kirinya dengan jarak padding 0px atas bawah dan 10px kanan kirinya. Berikut adalah perintah css-nya:

.inner{
  border-left:solid 1px #c00000;
  border-right:solid 1px #c00000; 
  padding:0px 10px;
  background-color:#efefef;
 }
HTML:
<div class="inner">
 <p>Computer Course Center menyediakan kursus Dasar Komputer, 
Komputer Aplikasi Bisnis dan Administrasi Perkantoran, Desain Grafis, 
Web Desain, Pemrograman Web dengan Codeigniter dan Internet Marketing.</p>
</div>
Hasil:

Pada gambar di atas terlihat ada jarak antara garis di atas dengan paragrafnya, hal ini disebabkan oleh pengaruh margin-atas tag <p>. Untuk menghilangkan pengaruh tersebut perlu dibuatkan sebuah class css dengan nilai margin atasnya 0px. Berikut adalah kode yang dimaksud:

.topgap{
  margin-top:0px;
 }
HTML:
<div class="inner">
 <p class="topgap">Computer Course Center menyediakan kursus Dasar 
Komputer, Komputer Aplikasi Bisnis dan Administrasi Perkantoran, Desain 
Grafis, Web Desain, Pemrograman Web dengan Codeigniter dan Internet 
Marketing.</p>
</div>

Hasil:

Untuk membuat sudut kiri bawah dan kanan bawah prosesnya hampir sama seperti membuat sudut di atas atas, hanya saja gambar yang digunakan harusdibalik. Berikut adalah kode css-nya:

.bottom_left{
  background-image:url(cornerImages/corner-bottomleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }

 .bottom_right{
  background-image:url(cornerImages/corner-bottomright9x9.gif);
  height:9px;
  width:9px;
  margin-top:-9px;
  float:right;
 }
 HTML:
 <div class="bottom_left"></div>
<div class="bottom_right"></div>

Hasil:

Sekali lagi, terlihat masih ada jarak antara text dengan pinggir bawah frame. Untuk menghilangkan ini maka css top gap mesti diperbaiki dengan menambahkan kode margin-bottom:0px. Berikut adalah kode css-nya:

.topgap{
  margin-top:0px;
  margin-bottom:0px;
 }

Hasil:

Sampai tahap ini proses pembuatan kotak round corner sudah selesai, semoga tutorial
ini bisa membantu.Untuk lebih jelasnya berikut adalah kode CSS dan HTML selengkapnya:
<html>
<head>
<style>
 body{
  width:700px;
  margin:20px auto;
 }
 .top_left{
  background-image:url(cornerImages/corner-topleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }
 
 .top_right{
  background-image:url(cornerImages/corner-topright9x9.gif);
  width:9px;
  height:9px;
  float:right;
  margin-top:-9px;
 }
 .inner{
  border-left:solid 1px #c00000;
  border-right:solid 1px #c00000; 
  padding:0px 10px;
  background-color:#efefef;
 }
 
 .topgap{
  margin-top:0px;
  margin-bottom:0px;
 }
 
 .bottom_left{
  background-image:url(cornerImages/corner-bottomleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }
 
 .bottom_right{
  background-image:url(cornerImages/corner-bottomright9x9.gif);
  height:9px;
  width:9px;
  margin-top:-9px;
  float:right;
 }
 
</style>
</head>

<body>
<div class="top_left"></div>
<div class="top_right"></div>
        <div class="inner">
            <p class="topgap">Computer Course Center menyediakan kursus 
Dasar Komputer, Komputer Aplikasi Bisnis dan Administrasi Perkantoran, 
Desain Grafis, Web Desain, Pemrograman Web dengan Codeigniter dan Internet 
Marketing.</p>
     
        </div>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</body>
</html>

Read User's Comments(0)

Teknik Mengabungkan Foto Untuk Membuat Banner

01:29 |

Pada postingan kali ini, saya mencoba untuk memmbagikan tips membuat banner untuk web dengan teknik penggabungan foto yang sanagt sederhana.

Jalankan software adobe photoshop
Klik New Untuk Membuat kanvas banner dengan Ukuran Width:800 pixels , Height:150 pixels, Resolution :72 pixels/inch ,Color Mode : RGB
Klik OK, sehingga hasilnya akan terlihat seperti gambar di bawah ini:
Lalu buka dua buah gambar untuk menggabungkanya
Langkah kelima gabungkan kedua foto tersebut dengan cara memindahkan satu foto ke atas foto yang lainnya kemudian atur posisi dan ukurannya dengan menggunakan move tool dan tentunya dikombinasikan dengan perintah EDIT--> Free Transform
Setelah fotonya berada pada posisi yang diinginkan, Aktifkan Eraser tool kemudian atur settingan hardnest menjadi 0 dan master diameter sesuai dengan keinginan. Hapus lah foto yang berada diatasnya dengan menggunakan eraser tool tadi. Maka hasilnya akan tampil seperti di bawah ini.

Read User's Comments(0)

Membuat Menu dengan HTML dan CSS

21:35 |

Menu Vertikal

Langkah membuat menu vertikal seperti tampilan di atas:

1. Buat file HTML sebagai berikut :
<ul>

<li><a href="#">Product</a></li>

<li><a href="#">Galery</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Logout</a></li>

</ul>

(Hasil Koding langkah I)

2.

Buat perintah CSS untuk menghilangkan style list dan margin text

   #vertical ul

   {

                        list-style-type:none;

                        margin:0;

                        padding:0;

            }

   Perintah list-style-type:none; digunakan untuk menghilangkan style list. Kemudian untuk

menghilangkan margin digunakan perintah margin:0 dan padding:0

(Hasil Koding langkah II)

3. Atur batas kiri list dengan perintah padding:

   #vertical ul li

            {

                        padding-left:.1em;

            }

4.

Berikan perintah formatting dan pewarnaan pada list yang digunakan sebagai link

#vertical ul li a

                        {

                                    font-family:"Times New Roman", Times, serif;

                                    text-decoration:none;

                                    color:#000066;

                                    background-color:transparent;

                                    width:8em;

                                    display:block;

                                    border-bottom:dotted 1px #000033;

                                    border-left:solid 1px #FFFFFF;

                                    border-top:solid 1px #FFFFFF;

                                    padding: .3em .5em;

                        }

   Keterangan:



   Perintah CSS

   Fungsi

   font-family:"Times New Roman", Times, serif;

   Menentukan jenis font text yang digunakan

   text-decoration:none;

   Menghilangkan garis bawah pada text

   color:#000066;

   Menentukan warna text

   background-color:transparent;

   Memberikan warna background transparan pada text

   width:8em;

   Menentukan lebar menu sebanyak 8 x karakter

   display:block;

   Menentukan agar yang dijadikan link tidak textnya saja, melainkan satu kotak selebar 8em.

   border-bottom:dotted 1px #000033;

   border-left:solid 1px #FFFFFF;

   border-top:solid 1px #FFFFFF;

   Menentukan ketebalan garis sebesar 1px dan warnanya masing-masing baik bawah, kiri, atas

   padding: .3em .5em;

   Mengatur jarak text dengan blok(Kotak)

( Hasil Koding Langkah IV)

5. Memberikan perintah css saat kursor didekatkan ke menu:

#vertical ul li a:hover

{

font-weight:bold;

border-right:solid 1px #000033;

border-bottom:solid 1px #000033;

border-left:solid 1px #FFFFFF;

border-top:solid 1px #FFFFFF;

}

Perintah #vertical ul li a:hover, merupakan event saat mouse berada di atas menu, kemudian diberikan perintah cetak tebal terhadap textnya dengan perintah : font-weight:bold; dan border pada masing-masing sisinya.

6. Melengkapi Tag HTML dengan perintah css yang dudah dibuat, tentunya harus dilinkkan terlebih dahulu kalau cssnya dibuat secara external.

<div id="vertical">

<ul>

<li><a href="#">Product</a></li>

<li><a href="#">Galery</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Logout</a></li>

</ul>

</div>

(Hasil Akhir)

KODE SELENGKAPNYA:

Kode HTML:

<html>

<head>

<link rel="stylesheet" type="text/css" href="style1.css" />

</head>

<body>

<div id="vertical">

<ul>

<li><a href="#">Product</a></li>

<li><a href="#">Galery</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Logout</a></li>

</ul>

</div>

</body>

</html>

Kode CSS

#vertical ul

                {

                                list-style-type:none;

                                margin:0;

                                padding:0;

                }

#vertical ul li {padding-left:.1em;}

#vertical ul li a

                                {

                                                font-family:"Times New Roman", Times, serif;

                                                text-decoration:none;

                                                display:block;

                                                color:#000066;

                                                background-color:transparent;

                                                width:8em;

                                                border-bottom:dotted 1px #000033;

                                                border-left:solid 1px #FFFFFF;

                                                border-top:solid 1px #FFFFFF;

                                                padding: .3em .5em;



                                }

#vertical ul li a:hover

                                {

                                                font-weight:bold;

                                                border-right:solid 1px #000033;

                                                border-bottom:solid 1px #000033;

                                                border-left:solid 1px #FFFFFF;

                                                border-top:solid 1px #FFFFFF;

Read User's Comments(0)

Kursus Web Desain

Blogger templates

Blogger news

Blogroll

Archives

MEMBUAT KOTAK ROUND CORNER DENGAN CSS

</div> Hasil:

Hasil:

Hasil:

Hasil:

Hasil:

Hasil:

Teknik Mengabungkan Foto Untuk Membuat Banner

Membuat Menu dengan HTML dan CSS

Perintah CSS	Fungsi
font-family:"Times New Roman", Times, serif;	Menentukan jenis font text yang digunakan
text-decoration:none;	Menghilangkan garis bawah pada text
color:#000066;	Menentukan warna text
background-color:transparent;	Memberikan warna background transparan pada text
width:8em;	Menentukan lebar menu sebanyak 8 x karakter
display:block;	Menentukan agar yang dijadikan link tidak textnya saja, melainkan satu kotak selebar 8em.
border-bottom:dotted 1px #000033; border-left:solid 1px #FFFFFF; border-top:solid 1px #FFFFFF;	Menentukan ketebalan garis sebesar 1px dan warnanya masing-masing baik bawah, kiri, atas
padding: .3em .5em;	Mengatur jarak text dengan blok(Kotak)