Professional Documents
Culture Documents
Oleh
Kelompok
Cascading Style Sheet merupakan salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur
dan seragam. Cascading Style Sheet merupakan sebuah bahasa yang dimanfaatkan untuk
mendefinisikan aspek antarmuka (rendering) dari suatu formatted document seperti
HTML dan dokumen XML.
Sebuah Dokumen CSS berisi selektor-selektor yang merepresentasikan pola-pola
yang bersesuaian dengan elemen-elemen yang ada pada suatu dokumen HTML serta
merupakan salah satu teknologi yang dapat dimanfaatkan untuk menyeleksi nodes pada
dokumen XML. CSS berkorelasi dengan formatted document melalui selektor-selektor.
Selektor-selektor pada CSS mampu mengendalikan berbagai aspek rendering dari setiap
elemen pada dokumen HTML. Salah satunya adalah warna elemen. Pada CSS versi
termutakhir ,CSS3, selain selector terdapat properti baru CSS yang disebut Pseudo-
element.
CSS3 tidak jauh berbeda, dalam hal sintaksis, namun kekuatan CSS3 jauh lebih
besar. Seperti yang akan Anda lihat dalam teknik berikut ini, dengan CSS3 anda dapat
membuat sudut membulat (rounded corners), bayangan pada tulisan (Text Shadow), latar
belakang bening (Transparency Background) dan masih banyak lagi.
Kata kunci : CSS3, pseudo-element, selector, rendering, text shadow, dan transparency
background.
ABSTRACT
Cascading Style Sheet is one of the web programming language to control several
components in a web that would be more structured and uniform. Cascading Style Sheets
is a language used to define aspects of the interface (rendering) of a formatted document
such as HTML and XML documents.
A CSS document contains a selector-selector that represents the patterns corresponding to
the elements that exist in an HTML document and is one technology that can be used to
select nodes in XML documents. CSS correlated with formatted document via selector-
selector. -Selector in the CSS selector able to control various aspects of the rendering of
each element in an HTML document. One of them is the color elements. In the latest
version of CSS, CSS3, in addition to CSS selectors there is a new property called Pseudo-
element.
CSS3 is not much different, in terms of syntax, but much greater strength CSS3. As you
will see in the following techniques, with CSS3 you can make rounded corners (rounded
Corners), the shadow on the text (Text Shadow), the background transparent
(Transparency Background) and many more.
I.2 Tujuan
Adapun tujuan yang diharapkan oleh penulis adalah sebagai berikut :
1. Untuk mengetahui fitur-fitur yang dimiliki oleh CSS3
2. Untuk mengetahui cara-cara penerapan CSS3
I.3 Manfaat
Adapun manfaat yang diharapkan oleh penulis adalah sebagai berikut :
1. Agar mengetahui fitur-fitur yang dimiliki oleh CSS3
2. Agar mengetahui cara-cara penerapan CSS3
BAB II
KAJIAN PUSTAKA
Di atas telah jelas diterangkan cara penulisan CSS. Sekarang bagaimana jika satu
selector, memiliki banyak sifat. Jika menggunakan beberapa deklarasi, maka akhiri
deklarasi dengan titik koma (” : ”).
Satu sifat:
selector {property: value;}
Banyak sifat:
selector {property1: value; property2: value; property3: value;}
atau jika ingin lebih mudah dibaca, ditulis:
selector {
property1: value;
property2: value;
property3: value;
}
Contoh:
body {
background: #000000;
font-family: “Trebuchet MS”, Georgia, Arial, serif;
}
Adakalanya beberapa selector ternyata memiliki property dan value yang sama
persis. Misalkan sebagai berikut:
h1 {font-size: 8px; color:#cccccc;}
dan
h2 {font-size: 8px; color:#cccccc;}
dan
h3 {font-size: 8px; color:#cccccc;}
dan
h4 {font-size: 8px; color:#cccccc;}
dan
h5 {font-size: 8px; color:#cccccc;}
Karena kode tersebut terlalu panjang, kita bisa menyingkatnya. Pisahkan antara selector
dengan koma.
h1, h2, h3, h4, h5 {font-size: 8px; color:#cccccc;}
Comments tag diberikan sebagai informasi untuk CSS tertentu. Ketika CSS sudah
sangat panjang, maka informasi ini dibutuhkan agar css tertentu lebih mudah ditemukan.
Cara penulisannya adalah dibuka dengan /* dan ditutup dengan */
Contoh:
/* Ini adalah pengaturan header*/
#header-wrapper {
width: 120px;
height: 90px;
}
CSS3 memiliki banyak sekali fitur-fitur baru di dalamnya yang membuat tampilan
web akan semakin cantik namun dapat mengurangi kecepatan load web. CSS digunakan
dalam pembuatan layout yang tableless, artinya pembuatan layout tidak lagi
menggunakan metode table, karena dampak dari penggunaan table yang paling terasa
adalah beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil
penggunaan table. Tableless pun menjadi standarisasi bagi seorang SEO-er, karena
sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout, CSS3 pun
efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.
Fitur-fitur baru yang dimiliki oleh CSS3 yaitu fasilitas untuk shadow dari suatu
div layout, fitur transparansi, gradien warna pada border, warna pada text yang diseleksi,
fitur skala memperkecil atau memperbesar layout, kolom pada text, dan fitur gradien
pada background.
Drop Shadow merupakan fitur yang dapat membuat bayangan pada suatu objek.
Objek dapat berupa teks maupun bangun dua dimensi. Dengan Frop Shadow maka objek
tersebut akan tampak lebih menonjol dari objek sekitarnya.Transparency membuat suatu
objek menjadi transparan. Multiple Border Color merupakan fitur yang dapat membuat
border memiliki warna yang lebih dari satu. Select Text Color merupakan fitur yang
membuat warna teks yang diseleksi (blok) akan memiliki warna sesuai keinginan kita,
default dari warna teks yang diseleksi adalah biru tua. Scale merupakan fitur yang dapat
membuat objek menjadi lebih besar atau lebih kecil dengan merubah skala objek. Text
Column merupakan fitur untuk membuat teks berbentuk teks kolom seperti kolom berita
pada surat kabar. Gradient merupakan fitur yang dapat membuat objek memilki warna
yang digradiasi.
Sintak untuk pembuatan CSS3 sama seperti versi yang sebelumnya, yaitu
menggunakan Selector dan Declaration. Selector adalah elemen HTML yang ingin Anda
atur style nya. Sedangkan Declaration terdiri dari dua bagian yakni property dan value.
Properti adalah attribut gaya dan value adalah nilai pengaturnya.
Terdapat perbedaan penamaan style antara safari dan chrome dengan firefox
1. Drop Shadow
Menggunakan drop shadow pada css 3, cukup tambahkan baris
-moz-box-shadow: #585858 3px 3px 4px;
-webkit-box-shadow: #585858 3px 3px 4px;
Perintah -moz digunakan untuk browser firefox dan -webkit digunakan untuk browser
chrome serta safari. Contoh penggunaan drop shadow adalah seperti di bawah ini
2. RGBA (Transparency)
Contoh penggunaannya adalah background-color: rgba(218, 227, 240, .3);
rgb 218,227,240 menghasilkan warna abu-abu namun lebih keputih, dan .3 ini
menjelaskan penggunaan transparansi 30%.
contohnya adalah seperti ini
5. Scale
Contoh dari penggunaannya adalah
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
moz-transform digunakan untuk firefox, dan scale(1.05) menghasilkan perbesaran 1,05
dari ukuran aslinya dan begitu juga dengan webkit-transform yang digunakan untuk
browser safari dan chrome.
6. Text Column
Contoh penggunaahnya adalah
-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 30px;
Sintak di atas menjadikan text memiliki 3 kolom. dan memiliki garis tengah sedangkan
gap disini sama seperti padding, atau jarak antar text.
7. Gradient
Contoh penggunaannya adalah
background: -moz-linear-gradient(-45deg, #2E9AFE,#0404B4 );
Penggunaan sintak -moz-linear-gradien dengan 45 derajat mulai dari biru tua sampai biru
muda, hasilnya adalah seperti ini :
BAB IV
KESIMPULAN DAN SARAN
IV.1 Kesimpulan
IV.2 Saran
Menggunakan CSS3 akan mempermudah dalam mendesain suatu web dan
mempercantik halaman web tersebut
DAFTAR PUSTAKA