Tuesday 17 July 2012

Desain Visual dan Tata Letak dengan CSS 3

No comments


Tujuan :
  • Memahami dan dapat menggunakan konsep CSS3
  • Memahami dan dapat mengetahui kelebihan maupun kekurangan CSS 3
  • Menerapkan CSS 3 dengan fitur lainnya
  1.  CSS 3
CSS3 adalah standar  untuk CSS yang paling baru, banyak batasan website design yang dahulu tidak bisa ditangani oleh CSS sekarang bisa dilakukan dengan CSS3. CSS3 sepenuhnya kompatibel dan pelengkap dari CSS lama, sehingga browser akan selalu mendukung CSS lama dan Anda tidak harus mengubah desain yang sudah ada.
CSS3 dibagi kedalam beberapa modul, beberapa modul CSS3 yang sangat penting untuk menghilangkan batasan desain diantaranya:
  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface
  1.  CSS3 Borders
Dengan menggunakan CSS3, kita dapat membuat garis tepi dengan ujung yang bulat, menambahkan bayangan pada kotak dan menggunakan gambar sebagai garis tepi tanpa menggunakan program desain seperti Photoshop.  Dalam bab ini kita akan belajar tentang properti dari garis tepi :
  •   Border-radius
  •   Box-shadow
  •   Border-image
Internet Explorer: tidak ada tambahan
Mozilla Firefox : -moz-
Google Chrome: -webkit-
Safari: -webkit-
Opera: -o-
  1.  CSS3 Rounded Corners
untuk membuat  garis tepi yang melengkung, dibutuhkan tools grafis tambahan untuk membuatnya. Namun dalam CSS 3, hal tersebut tidak diperlukan.
  1. CSS3 Box Shadow
Box Shadow digunakan untuk memunculkan efek bayangan pada kotak div yang dibuat.
IF LAB 2011

  1. CSS3 Border Image

Untuk membuat garis tepi dengan image, tanpa CSS 3 membutuhkan beberapa image untuk menampilkannya, sedangkan dengan adanya CSS 3, akan lebih dimudahkan karena detail border hanya perlu di definisikan apa adanya dan dapat  diedit sesuai selera.
  1. CSS3 Backgrounds
Penerapan CSS 3  pada background memudahkan kita untuk melakukan pengeditan terhadap background untuk suatu tampilan. Konfigurasi background dalam  CSS 3  antara lain:
  • background-size
  • background-origin
  1. CSS3 The background-size
Untuk menentukan ukuran yang pas dari  suatu gambar untuk dijadikan sebagai background, tidak selalu membutuhkan gambar sesuai ukuran aslinya, namun dapat sesuaikan ukuran gambar tersebut.
  1.   CSS3 The background-origin
Background origin merupakan layanan dalam CSS 3 dalam memberikan background sesuai dengan penempatannya. Dapat dilihat pada modul sebelumnya, pada bagian CSS untuk margin dan padding, terdapat keterangan mengenai box model, digambarkan suatu kotak memiliki atribut tersendiri. Background origin menyesuaikan dengan bentuk tersebut.
CSS3 dapat menggunakan beberapa background untuk satu elemen.
  1. CSS3 Text Effects
Dalam membuat efek terhadap suatu teks, tanpa CSS 3, hal itu tidak mungkin terjadi tanpa bantuan image. Namun CSS 3 bisa melakukan hal tersebut, cukup dengan sintaks yang singkat, tulisan akan berubah semuai kemauan kita.  Dalam text effect, terdapat dua konfigurasi, yaitu :
  • text-shadow
  • word-wrap
  1. CSS3 Text Shadow
Text shadow digunakan  untuk memberikan efek bayangan terhadap teks yang ingin dibuat.
  1.   CSS3 Word Wrapping
Word Wrap merupakan fitur dalam CSS 3  untuk  melakukan penyesuaian terhadap lebar yang ditentukan.

No comments :

Post a Comment