Membuat style denga css

Membuat style border melingkar  dengan css

Hai blogger sebelumnya saya minta maaf yang saya tampilkan disini hanya untuk mozilla dan google chrome yang lainnya saya belum tahu.

Dikesempatan ini saya akan meberi tahu tentang cara agar border pada table tidak kelihatan lancip ( terlihat melengkung ).  Didalam kita langsung saja masukkan kode berikut ….

1.       Untuk Mozilla ( dengan menggunakan awalan moz )

#melingkar

{

-moz-border-radius-topleft : 20px ;

-moz-border-radius-topright : 20px ;

-moz-border-radius-bottomleft : 20px ;

-moz-border-radius-bottomright : 20px ;

}

2.       Untuk google chrome ( menggunakan awalan webkit )

#melingkar

{

-webkit-border-bottom-left-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-right-radius: 20px;

}

Ket : angka 20px bias anda ganti dengan nomor yang anda suka
. Dan hasilnya sebagai berikut

 Download picture

Terimakasih ………………

Membuat style shadow denga css

Hai blogger untuk nebuat shadow menggunakan css anda tinggal masukin kode berikut kedalam css anda. Disini saya menampilkan kode untuk Mozilla dan google chrome

#shadow

{

-moz-box-shadow:0px 0px 10px #0000FF;

-webkit-box-shadow:0px 0px 10px #0000FF;

}

Hasilnya akan menjadi

Download picture

Terlihat bagus kan

Membuat menu dropdown menggunakan css

Selamat datang blogger kali ini saya akan menunjukkan bagaimana membuat menu dropdown yang terlihat seperti di bawah ini

Pertama yang kita lakukan adalah mebuat strukturnya terlebih dahulu dengan menggunakan <ul>

Strukturnya adlah sebagai berikut

<div id="menu" align="center">

        <ul>

          <li><a href='index.php' title="Home">Home</a></li>

          <li><a href='downloadsoftware.php' title="Download">Download</a></li>

          <li><a title="Tutorial">Tutorial</a>

              <ul>

                <li><a href='tutorial3d.php' title="3ds max">3ds max</a></li>

                <li><a href='tutorialcorel.php' title="Corel">Corel</a></li>

                <li><a href='tutorialflash.php' title="Flash">Flash</a></li>

                <li><a href='tutorialphotoshop.php' title="Photoshop">Photoshop</a></li>

                <li><a href='tutorialdesignweb.php' title="Design Web">Design Web</a></li>

                <li><a href='tutorialother.php' title="Other">Other</a></li>

              </ul>

          </li>

          <li><a title="Request">Request</a>

              <ul>

                <li><a href='requestemail.php' title="E-mail">E-mail</a></li>

                <li><a href='requestcomment.php' title="Comment">Comment</a></li>

              </ul>

          </li>

          <li><a href='about us.php' title="About Us">About Us</a></li>

        </ul>

    </div>

Selanjutnya kita membuat script css nya…………..

#menu

{

background: transparent url(bg-menu.gif) repeat-x;

font-size: 12px;

}

#menu>ul

{

padding-left: 10px;

}

#menu>ul>li

{

display: inline;

float: left;

line-height: 40px;

}

#menu>ul li

{

position: relative;

}

#menu>ul>li a

{

padding: 5px 25px;

}

#menu a

{

color: #ffffff;

text-decoration: none;

}

#menu>ul>li>a:hover

{

color: #99ccff;

}

#menu>ul>li ul

{

background-color: #99ccff;

width: 140px;

padding: 10px 10px 20px 10px;

}

#menu>ul>li ul

{

position: absolute;

left:23px;

}

#menu>ul>li ul ul {

left: 140px;

top: 0;

}

#menu>ul>li ul a

{

display: block;

padding: 12px 0 12px 4px;

line-height: 16px;

border-bottom: 1px solid #6699cc;

}

#menu>ul>li ul a:hover

{

background-color: #6699cc;

}

#menu>ul>li ul

{

display: none;

}

#menu li:hover>ul

{

display: block;

}

Terima kasih………………

Download scriptnya DISINI