概要
色指定時にアルファも同時指定する
内容
CSS3では色指定時にアルファも同時指定することが可能です。
background-color:hsla(h,s,l,alpha);
background-color:rgba(r,g,b,alpha);
サンプル
サンプル作成用のRubyスクリプト
# encoding: utf-8 require "erb" (3..4).each do |h_cnt| h = 90 * h_cnt (3..4).each do |s_cnt| s = 25 * s_cnt (0..2).each do |l_cnt| l = 25 * l_cnt (0..4).each do |a_cnt| a = 0.25 * a_cnt template = "<span style=\"background-color:hsla(<%= h%>,<%= s%>%,<%= l%>%,<%= a%>);\">hsla(<%= h%>,<%= s%>%,<%= l%>%,<%= a%>)</span>" erb = ERB.new(template) ret = erb.result(binding) puts ret end puts "<br />" end puts "<br />" end puts "<br />" end
サンプルhtml＋CSS3
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } </style> </head> <body> <div id="contents"> <span style="background-color:hsla(270,75%,0%,0.0);">hsla(270,75%,0%,0.0)</span> <span style="background-color:hsla(270,75%,0%,0.25);">hsla(270,75%,0%,0.25)</span> <span style="background-color:hsla(270,75%,0%,0.5);">hsla(270,75%,0%,0.5)</span> <span style="background-color:hsla(270,75%,0%,0.75);">hsla(270,75%,0%,0.75)</span> <span style="background-color:hsla(270,75%,0%,1.0);">hsla(270,75%,0%,1.0)</span> <br /> <span style="background-color:hsla(270,75%,25%,0.0);">hsla(270,75%,25%,0.0)</span> <span style="background-color:hsla(270,75%,25%,0.25);">hsla(270,75%,25%,0.25)</span> <span style="background-color:hsla(270,75%,25%,0.5);">hsla(270,75%,25%,0.5)</span> <span style="background-color:hsla(270,75%,25%,0.75);">hsla(270,75%,25%,0.75)</span> <span style="background-color:hsla(270,75%,25%,1.0);">hsla(270,75%,25%,1.0)</span> <br /> <span style="background-color:hsla(270,75%,50%,0.0);">hsla(270,75%,50%,0.0)</span> <span style="background-color:hsla(270,75%,50%,0.25);">hsla(270,75%,50%,0.25)</span> <span style="background-color:hsla(270,75%,50%,0.5);">hsla(270,75%,50%,0.5)</span> <span style="background-color:hsla(270,75%,50%,0.75);">hsla(270,75%,50%,0.75)</span> <span style="background-color:hsla(270,75%,50%,1.0);">hsla(270,75%,50%,1.0)</span> <br /> <br /> <span style="background-color:hsla(270,100%,0%,0.0);">hsla(270,100%,0%,0.0)</span> <span style="background-color:hsla(270,100%,0%,0.25);">hsla(270,100%,0%,0.25)</span> <span style="background-color:hsla(270,100%,0%,0.5);">hsla(270,100%,0%,0.5)</span> <span style="background-color:hsla(270,100%,0%,0.75);">hsla(270,100%,0%,0.75)</span> <span style="background-color:hsla(270,100%,0%,1.0);">hsla(270,100%,0%,1.0)</span> <br /> <span style="background-color:hsla(270,100%,25%,0.0);">hsla(270,100%,25%,0.0)</span> <span style="background-color:hsla(270,100%,25%,0.25);">hsla(270,100%,25%,0.25)</span> <span style="background-color:hsla(270,100%,25%,0.5);">hsla(270,100%,25%,0.5)</span> <span style="background-color:hsla(270,100%,25%,0.75);">hsla(270,100%,25%,0.75)</span> <span style="background-color:hsla(270,100%,25%,1.0);">hsla(270,100%,25%,1.0)</span> <br /> <span style="background-color:hsla(270,100%,50%,0.0);">hsla(270,100%,50%,0.0)</span> <span style="background-color:hsla(270,100%,50%,0.25);">hsla(270,100%,50%,0.25)</span> <span style="background-color:hsla(270,100%,50%,0.5);">hsla(270,100%,50%,0.5)</span> <span style="background-color:hsla(270,100%,50%,0.75);">hsla(270,100%,50%,0.75)</span> <span style="background-color:hsla(270,100%,50%,1.0);">hsla(270,100%,50%,1.0)</span> <br /> <br /> <br /> <span style="background-color:hsla(360,75%,0%,0.0);">hsla(360,75%,0%,0.0)</span> <span style="background-color:hsla(360,75%,0%,0.25);">hsla(360,75%,0%,0.25)</span> <span style="background-color:hsla(360,75%,0%,0.5);">hsla(360,75%,0%,0.5)</span> <span style="background-color:hsla(360,75%,0%,0.75);">hsla(360,75%,0%,0.75)</span> <span style="background-color:hsla(360,75%,0%,1.0);">hsla(360,75%,0%,1.0)</span> <br /> <span style="background-color:hsla(360,75%,25%,0.0);">hsla(360,75%,25%,0.0)</span> <span style="background-color:hsla(360,75%,25%,0.25);">hsla(360,75%,25%,0.25)</span> <span style="background-color:hsla(360,75%,25%,0.5);">hsla(360,75%,25%,0.5)</span> <span style="background-color:hsla(360,75%,25%,0.75);">hsla(360,75%,25%,0.75)</span> <span style="background-color:hsla(360,75%,25%,1.0);">hsla(360,75%,25%,1.0)</span> <br /> <span style="background-color:hsla(360,75%,50%,0.0);">hsla(360,75%,50%,0.0)</span> <span style="background-color:hsla(360,75%,50%,0.25);">hsla(360,75%,50%,0.25)</span> <span style="background-color:hsla(360,75%,50%,0.5);">hsla(360,75%,50%,0.5)</span> <span style="background-color:hsla(360,75%,50%,0.75);">hsla(360,75%,50%,0.75)</span> <span style="background-color:hsla(360,75%,50%,1.0);">hsla(360,75%,50%,1.0)</span> <br /> <br /> <span style="background-color:hsla(360,100%,0%,0.0);">hsla(360,100%,0%,0.0)</span> <span style="background-color:hsla(360,100%,0%,0.25);">hsla(360,100%,0%,0.25)</span> <span style="background-color:hsla(360,100%,0%,0.5);">hsla(360,100%,0%,0.5)</span> <span style="background-color:hsla(360,100%,0%,0.75);">hsla(360,100%,0%,0.75)</span> <span style="background-color:hsla(360,100%,0%,1.0);">hsla(360,100%,0%,1.0)</span> <br /> <span style="background-color:hsla(360,100%,25%,0.0);">hsla(360,100%,25%,0.0)</span> <span style="background-color:hsla(360,100%,25%,0.25);">hsla(360,100%,25%,0.25)</span> <span style="background-color:hsla(360,100%,25%,0.5);">hsla(360,100%,25%,0.5)</span> <span style="background-color:hsla(360,100%,25%,0.75);">hsla(360,100%,25%,0.75)</span> <span style="background-color:hsla(360,100%,25%,1.0);">hsla(360,100%,25%,1.0)</span> <br /> <span style="background-color:hsla(360,100%,50%,0.0);">hsla(360,100%,50%,0.0)</span> <span style="background-color:hsla(360,100%,50%,0.25);">hsla(360,100%,50%,0.25)</span> <span style="background-color:hsla(360,100%,50%,0.5);">hsla(360,100%,50%,0.5)</span> <span style="background-color:hsla(360,100%,50%,0.75);">hsla(360,100%,50%,0.75)</span> <span style="background-color:hsla(360,100%,50%,1.0);">hsla(360,100%,50%,1.0)</span> <br /> <br /> <br /> </div> </body> </html>
結果画像
