trasition css3 ngaeweb
Belajar Trasition CSS3

Ngaeweb – yosh akhirnya saya bisa ngepost lagi setelah tugas yang bertubi tubi menimpa saya.. maklumlah anak kampus memang nasibnya seperti ini X_X. Yo pagi ini saya akan membahas tentang trasition CSS3. Trasition adalah cara memberikan waktu ketika menu atau tombol atau apa saja yang di buat dengan css.  cara yang pertama seperti biasa buka dreamweaver kalian lalu buat menu html. Berikan Css internal maupun external. kalau masi belum bisa membuat css ayo baca lagi artikel saya yang sebelumnya tinggal di search doang kok :D.

Buatlah seperti di bawah ini :

Code css trasition

untuk kode setiap browser dibedakan karena ini merupakan css 3, agar lebh efektif jika ingin mencoba ini sebaiknya adblocknya di matikan dulu yaa..
setelah itu pangil class Testa ke dalam halaman HTML

code html trasition
Setelah itu lansung di save.. Dan lihat hasilnya tadaaa akan berubah kan menjadi sesuatu yang lebih indah di pandang mata.
Trasition tidak hanya berpengaruh pada margin. Trasition juga berpengaruh pada Perubahan warna, perubahan besarnya tulisan dan yang lainya.



sekian informasi yang saya berikan. terimakasi telah berkunjung, mohon maaf jika ada kekurangan dan salam NGAEWEB :D.
Ngaeweb - Yoshh hari ini kita langsung membahas tentang CSS3.
ngaeweb.blogspot.com belajar HTML dan css
Gambar : Css3
CSS3 adalah Cascading Style Sheet versi ke 3, yaitu pengatur dan pengendali tampilan sebuah halaman blog/ web.

 CSS3 melakukan penataan terhadap komponen HTML maupun XHTML pada halaman web sehingga menghasilkan tampilan yang ramah dimata atau retina friendly.
CSS versi ketiga dapat melakukan berbagai pemutakhiran terhadap kemampuannya beradaptasi dengan teknologi multimedia yang semakin modern. Kemampuan yang di milki CSS3 antara lain:

  • CSS3 mampu membuat efek animasi secara independent tanpa membutuhkan software tambahan seperti Adobe Flash dan Microsoft Silverlight. Karena hanya menggukakan kode kode maka web tidak akan berat atau tidak lama dan tidak boros kuota untuk membukanya.
  • CSS3 mampu memberikan efek grafis terhadap teks, kolom, table serta penataan huruf.
  • CSS3 mampu menampilkan berbagai macam dan jenis huruf selain web-safe fonts.
  • CSS3 mampu merekonstruksi secara visual tampilan block, seperti merubah ukuran kotak, transformasi 2D/ 3D, memberikan efek sudut (radius) dan shadow (bayangan).
  • CSS3 mampu memanipulasi secara visual warna, desain maupun tekstur suatu halaman HTML atau XHTML.

Kelebihan dan Kekurangan CSS3,
Kelebihan :

  • Dapat Mengatur dan mempercantik interface website.
  • Jika ingin membuat file CSS3 sebaiknya menggunakan CSS external atau terpisah dari file html dan dapat dipanggil di file html. Hal ini dapat mempermudah kita jika terjadi pengeditan koding.
  • Dengan CSS3, situs website dapat berkembang dan lebih interaktif lagi.
  • Bisa mengurangi ukuran file yang akan di-load dan akan menjadi lebih ringan.
  • Lebih mudah dan simple serta dapat menghindari penggunaan tag yang berulang-ulang.
  • Banyak yang beranggapan bahwa peran jQuery sudah tidak dibutuhkan lagi setelah CSS3 semakin berkembang kedepannya. Apalagi dari segi size, jQuery jauh lebih besar. Tidak hanya jQuery saja, peran Flash saja sudah tergantikan dengan adanya CSS3.

Kekurangan :
  • Kodingnya berbeda dengan versi sebelumnya.
  • Koding dari setiapBrowser berbeda. karena kita harus membuat koding dari seluruh Browser satu persatu.
  • Dibutuhkan waktu lebih lama untuk membuatnya.

Sekian informasi dari saya. mulai besok saya akan mengupload artikel2 mengenai CSS3, dapat di ketahui bahwa  Tag CSS ataupun HTML dapat di pakai untuk mengubah situs blog anda jadi jangan ragu2 untuk belajar. Mungkin saja apa yang kalian pelajari hari ini, bisa berguna di masa yang akan datang. Terimakasi telah berkunjung, tetaplah mencoba dan salam NGAEWEB.
ngaeweb
Gambar 1 Cover Membuat List Dengan Simbol Hiragana dan Katakana Menggunakan CSS

 Ngaeweb – Hari ini saya akan menjelaskan tentang cara membuat list dengan simbol hiragana menggunakan CSS. Pertama – tama buatlah class dengan nama hiragana dan buatlah seperti scrip di bawah ini,



Lalu di dalam kalian tinggal memanggil class hiragana seperti di bawah ini,

Dan jadinya akan seperti ini,


Sekarang kita mencoba dengan menggunakan katakana. Pertama – tama buatlah Class dengan nama katakana,


Lalu di dalam kalian tinggal memanggil class katakana seperti di bawah ini,


Lalu Hasilnya akan seperti ini,


Klik disini untuk mendownload scrip diatas
Hiragana
Katakana

Sekian informasi dari saya, Semoga berguna bagi ada terimakasi telah berkunjung dan salam ngaeweb :D.
Ngaeweb - Hari ini saya akan memberi tahu kalian mengenai cara membuat Bingkai menggunakan CSS.
Untuk membuat bingkai, kita bisa memakai properti seperti di bawah ini.
  • border, digunakan untuk membuat keseluruhan dari bingkai.
  • border-left, digunakan untuk membuat bingkai bagian kiri.
  • border-right, digunakan untuk membuat bingkai bagian kanan.
  • border-top, digunakan untuk membuat bingkai bagian atas.
  • border-bottom, digunakan untuk membuat bingkai bagian bawah.
ngaeweb
Gambar 1.1 Ilustrasi Properti Bingkai Suatu Elemen

Properti tersebut bisa di isi dengan beberapa nilai.
Contoh
                border: 4px solid #000;

Pada contoh tersebut,
  • 4px menyatakan ukuran ketebalan bingkai.
  • solid menyatakan bentuk bingkai.
  • #000 menyatakan warna bingkai.
ngaeweb
Gambar 1.2 contoh membuat bingkai

Menentukan Bentuk Bingkai
                Ada beberapa jenis yang konstanta yang di pakai untuk menentukan bentuk bingkai seperti,

ngaeweb
Gambar 1.3 Konstanta Penentu Bentuk Binkai 
Mengatur Ketebalan Bingkai
Ketebalan bingkai juga bisa diatur melalui width entah itu border-width,  border-left-width ataupun border-right-width. Nilai top, bottom, left ,dan right berfungsi untuk mengatur bagian bingkai sesuai dengan gambar “Ilustrasi Properti Binkai Suatu Element”  nilai yang bisa di berikan berupa nilai: 2px atau menggunakam konstanta,
  • thin berarti tipis
  • medium berarti sedang
  • thick berarti tebal 
ngaeweb
Gambar 1.4 Mengatur Ketebalan Menggunakan Konstanta

Mengatur Warna Bingkai
selain menggunakan “color” kalian juga bisa mengubah warna bingkai melalui: border-color, border-right-color, border-left-color, border-top-color, dan  border-bottom-color seperti ini,
ngeweb
Gambar 1.5 hasil koding pengaturan warna
klik disini untuk melihat atau mendownload Scrip  membuat bingkai menggunakan css.

Sekian informasi dari saya, Semoga berguna untuk anda. Terimakasi telah berkunjung dan salam NgaeWeb :D.






Diberdayakan oleh Blogger.

Facebook Page

Ngae Web

Translate

Pengikut

Popular Posts