WEB-RSS2.0ATOM1.0さすらいのWeb制作家、MAKOCHINがつづるブログサイト。Web制作に関する知識を備忘録的に書いているだけのサイトです。ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。ご興味のある方はどうぞ。さすらいのWeb制作家。Web制作の修行に勤しむ毎日を過ごす。【CSS3】グラデーションの指定(linear-gradient、radial-gradient)TweetPocketグラデーションの指定に関するCSS3のプロパティをご紹介します。linear-gradient線形グラデーションを指定するプロパティです。【書式】linear-gradient([開始位置と角度],[開始色],[途中色],[終了色]);開始位置は、left、center、right、top、center、bottomの何れかで指定するか、数値で指定します。角度は、degなどの単位を付けた角度値で指定します。開始位置と角度は省略可能ですが、その場合には初期値のtopになります。途中色は幾つも増やすことができます。SafariやChromeなどのwebkit系ブラウザでは、以下の書式で指定します。to(終了色));※color-stopの位置は、0.1から1の間の数値で指定します。radial-gradient円形グラデーションを指定するプロパティです。【書式】radial-gradient([開始位置と角度],[形状とサイズ],[開始色],[途中色],[終了色]);開始位置と角度は省略可能ですが、その場合には初期値のcenterになります。途中色は幾つも増やすことができます。形状は、以下の値から選択して指定します。指定を省略すると、初期値のellipseとなります。楕円(初期値)サイズは、以下の値から選択して指定します。指定を省略すると、初期値のcoverとなります。指定範囲に合わせて覆う(初期値)※他の設定値の詳細はlinear-gradientと同様です。SafariやChromeなどのwebkit系ブラウザでは、以下の書式で指定します。途中色),to(終了色));※color-stopの位置は、%で指定します。}仕様ではbackground-imageプロパティやlist-style-imageプロパティなど、画像を扱うことのできるどのプロパティにも指定できる値とされていますが、現在のところ、FirefoxなどのMozilla系ブラウザは、background-imageプロパティ、および、backgroundプロパティの値としてのみサポートしています。色の指定は、rgb、rgba、色名を直接記述でも指定できます。cssコメントを残す返信をキャンセルする。