- Beranda
- Website, Webmaster, Webdeveloper
Bermain dengan teknologi HTML5: Part 3 (CSS3)
...
![gigcarnation](https://s.kaskus.id/user/avatar/2011/11/28/avatar3712499_4.gif)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
TS
gigcarnation
Bermain dengan teknologi HTML5: Part 3 (CSS3)
WELCOME TO MY THREAD
Index:
- Part 1 (Introduction) http://kask.us/15746388
- Part 2 (Semantic) http://kask.us/15765460
CSS3 ![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
![Bermain dengan teknologi HTML5: Part 3 (CSS3)](https://dl.kaskus.id/www.w3.org/html/logo/badge/html5-badge-h-css3.png)
![Bermain dengan teknologi HTML5: Part 3 (CSS3)](https://dl.kaskus.id/www.w3.org/html/logo/img/class-header-css3.jpg)
Ehemmm...
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
CSS3 adalah peningkatan dari CSS2 yang menhadirkan banyak efek yang memukau
![Belo emoticon-Belo](https://s.kaskus.id/images/smilies/sumbangan/004.gif)
karena sintaks CSS3 tuh banyak, jadi ane akan bahas yang penting aja:
PREFIKS
Prefiks adalah hal yang penting di css3, soalnya setiap browser mempunyai prefiks yang berbeda-beda
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
ini dia, contohnya, properti border-radius:
HTML Code:
-webkit-border-radius:10px; /*browser berbasis webkit (safari, chrome,dll.) */
-moz-border-radius:10px; /* mozilla firefox */
-o-border-radius:10px; /* opera */
-ms-border-radius:10px; /* internet explorer */
border-radius:10px; /* fallback sekaligus standar w3 */
-moz-border-radius:10px; /* mozilla firefox */
-o-border-radius:10px; /* opera */
-ms-border-radius:10px; /* internet explorer */
border-radius:10px; /* fallback sekaligus standar w3 */
nah, kalo diliat sih prefiks gak membingungkan, tapi apa maksudnya fallback dan standar w3?
![Bingung (S) emoticon-Bingung (S)](https://s.kaskus.id/images/smilies/bingungs.gif)
jadi, fallback adalah semacam kode "cadangan", yaitu kalo kode-kode sebelumnya gak tereksekusi ya, ngarep aja yang ini tereksekusi
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
kalo standar w3, ya maksudnya gitu gan
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
tanpa prefiks adalah standar w3
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
tapi jangan terlalu mau ngikut standar w3 juga
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
pake prefiks gak apa-apa kok
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
DIKARENAKAN ADA BANYAK SEKALI PROPERTI CSS3 MAKA ENTE BISA LIAT SYNTAX-SYNTAXNYA MELALU GOOGLING
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
CSS TIPS & TRICKS
Ane gak berani sebut 'CSS3' soalnya ane gak tau semuanya emang
css3 atau bukan![Malu emoticon-Malu](https://s.kaskus.id/images/smilies/sumbangan/1.gif)
css3 atau bukan
![Malu emoticon-Malu](https://s.kaskus.id/images/smilies/sumbangan/1.gif)
1. Merubah warna dari seleksi teks
Sekarang ente coba buka kaskus beta, lalu select tulisan (terserah tulisan apapun)
nah, sekarang ente liat, kok bisa gitu ya seleksi teksnya
![Bingung (S) emoticon-Bingung (S)](https://s.kaskus.id/images/smilies/bingungs.gif)
maksudnya warnanya bukan kayak biasa
![Bingung (S) emoticon-Bingung (S)](https://s.kaskus.id/images/smilies/bingungs.gif)
nah, inilah the power of CSS
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
syntaxnya sangat mudah
cekidot:
HTML Code:
::selection { /* ::selection untuk google chrome (CMIIW) */
color/:p/urple;
}
::-moz-selection { /* Sedangkan ::-moz-selection untuk firefox */
color/:p/urple;
}
color/:p/urple;
}
::-moz-selection { /* Sedangkan ::-moz-selection untuk firefox */
color/:p/urple;
}
dalam contoh diatas maka setiap teks yang terseleksi akan berubah warna menjadi ungu
ente juga bisa menggunakan properti background, dll.
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
2. Merubah style pada placeholder
Sebelumnya udah tau kan apa itu atribut placeholder???
kalo belum baca dulu part 2
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
nah, kalo ente bosan dengan model placeholder yang gitu0gitu aja, maka ente bisa rubah stylenya
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
sekaligus ente juga bisa buat gambar sebagai placeholdernya
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
gimana caranya???
cekidot:
HTML Code:
::-webkit-input-placeholder { /* untuk webkit */
color: red;
}
:-moz-placeholder { /* untuk ff */
color: red;
}
color: red;
}
:-moz-placeholder { /* untuk ff */
color: red;
}
jadi, kode diatas akan memberikan warna merah pada palceholder yang ada
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
3. Merubah style scrollbar (webkit only)
Bisa cekidot gan: http://css-tricks.com/custom-scrollbars-in-webkit/
ane malas nampilin disini, soalnya panjang sih
![Peace emoticon-Peace](https://s.kaskus.id/images/smilies/sumbangan/005.gif)
Ada juga sih tips & tricks yang lain, cuman berhubung ane udah malas jadi nulis langsung aja ya
![Peace emoticon-Peace](https://s.kaskus.id/images/smilies/sumbangan/005.gif)
- CSS Font Face
- CSS3d transforms
Sekian dari ane
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
Semoga bermanfaat
![Blue Guy Cendol (L) emoticon-Blue Guy Cendol (L)](https://s.kaskus.id/images/smilies/smilies_fb5ox6pblpkt.gif)
0
7.8K
113
![Guest](https://s.kaskus.id/user/avatar/default.png)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
Komentar yang asik ya
Mari bergabung, dapatkan informasi dan teman baru!
![Website, Webmaster, Webdeveloper](https://s.kaskus.id/r200x200/ficon/image-13.png)
Website, Webmaster, Webdeveloper![KASKUS Official KASKUS Official](https://s.kaskus.id/kaskus-next/next-assets/images/icon-official-badge.svg)
23.3KThread•4.4KAnggota
Urutkan
Terlama
![Guest](https://s.kaskus.id/user/avatar/default.png)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
Komentar yang asik ya