Modul 7 CSS3

Modul 7 CSS3
CSS3 adalah teknologi terbaru dari CSS yang memungkinkan kita melakukan banyak hal untuk menghias halaman web.
Apa yang baru?

Berikut ini adalah beberapa hal baru yang akan kita pelajari pada CSS3:

  • opacity
  • pemberian warna menggunakan RGBa
  • border radius
  • box shadow
  • text shadow
  • font-face
  • Filter

CSS3 Cheat Sheet

Selain hal diatas, sebetulnya masih banyak lagi hal baru yang terdapat pada css, selengkapnya kalian bisa liat disini.

CSS3 Prefix

Karena merupakan teknologi baru dan sebagian teknologi di dalamnya masih eksperimental, belum semua hal baru dalam CSS3 ini dapat begitu saja kita gunakan. Untuk beberapa kasus, kita harus menambahkan dulu sintaks prefix agar CSS3 dapat berfungsi dengan baik pada semua browser.

Berikut ini adalah prefix yang harus ditambahkan:

  • Firefox : -moz-<properti-css3>
  • Chrome & Safari : -webkit-<properti-css3>
  • Opera : -o-<properti-css3>
  • IE : -ms-<properti-css3>
Opacity

Digunakan untuk mengatur transparansi dari sebuah elemen.

sintaks:

opacity: <value>

semakin kecil valuenya maka akan semakin transparan elemennya, jika valuenya 0 maka elemennya tidak terlihat.

contoh:

E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\11.png

RGBa

Properti / Atribut untuk memberikan warna pada sebuah elemen dengan menambahkan parameter alpha sebagai transparansi-nya.

sintaks:

background-color: rgba(0,0,0,.5);

color: rgba(255,255,255,.7);

semakin kecil valuenya pada parameter alpha-nya maka akan semakin transparan.

Border Radius

Border radius digunakan untuk memberikan sudut-sudut kotak menjadi tumpul.

sintaks:

border-radius: <value>

semakin besar value yang diberikan, semakin tumpul sudutnya.

contoh:

E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\1.png

Box Shadow

Digunakan untuk memberikan drop shadow / bayangan pada sebuah elemen.

sintaks:

box-shadow: <x-offset> <y-offset> <blur> <warna>

contoh:

E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\2.png

Text Shadow

Digunakan untuk memberikan drop shadow / bayangan pada sebuah text.

sintaks:

text-shadow: <x-offset> <y-offset> <blur> <warna>

contoh:

E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\3.png

font-face

Digunakan agar kita dapat mengganti font sesuai dengan keinginan kita tanpa memperdulikan apakah font tersebut ada di sistem operasi user atau tidak.

syaratnya kita harus punya dulu file-file font yang dibutuhkan yaitu: .eot, .woff, .ttf dan .svg

gunakan website fontsquirrel.com untuk mendownload font-font secara gratis.

contoh:

html

E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\5.png

css

E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\6.png

hasil

E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\7.png

Filter

Properti CSS3 yang digunakan untuk memberikan efek visual pada gambar, background atau border

Filter memiliki tipe-tipe yang dapat di atur antara lain :

 Blur

 Grayscale

 Brightness

 Sepia

 Invert

 Contrast

 Hue-Rotate

 Drop-Shadow

 Saturate E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\filter.png

E:\Semester 2\Pmrograman Web\modul-8-css3\modul-8-css3\images\blur.png

Leave a Reply

Your email address will not be published. Required fields are marked *