Cara Membuat CSS Button dengan Ikon tanpa Image

Buat button dapat dilakukan sepenuhnya dengan CSS dan ikon tanpa menggunakan image. Saya menemukan bahwa ada banyak ikon yang dapat digunakan dengan menggunakan Heksadesimal entity. Berikut adalah daftar dimana anda dapat menemukan kode Heksadesimal untuk icon button anda.
     Unicode codepoint Bagan
     Unicode Standard
     UTF-8 encoding table and Unicode characters
Sekarang mari kita melihat bersama bagaimana kita bisa menggunakan ikon2 di atas untuk membuat button.
Langkah 1: Membuat Button
Pertama, kita harus membuat buttonnya. Pembuatan button dibawah ini menggunakan CSS3 Rounded Corner Rectangle. Kopi kode CSS di bawah ini untuk membuat button.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.buttons { display: inline-block; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */ border: 1px solid #a1a1a1; padding: 0 2em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; }

Langkah 2: Penambahan :before Selector
Setelah kita sudah membuat button, kita perlu menambahkan :before selector untuk menambahkan konten ke button kita.
Kopi kode CSS di bawah ini untuk menggunakan :before selector.

?

1 2 3 4 5 6 7 8 9 10

.buttons:before { float: left; width: 1em; text-align: center; font-size: 1.7em; margin: 0 0.5em 0 -1em; padding: 0 .2em; pointer-events: none; }

Untuk menambahkan ikon ke button kita, kita perlu menggunakan properti CSS "content".
Lihat contoh2nya di bawah ini:

Form Buttons

?

1 2 3 4 5 6 7

/*Forms*/ .add:before    { content: "\271A"; } .edit:before   { content: "\270E"; } .delete:before { content: "\2718";} .save:before   { content: "\2714";} .email:before  { content: "\2709";} .cross:before  { content: "\2716"; }

Button Add Edit Delete Save Email cross

Currency

?

1 2 3 4 5

/*Currency*/ .dollar:before { content:"\0024"; } .euro:before   { content:"\20AC"; } .pound:before  { content: "\00A3"; } .cent:before   { content: "\20B5"; }

Dollar Euro Cent Pound

Temperature

?

1 2 3

/*Temp*/ .celsius:before    { content: "\2103"; } .fahrenheit:before { content: "\2109"; }

Celsius Fahrenheit

Math Symbols

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/*Math & Factions*/ .pi:before            { content: "\213C"; } .one_thrid:before     { content: "\2153"; } .two_thrid:before     { content: "\2154"; } .one_fifth:before     { content: "\2155"; } .two_fifth:before     { content: "\2156"; } .three_fifth:before   { content: "\2157"; } .four_fifth:before    { content: "\2158"; } .one_sixth:before     { content: "\2159"; } .five_sixth:before    { content: "\215A"; } .one_eighth:before    { content: "\215B"; } .three_eighth:before  { content: "\215C"; } .five_eighth:before   { content: "\215D"; } .seven_eighth:before  { content: "\215E"; } .quarter:before       { content: "\00BC"; } .halff:before          { content: "\00BD"; } .three_quarter:before { content: "\00BE"; }

pi One Thrid Two Thrid One Fifth Two Fifth Three Fifth Four Fifth One Sixth Five Sixth One Eighth Three Eighth Five Eighth Seven Eighth Quarter Half Three Quarter

Arrows

?

1 2 3 4 5 6 7 8 9 10

/*Arrows*/ .next:before             { content: "\279C"; } .left_arrow:before       { content: "\2190"; } .up_arrow:before         { content: "\2191"; } .right_arrow:before      { content: "\2192"; } .down_arrow:before       { content: "\2193"; } .up_left_arrow:before    { content: "\2196"; } .up_right_arrow:before   { content: "\2197"; } .down_left_arrow:before  { content: "\2199"; } .down_right_arrow:before { content: "\2198"; }

Left Arrow Up Arrow Right Arrow Down Arrow Up Left Arrow Up Right Arrow Down Left Arrow Down Right Arrow Next

Misc Symbols

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

/*Symbols*/ .like:before               { content: "\2764"; } .star:before               { content: "\2605"; } .spark:before              { content: "\2737"; } .play:before               { content: "\25B6"; } .watch:before              { content: "\231A"; } .blacksun:before           { content: "\2600"; } .cloud:before              { content: "\2601"; } .umbrella:before           { content: "\2602"; } .snowman:before            { content: "\2603"; } .blackstar:before          { content: "\2605"; } .whitestar:before          { content: "\2606"; } .blackphone:before         { content: "\260E"; } .whitephone:before         { content: "\260F"; } .saltire:before            { content: "\2613"; } .hot_drink:before          { content: "\2615"; } .skull:before              { content: "\2620"; } .radioactive:before        { content: "\2622"; } .biohazard:before          { content: "\2623"; } .peace:before              { content: "\262E"; } .yingyang:before           { content: "\262F"; } .frowning_face:before      { content: "\2639"; } .smiling_face:before       { content: "\263A"; } .first_quarter_moon:before { content: "\263D"; } .last_quarter_moon:before  { content: "\263E"; } .wheelchair:before         { content: "\267F"; } .recycle:before            { content: "\267D"; } .recycle2:before           { content: "\267C"; } .music_note:before         { content: "\266C"; } .warning:before            { content: "\26A0"; } .male_and_female:before    { content: "\26A4"; } .scissors:before           { content: "\2701"; } .airplane:before           { content: "\2708"; } .snow:before               { content: "\2042"; }

Like Star Spark Play Snow Blacksun Cloud Umbrella Snowman Blackstar Whitestar Blackphone Saltire Hot Drink Skull Radioactive Biohazard Peace YingYang Frowning Face Smiling Face First Quarter Moon Last Quarter Moon Wheelchair Recycle Recycle2 Music Note Warning Male And Female Scissors Airplane

Memasang flash di modul Joomla dengan HTML & CSS valid

Ada beberapa metode embedding flash di Joomla dengan menuliskan script tertentu, namun tidak semua  code tersebut valid.

AFF sharing valid code untuk embed flash yang disisipkan pada modul, dimana metode ini lebih fleksibel daripada embedding secara langsung pada index.php template joomla. Kita bisa lebih mudah mengatur tampilan flash pada halaman-  halaman tertentu, posisi tertentu, dll sesuai flexibilitas modul pada Joomla.

Berikut ini scriptnya :

<object type="application/x-shockwave-flash" data="images/flash.swf" width="525" height="320">
<param name="movie" value="images/flash.swf" />
<img src="images/noflash.jpg" width="525" height="320" alt="banner" />
</object>

Langkahnya, pertama - tama matikan fungsi WYSIWYG di:  Global configuration | Tab Site | Default WYSIWYG Editor ( pilih No WYSIWYG ), kemudian buat modul baru di : Site modules | New .

Copy paste code diatas di window WYSIWYG editor pada modul yang baru anda buat, ganti nilai - nilai :

• data="images/flash.swf
• value="images/flash.swf"
• img src="images/noflash.jpg"
• beserta ukuran width dan height

Script diatas mampu menggantikan flash dengan sebuah image jika browser terdeteksi tidak support flash, yaitu dengan menampilkan gambar noflash.jpg