Website, Webmaster, Webdeveloper
Home > LOEKELOE > COMPUTER STUFF > Website, Webmaster, Webdeveloper > Bermain dengan teknologi HTML5: Part 3 (CSS3)
Total Views: 1779 Share : Facebook ShareFacebook Twitter ShareTwitter Google+ ShareGoogle+
Page 1 of 4 |  1 2 3 4 > 

gigcarnation - 24/08/2012 12:40 PM
#1
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 D

Bermain dengan teknologi HTML5: Part 3 (CSS3)

Bermain dengan teknologi HTML5: Part 3 (CSS3)

Ehemmm... D Kalo dibilang CSS3 pasti uda banyak web developer yang tau D
CSS3 adalah peningkatan dari CSS2 yang menhadirkan banyak efek yang memukau matabelo:

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 D

ini dia, contohnya, properti border-radius:
[HTML]
-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 */
[/HTML]

nah, kalo diliat sih prefiks gak membingungkan, tapi apa maksudnya fallback dan standar w3? bingungs

jadi, fallback adalah semacam kode "cadangan", yaitu kalo kode-kode sebelumnya gak tereksekusi ya, ngarep aja yang ini tereksekusi D
kalo standar w3, ya maksudnya gitu gan D
tanpa prefiks adalah standar w3 D
tapi jangan terlalu mau ngikut standar w3 juga D
pake prefiks gak apa-apa kok D

DIKARENAKAN ADA BANYAK SEKALI PROPERTI CSS3 MAKA ENTE BISA LIAT SYNTAX-SYNTAXNYA MELALU GOOGLING D

CSS TIPS & TRICKS
Ane gak berani sebut 'CSS3' soalnya ane gak tau semuanya emang
css3 atau bukan malu:

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 bingungs
maksudnya warnanya bukan kayak biasa bingungs

nah, inilah the power of CSS D
syntaxnya sangat mudah

cekidot:
[HTML]
::selection { /* ::selection untuk google chrome (CMIIW) */
colorpurple;
}
::-moz-selection { /* Sedangkan ::-moz-selection untuk firefox */
colorpurple;
}
[/HTML]

dalam contoh diatas maka setiap teks yang terseleksi akan berubah warna menjadi ungu
ente juga bisa menggunakan properti background, dll. D

2. Merubah style pada placeholder
Sebelumnya udah tau kan apa itu atribut placeholder???
kalo belum baca dulu part 2 D

nah, kalo ente bosan dengan model placeholder yang gitu0gitu aja, maka ente bisa rubah stylenya D
sekaligus ente juga bisa buat gambar sebagai placeholdernya D (pake background-image D)

gimana caranya???
cekidot:

[HTML]
::-webkit-input-placeholder { /* untuk webkit */
color: red;
}

:-moz-placeholder { /* untuk ff */
color: red;
}
[/HTML]

jadi, kode diatas akan memberikan warna merah pada palceholder yang ada D

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:

Ada juga sih tips & tricks yang lain, cuman berhubung ane udah malas jadi nulis langsung aja ya Peace:
- CSS Font Face
- CSS3d transforms

Sekian dari ane D
Semoga bermanfaat cendolbig
gigcarnation - 24/08/2012 06:57 PM
#2

wah kok sepi sih \(
gak ada yang komen \(
Cut.Meyriska - 24/08/2012 07:03 PM
#3

      wah gw tertarik nih dengan CSS 3 genit: mohon bimbingan nya ya malu:
mendoan.enak - 24/08/2012 07:10 PM
#4

mohon bimbingan gann...
newbi....
angel182 - 24/08/2012 07:07 PM
#5

      numpang pekiwan eheheh D
soal nya ane di ajarin dikit2 juga ma guru ane tentang css3 D
atas ane yang cut meyriska itu klon ane hammer:
S4nJi - 24/08/2012 07:46 PM
#6

Pejwan D
Anyways CSS3 masih banyak deh fitur barunya D
Check Article Recommendation W3C D
gigcarnation - 24/08/2012 08:11 PM
#7

Quote:
Original Posted By Cut.Meyriska
      wah gw tertarik nih dengan CSS 3 genit: mohon bimbingan nya ya malu:


Quote:
Original Posted By angel182
      numpang pekiwan eheheh D
soal nya ane di ajarin dikit2 juga ma guru ane tentang css3 D
atas ane yang cut meyriska itu klon ane hammer:


Quote:
Original Posted By mendoan.enak
mohon bimbingan gann...
newbi....


Quote:
Original Posted By S4nJi
Pejwan D
Anyways CSS3 masih banyak deh fitur barunya D
Check Article Recommendation W3C D


terimakasih atas kunjungan dan komentarnya gan \)
gest - 24/08/2012 08:35 PM
#8

jangan lupa media queries yah D
isForest - 25/08/2012 03:17 PM
#9

TS bahas css untuk mobile website donk. Peace:
cs.wha - 25/08/2012 03:54 PM
#10

Paling parah kalo css di IE, walaupun udah IE 9 masih perlu effort buat nyesuaiin lagi. Kalo ada cheatsheet untuk tiap browser bagi2 donk gan. D
padhil.nasution - 25/08/2012 04:20 PM
#11

ada yg punya e-book ya g ?
fachrils - 25/08/2012 11:12 PM
#12

nice trit
baru gue pgn buat trit css 3
udeh ada ini trit D

entar kalol aptop gue udah bener gue ser sama ebook refrensi nya D
mudah mudahan aja data yg dipartisi kaga ilang D
gigcarnation - 26/08/2012 04:09 PM
#13

Quote:
Original Posted By gest
jangan lupa media queries yah D


o, iya, ya kok kelupaan D
tapi ane nampaknya gak edit ah...
karena 2 alasan:

[*]Karena ane malas p
[*]Takut nanti kasusnya sama dengan yang part 2 takuts



Quote:
Original Posted By isForest
TS bahas css untuk mobile website donk. Peace:


maksudnya media queries gitu??

Quote:
Original Posted By cs.wha
Paling parah kalo css di IE, walaupun udah IE 9 masih perlu effort buat nyesuaiin lagi. Kalo ada cheatsheet untuk tiap browser bagi2 donk


That's IE D
makanya banyak web developer (apalagi web designer D) benci sama IE
tapi itu tuh microsoft lagi promosiin IE yang katanya lebih aman, de el el dari browser lain D --> http://www.beautyoftheweb.com

Ane gak punya cheatsheet untuk itu gan D
Yang ada cuman cheatsheet zen coding, mau?? hammer:
sealgreat - 26/08/2012 06:27 PM
#14

ane punya problem pake CSS3 di IE8 kebawah, terutama untuk border radius & shadow..... bingung
Apa ada yg punya solusinya.... :sorry
Musicrebirth - 26/08/2012 06:51 PM
#15

Sore suhu.. newbie numpang nyimak..

btw dah masuk css3 y.. ane rekap dlu dah dari part 1.. hehehe..

nampaknya prospek kedepannya cerah neh HTML5 ama css3.. apa bner bs jalan di IOS..?
arviza - 26/08/2012 08:35 PM
#16

ijin bookmark dulu ya
S4nJi - 26/08/2012 10:08 PM
#17

Quote:
Original Posted By gigcarnation
Ane gak punya cheatsheet untuk itu gan D
Yang ada cuman cheatsheet zen coding, mau?? hammer:

Cheatsheet CSS3 :
Either Artikel W3C ato MDN D
gest - 27/08/2012 11:37 AM
#18

Quote:
Original Posted By gigcarnation
o, iya, ya kok kelupaan D
tapi ane nampaknya gak edit ah...
karena 2 alasan:

[*]Karena ane malas p
[*]Takut nanti kasusnya sama dengan yang part 2 takuts


emang napa part 2 om? D
fachrils - 28/08/2012 10:46 PM
#19


1.Boder Radius
2.Box Shadow
3.Scroll bar

________________________________________

1.border radius

[HTML]

-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;

[/HTML]
2. Box shadow

[HTML]

-webkit-box-shadow: 0px 0px 0px 10px #ddd;
-moz-box-shadow: 0px 0px 0px 10px #ddd;
-o-box-shadow: 0px 0px 0px 10px #ddd;
-ms-box-shadow: 0px 0px 0px 10px #ddd;
box-shadow: 0px 0px 0px 10px #ddd;

#ddd bisa diganti kalo mau efek transparant pake rbg collor
rgba(111, 111, 111, 0.57) seterah sesuai selera D
di inspect elment google chrome versi 20 ada kok color picker nya
[/HTML]

3. Scrollbar ( Just for GoogleChrome )

[HTML]
/* scroller browser */
::-webkit-scrollbar {
width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
-webkit-border-radius: 10px;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #a6a5a5;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.4);
}

[/HTML]

maap kalo jelek karya nubi shakehand
blukeciprak - 04/09/2012 12:06 AM
#20

Gan nubi mo tanya niho, klo mo bikin background Footer/header full kekanan & kekiri kaya kaskus beta gimana ye gan? nih gan maksud ane percis kaya footer kaskus beta yg warna hitam sedangkan background body warnay biru???
minta tutor CSS yang mirip kayak gitu dong gan klo ada, ntar ane cendolin deh cendols
Spoiler for contoh

Bermain dengan teknologi HTML5: Part 3 (CSS3)
Page 1 of 4 |  1 2 3 4 > 
Home > LOEKELOE > COMPUTER STUFF > Website, Webmaster, Webdeveloper > Bermain dengan teknologi HTML5: Part 3 (CSS3)