- Beranda
- Website, Webmaster, Webdeveloper
Bermain dengan teknologi HTML5: Part 3 (CSS3)
...
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 
Ehemmm...
Kalo dibilang CSS3 pasti uda banyak web developer yang tau CSS3 adalah peningkatan dari CSS2 yang menhadirkan banyak efek yang memukau
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
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?
jadi, fallback adalah semacam kode "cadangan", yaitu kalo kode-kode sebelumnya gak tereksekusi ya, ngarep aja yang ini tereksekusi
kalo standar w3, ya maksudnya gitu gan
tanpa prefiks adalah standar w3
tapi jangan terlalu mau ngikut standar w3 juga
pake prefiks gak apa-apa kok
DIKARENAKAN ADA BANYAK SEKALI PROPERTI CSS3 MAKA ENTE BISA LIAT SYNTAX-SYNTAXNYA MELALU GOOGLING
CSS TIPS & TRICKS
Ane gak berani sebut 'CSS3' soalnya ane gak tau semuanya emang
css3 atau bukan
css3 atau bukan
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
maksudnya warnanya bukan kayak biasa
nah, inilah the power of CSS
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.
2. Merubah style pada placeholder
Sebelumnya udah tau kan apa itu atribut placeholder???
kalo belum baca dulu part 2
nah, kalo ente bosan dengan model placeholder yang gitu0gitu aja, maka ente bisa rubah stylenya
sekaligus ente juga bisa buat gambar sebagai placeholdernya
(pake background-image )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
3. Merubah style scrollbar (webkit only)
Bisa cekidot gan: http://css-tricks.com/custom-scrollbars-in-webkit/
ane malas nampilin disini, soalnya panjang sih
Ada juga sih tips & tricks yang lain, cuman berhubung ane udah malas jadi nulis langsung aja ya
- CSS Font Face
- CSS3d transforms
Sekian dari ane
Semoga bermanfaat
0
7.8K
113
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Mari bergabung, dapatkan informasi dan teman baru!
Website, Webmaster, Webdeveloper
23.3KThread•4.4KAnggota
Terlama
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru