CSS3 gradient and transparent

หากมีความจำเป็นต้องทำ gradient ด้วย CSS3 แล้วละก็ การทำให้มันโปร่งใสด้วย จะไม่สามารถทำได้ด้วย opacity เหมือนเดิม ทางออกของปัญหานี้ เราจะมาแก้ไขด้วยการกำหนดค่าสีที่จะใช้ด้วย rgba() กันครับ

เราจะคุ้นเคยกันกับค่าสีแบบ rgb กันอยู่แล้ว (สำหรับคนที่เคยใช้นะ...) ด้วยคำสั่ง rgb(red, green, blue) ส่วน rgba จะมีเพิ่มมาอีกอันคือ alpha ด้วยคำสั่ง rgba(red, green, blue, alpha)

จริงๆแล้ว alpha ก็คือตัวเดียวกันกับ opacity ที่เราคุ้นเคยกันแหละครับ มีค่าอยู่ระหว่าง 0-1 เช่น

background-color:rgb(255,0,0); // พื้นหลังสีแดง

opacity:0.5; // โปร่งใส

สามารถเขียนเป็น
background-color:rgba(255,0,0,0.6); // พื้นหลังสีแดง และ โปร่งใส (CSS3)
มาเข้าเรื่องของเรากันดีกว่า การทำ gradient พร้อมทั้งโปร่งใสด้วย

.gradient_transparent {

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#BFF4F4F4',endColorstr='#BFCCCCCC'); /* IE */

  -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#BFF4F4F4',endColorstr='#BFCCCCCC'); /* IE */

  background:-webkit-gradient(linear,left top,left bottom,from(rgba(244,244,244,.75)),to(rgba(204,204,204,.75))); /* Safari,Chrome */

  background:-moz-linear-gradient(top,rgba(244,244,244,.75),rgba(204,204,204,.75)); /* Firefox */

  background:-o-linear-gradient(top,rgba(244,244,244,.75),rgba(204,204,204,.75)); /* Opera */

}

ลองดูที่ IE กันก่อน ซึ่งมันจะแตกต่างจากคนอื่น ค่าสีของ IE จะมี 2 ตัวหน้าเพิ่มเข้ามา #BFCCCCCCซึ่ง BF จะเป็นค่าในเลขฐาน 16 อยู่ระหว่าง 00-FF ลองไปแปลงกันดูเอาละกัน ว่ามันจะมีค่าเท่าไร เมือเป็นเลขฐานสิบ และอยู่ระหว่าง 0-1

ส่วนบราวเซอร์อื่นๆ ก็ตามปกติละครับ rgba(204,204,204,.75) ซึ่งมีค่า alpha หรือ opacity เป็น 0.75 เหมือนๆกันทุกอัน