artikel css 3

7
Pengertian 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 (teknologi gaya tampilan web) pada mulanya dipelopori dan dikembangkan serta distandarisasi oleh World Wide Web Consortium atau W3C pada tahun 1996. CSS3 tidak sama dengan CS(S-nya 3 kali) atau CSSSS (Cascading Style Sheets Sheets Sheets). CSS3 merpukan generasi ke-3 dari perkembangan CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi paling awal. Hanya saja, beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan membuat kiat dapat bereksplorasi lebih dalam lagi untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat menunggu dengan loading yang lama. 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. Walaupun CSS 3 adalah sebuah standard CSS baru yang membantu kita dalam memudahkan desain web, tidak semua browser ternyata mensupport CSS 3, misalnya MS Internet Explorer yang sampai artikel ini saya tulis

Upload: angela-bishop

Post on 02-Mar-2016

59 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Artikel Css 3

7/18/2019 Artikel Css 3

http://slidepdf.com/reader/full/artikel-css-3 1/7

Pengertian

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 (teknologi gaya tampilan web) pada mulanya dipelopori dan dikembangkan serta

distandarisasi oleh World Wide Web Consortium atau W3C pada tahun 1996.

CSS3 tidak sama dengan CS(S-nya 3 kali) atau CSSSS (Cascading Style Sheets Sheets Sheets). CSS3

merpukan generasi ke-3 dari perkembangan CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3

sama saja dengan pengertian CSS generasi paling awal. Hanya saja, beberapa standar baru untuk

CSS3 menggantikan CSS2 dan mungkin akan membuat kiat dapat bereksplorasi lebih dalam lagi

untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat

menunggu dengan loading yang lama.

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. Walaupun CSS 3 adalah sebuah

standard CSS baru yang membantu kita dalam memudahkan desain web, tidak semua browser

ternyata mensupport CSS 3, misalnya MS Internet Explorer yang sampai artikel ini saya tulis

Page 2: Artikel Css 3

7/18/2019 Artikel Css 3

http://slidepdf.com/reader/full/artikel-css-3 2/7

masih belum mendukung CSS 3. Dibawah saya coba terangkan beberapa Modul CSS 3 yang

sudah umum dipakai banyak designer yaitu CSS 3 untuk border dan background,

Sejarah CSS 3

Sejarah CSS3 

Menurut WikiPedia: Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan

 beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS

 bukan merupakan bahasa pemograman melainkan penggaya sebuah halaman web. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat

mengatur beberapa style, misalnya heading , subbab,bodytext , footer , images, dan style 

lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas file. Pada umumnya

CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML

dan XHTML

 Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan

secara berurutan, yang kemudian membentuk hubungan ayah-anak ( parent-child ) pada

setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh  

World Wide Web atau WEC pada tahun 1996. Setelah CSS distandarisasikan, Internet

Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak

hampir mendekati dengan standar CSS.

Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan

berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi

kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3

adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website.

CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel

Page 3: Artikel Css 3

7/18/2019 Artikel Css 3

http://slidepdf.com/reader/full/artikel-css-3 3/7

/table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih

baik dari versi pertama.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna

hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas

websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu,

banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow,

border-image, CSS Math, dan CSS Object Model.

Fitur Terbaru CSS 3 

CSS 3 memiliki beberapa fitur baru, seperti: 

<!--[if !supportLists]--> <!--[endif]-->Animasi, sehingga pembuatan animasi tidak memerlukan

 program sejenis Adobe Flash dan Microsoft Silverlight. 

<!--[if !supportLists]--> <!--[endif]-->Beberapa efek teks, seperti teks berbayang, kolom koran,

dan "word-wrap". 

<!--[if !supportLists]--> <!--[endif]-->Jenis huruf eksternal, sehingga dapat menggunakan huruf

yang tidak termasuk "web-safe fonts". 

<!--[if !supportLists]--> <!--[endif]-->Beberapa efek pada kotak, seperti kotak yang ukurannya

dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan

 bayangan. 

CSS versi ketiga melakukan berbagai pemutakhiran terhadap kemampuannya beradaptasi

dengan teknologi multimedia yang semakin modern, diantara pemutkhiran tersebut adalah:

  CSS3 mampu membuat efek animasi secara independent tanpa membutuhkan

software tambahan seperti Adobe Flash dan Microsoft Silverlight.

  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 dan bayangan.

  CSS3 mampu memanipulasi secara visual warna, desain maupun tekstur.

Page 4: Artikel Css 3

7/18/2019 Artikel Css 3

http://slidepdf.com/reader/full/artikel-css-3 4/7

 

Pekembangan CSS3 Seperti Apa?

Dari hasil pengamatan saya pada beberapa situs yang sudah menerapkan CSS3 + HTML5,

saya beranggapan bahwa fungsi jQuery sepenuhnya akan tergantikan oleh CSS3. Perkiraan

ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya lebih besar dibanding

CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan semakin

 berkembangnya CSS3. Menurut saya, CSS3 merupakan bahasa pemrograman olah digital

gambar/citra tingkat tinggi karena dengan CSS3, anda bisa menggambar Tokoh Kartun

Doraemon seperti contoh berikut :

Dari contoh di atas, memang terlihat belum semua browser sudah mendukung secara

keseluruhan penggunaan CSS3, namun, masing-masing browser sudah melakukan proses

 perkembangan produk agar bisa mendukung penggunaan CSS3.

Keuntungan dan kerugian menggunakan CSS

Dalam budaya web desain  modern, penggunaan bahasa style sheet seperti CSS telah

menjadi alat populer dan tren untuk desainer web. Penggunaan CSS dimulai ketika

kebutuhan fungsional "web desain", efektif dan efisien, berada dalam permintaan besar dan

penggunaan tabel tidak efektif dan seefisien orang berpikir. Beberapa keuntungan telah

Page 5: Artikel Css 3

7/18/2019 Artikel Css 3

http://slidepdf.com/reader/full/artikel-css-3 5/7

dikutip sebagai CSS mengapa menjadi diterima di industri tumbuh dari web desain.

Keuntungan tersebut adalah sebagai berikut:

* Bandwidth - stylesheet biasanya akan disimpan dalam cache browser, dan karena itu

dapat digunakan pada beberapa halaman tanpa reloaded, meningkatkan kecepatan

download dan mengurangi transfer data melalui jaringan.

* Reformatting atau Progressive Enhancement - Dengan perubahan sederhana dari satubaris, sebuah stylesheet yang berbeda dapat digunakan untuk halaman yang sama. Ini

memiliki keunggulan untuk aksesibilitas, serta memberikan kemampuan untuk

menyesuaikan halaman atau situs ke perangkat target yang berbeda. Selain itu, perangkat

tidak dapat memahami styling masih akan menampilkan konten.

* Fleksibilitas - Dengan menggabungkan CSS dengan fungsionalitas sebuah Content

Management System, cukup banyak fleksibilitas dapat diprogram ke dalam bentuk

pengiriman konten. Hal ini memungkinkan kontributor, yang mungkin tidak akrab atau

mampu memahami atau mengedit CSS atau kode HTML untuk memilih layout artikel atau

halaman lain mereka mengirimkan on-the-fly, dalam bentuk yang sama.

* Konsistensi - Bila CSS digunakan secara efektif, dalam hal warisan dan "Cascading,"

sebuah stylesheet global dapat digunakan untuk mempengaruhi dan gaya elemen situs-

lebar. Jika situasi muncul bahwa gaya dari elemen harus perlu diubah atau disesuaikan,

perubahan ini dapat dibuat dengan mudah, hanya dengan mengedit beberapa aturan dalam

stylesheet global.

Untuk solusi web desain dan pengembangan, kemudian mengunjungi sebuah desain situsWeb Filipina online untuk mempelajari lebih lanjut tentang hal itu.

Page 6: Artikel Css 3

7/18/2019 Artikel Css 3

http://slidepdf.com/reader/full/artikel-css-3 6/7

 

Meskipun CSS memiliki kekuatan, ia juga memiliki kelemahan. Web desain profesional yang

digunakan CSS sebagai dasar mereka untuk merancang tata letak dan mengedit juga

menyebutkan beberapa kelemahan pada bergantung pada bahasa style sheet. Berikut

adalah daftar singkat dari beberapa kelemahan menggunakan CSS murni pada web layoutdan web desain.

* Ambruk Margin - Margin runtuh adalah, sementara terdokumentasi dengan baik dan

berguna, juga rumit dan sering tidak diharapkan oleh penulis, dan tidak ada cara efek

samping-bebas sederhana tersedia untuk mengontrolnya.

* Tidak Ekspresi - Saat ini tidak ada kemampuan untuk menentukan nilai properti sebagai

ekspresi sederhana (seperti margin-left: 10% - 3em + 4px ;). Hal ini berguna dalam berbagai

kasus, seperti menghitung ukuran kolom dikenakan kendala pada jumlah semua kolom.

* Kurangnya Variabel - CSS tidak berisi variabel. Hal ini membuat perlu untuk melakukan

"mengganti semua" ketika salah satu keinginan untuk mengubah fundamental konstan,

seperti skema warna atau berbagai ketinggian dan lebar.

Browser Dukungan konsisten - browser yang berbeda akan membuat layout CSS berbeda

sebagai akibat dari bug browser atau kurangnya dukungan untuk fitur CSS. Banyak yang

disebut CSS "hacks" harus diterapkan untuk mencapai tata letak yang konsisten antara

browser yang paling populer atau sering digunakan. Layout yang tepat Pixel kadang-kadang

bisa mungkin untuk mencapai seluruh browser.

* Batasan Kontrol Vertikal - Meskipun penempatan horisontal unsur-unsur umumnya mudah

untuk mengontrol, penempatan vertikal sering unintuitive, berbelit-belit, atau tidak mungkin.

Tugas-tugas sederhana, seperti berpusat elemen vertikal atau mendapatkan footer yang

akan ditempatkan tidak lebih tinggi dari bawah viewport, baik memerlukan aturan style rumit

dan unintuitive, atau aturan sederhana namun banyak yang tidak didukung.

* Pengendalian Bentuk Elemen - CSS saat ini hanya menawarkan bentuk persegi panjang.

Sudut bulat atau bentuk lainnya mungkin memerlukan non-semantik markup. Namun, hal ini

dibahas dalam draft kerja modul latar belakang CSS3.

* Tata Letak Buruk Controls for Layouts Fleksibel - Sementara tambahan baru untuk CSS3memberikan, kuat tata letak yang lebih kuat fitur-set, CSS masih sangat banyak berakar

sebagai bahasa styling, bukan bahasa tata letak.

* Kurangnya Kolom Deklarasi - Meskipun saat ini mungkin dalam CSS, layout dengan

beberapa kolom dapat kompleks untuk melaksanakan. Dengan CSS saat ini, proses ini

sering dilakukan dengan menggunakan unsur-unsur terapung yang sering diberikan

berbeda oleh browser yang berbeda, bentuk layar komputer yang berbeda, dan rasio layar

yang berbeda set pada monitor standar.

* Tidak ada dari Backgrounds Beberapa per Elemen - Sangat web desain grafis memerlukan

beberapa gambar latar belakang untuk setiap elemen, dan CSS dapat mendukung hanya

Page 7: Artikel Css 3

7/18/2019 Artikel Css 3

http://slidepdf.com/reader/full/artikel-css-3 7/7

satu. Oleh karena itu, pengembang harus memilih antara menambahkan pembungkus

berlebihan di sekitar elemen dokumen, atau menjatuhkan efek visual.

Untuk solusi web desain dan pengembangan, kemudian mengunjungi sebuah web desain

situs Web surabaya online untuk mempelajari lebih lanjut tentang hal itu.

Meskipun sejumlah kesulitan, kekurangan, dan kelemahan yang ditemukan melalui

penggunaan CSS "murni", kegunaannya dalam web desain masih terlihat dengan cara lain.

Karena aksesibilitas, konten web untuk ponsel ponsel dan PDA menjadi dapat diakses

karena CSS. CSS mengkonsumsi bandwidth lebih rendah. Dan dengan CSS, hampir semua

informasi tata letak tinggal di satu tempat: dokumen CSS. Karena informasi tata letak yang

terpusat, perubahan ini dapat dilakukan dengan cepat dan global secara default.

Sumber : http://id.wikipedia.org/wiki/Cascading_Style_Sheets 

http://www.jeanotnahasan.com/2012/02/mengenal-pengertian-dan-perkembangan.html 

http://webdesain432.blogspot.com/2012/12/keuntungan-dan-kerugian-menggunakan-css.html