Apa itu CSS 3 ?

Sambutlah Jaman Baru dengan teknik baru. Ketika jaman terus berkembang maka mau tidak mau kita harus mengikutinya jika kita tidak mau disebut ketinggalan jaman.
Sekarang kita seharus sudah mulai belajar teknik baru tentang CSS.  CSS 3 telah memberikan kita cara-cara yang mudah untuk membuat efek / style pada sebuah elemen HTML dengan meninggalkan cara lama yang dibantu oleh Javascript dan JQuery.
Saya yakin Anda pernah mendengar tentang CSS pada umumnya. CSS3 tidak jauh berbeda, dalam hal sintaksis, namun kekuatan CSS3 jauh lebih besar. Seperti yang akan Anda lihat dalam teknik berikut ini,  dengan CSS 3 anda dapat membuat sudut membulat (rounded corners), bayangan pada tulisan (Text Shadow), latar belakang bening (Transparency Background) dan masih banyak lagi.

CSS3 adalah anak baru di keluarga stylesheet. Menawarkan kemungkinan-kemungkinan baru yang menarik untuk menciptakan efek pada desain situs anda, memungkinkan Anda untuk menggunakan style sheet lebih beragam untuk berbagai kesempatan dan banyak lagi.

Pembahasan

Berikut ini adalah 11 teknik yang akan saya tunjukkan kepada Anda bagaimana menciptakan efek di CSS 3 tanpa JavaScript ataupun JQuery.
Ingat – efek ini hanya akan bekerja di browser modern yang mengimplementasikan fitur CSS3 ini.
Pilihan terbaik Anda adalah menggunakan browser: Safari 4, firefox 3.5.3 keatas, Google Chrome.

1. CSS 3 Rounded Corners
2. CSS 3 Box Shadow
3. CSS 3 Text Shadow
4. CSS 3 Fancy Font
5. CSS 3 Opacity
6. CSS 3 RGBA/ CSS 3 background
7. CSS 3 Background Size
8. CSS 3 Multiple Backgrounds
9. CSS 3 Columns
10. CSS 3 Border Image
11. CSS 3 Animations

To generate your menu, just add menu items, select menu type, color and font settings, then copy the CSS/JavaScript and XHTML menu code and paste it in your page. XHTML code is very important for search engines. They leave pages in last positions if the code is not SEO friendly. If you want to make professional and fast designs, consider adding this software to your tool set. On the other hand, the preview only works in the interface. You just don’t know how the menu will look in the browser until you copy and paste the generated code. Besides, it will be nice if you could input the menu item link directly in the interface. Right now, you have to edit the links manually.

If you want your job to be more easy, you can use that freeware below:

Css Menu Generator 4.0
With this version of the tool you can generate horizontal
or vertical drop-down (pull-down) menus.

I myself have experienced such a case to make me stress, and finally to the efforts and hard work, I found a software / freeware, called CSS Tab Designer.

I have to say that I was pleasantly surprised with the interface of this program. Pretty nice and easy to use, and the most important thing, it generates strict xhtml compliant code. That means you can be sure that your web site will be seen in any browser in the same way.

Another important feature is that you can edit the generated code to customize some properties when needed. Only one features is not present in the interface, you can’t make sub menus, which is a pity and sometimes needed, but you can make similar sub menus based on the original without too much effort.

You can Download CSS Tab for Web Designer here:

CSS Tab  Designer 2.0

Sorry, we do not refuse if I use the image as a button for the beauty of your site, but if your site has a lot of navigation should use as a background image on the button and the words on the button using a dynamic text that you work more practical and efficient.

Okay, to create a dynamic Button,  I will show you how:

• Make 2 pieces on the image to photoshop background in accordance with the button you wish, in this case I cite like this:
  

  

• Then, create a navigation menu with HTML, for example:

<ul id=”inline-button”>
<li> <a href=”http://gusdwi.info”> <span>Home</span></a> </li>
<li> <a href=”http://gusdwi.info/tentang-gusdwi/”> <span>About Me</span> </a> </li>
<li> <a href=”http://freetemplatedesign.blogspot.com/”>  <span>Free Template Design</span></a> </li>
</ul>

• And make a CSS code like this:

#inline-button {
margin:1em 0 0 0;
padding:0;
list-style:none;
text-align:left;
}
#inline-button li {
margin: 0 0 0 0;
list-style:none;
display:inline;
padding:0;
}
#inline-button li a {
background:  url(../images/button-left-bg.gif)no-repeat left top;
font-size:1.3em;
margin:0 0 0 0 ;
padding:0.3em 0 0.5em 0;
text-decoration:none;
}

#inline-button li a span {
background:  url(../images/button-bg.gif)no-repeat right top;
margin:0 0 0 1em;
padding:0.3em 1em 0.5em 0;
color:#330000;}

The result will be as below:

• Home
• About Me
• Free Template Design

Baiklah untuk lebih memperjelas fungsi z-index, saya akan memberikan ilustrasi seperti ini, Dalam sebuah halaman web terdapat 3 div yaitu:

<div class=”layer_1″>BERWARNA BIRU</div>
<div class=”layer_2″>BERWARNA HIJAU</div>
<div class=”layer_3″>BERWARNA KUNING</div>

Selanjutnya masing-masing class selector diberi style sepertti berikut:

div.layer_1 {
background-color:blue;
position:relative;
left:0;
top:0;
z-index:0;
}
div.layer_2 {
background-color:green;
position:relative;
left:20px;
top:-20px;
z-index:1;
}
div.layer_3 {
background-color:yellow;
position:relative;
left:40px;
top:-40px;
z-index:2;
}

div.layer_1, div.layer_2, div.layer_3 {
width:200px;
padding:20px 15px;
text-align:center;
font-size:14px;
font-weight:bold;
color:#000000;}

hasilnya akan tampak seperti dibawah ini:

Bila anda ingin merubah susunan layer tersebut, anda tinggal meng edit bilangan integer yang menjadi nilai z-index. dan kalau belum jelas tentang penggunaan z-index, silahkan isi comment form dibawah…! mudah mudahan Saya bisa bantu anda.

Nah, sekarang saya akan mencoba memberikan sedikit pengalaman saya kepada anda.
Pertama, buatlah text box diantara tag <body>…</body>pada halaman HTML seperti ini:

<div class=”kotak_teks”></div>

selanjutnya, ketikan isi atau artikel diantara tag <div>…</div> seperti contoh:

<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css
</div>

Kedua, buatlah style Css nya diantara tag <head>…</head> seperti contoh dibawah ini:

<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>

Untuk lebih jelasnya, lihatlah sintax HTML yang lengkap dibawah ini:

<html>
<head>
<title>Membuat texs scroll box dengan Css</title>
<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>
</head>

<body>
<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css.
</div>
</body>
</html>

Dan hasilnya akan menjadi seperti text box dibawah ini:

Nah, semoga ada manfaatnya bagi yang belum mengetahui cara ini.