覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法

2022/06/08 91 users radial-gradient ブラウ CSS 関数 実装方法

CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウ... 続きを読む

CSSスニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net

2018/12/21 14 users 透過 CSSスニペット net 境界線 要素

Result mask-imageとlinear-gradientを使います。 素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね css :root {/*境界線を斜めに*/ --direction: -45deg; } main {/*包括要素*/ position: relative; } div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: ... 続きを読む

今どきのCSS3グラデーションの指定方法 (2015年版) - to-R

2015/11/09 72 users 今どき to-R CSS3グラデーション 指定方法 TOP

昨年、「今どきのCSS3グラデーションの指定方法」という記事を書いてそこそこアクセスがあるのですが、今年にはいって状況が変わってきたのでアップデートしておきます。 まずは各ブラウザの対応状況。現在の正式な記述「linear-gradient (to bottom)」とちょっとレガシーな記述「linear-gradient (top)」、それと古いWebKit用のgradientプロパティの対応状況... 続きを読む

今どきのCSS3グラデーションの指定方法 - to-R

2014/02/05 125 users 今どき to-R CSS3グラデーション 指定方法 TOP

今どきかはわからないですがCSS3グラデーションの指定方法を再考してみました。 対応ブラウザ 現在の正式な記述「linear-gradient (to bottom)」とちょっとレガシーな記述「linear-gradient (top)」、それと古いWebKit用のgradientプロパティの対応状況を調べてみました(緑はベンダープリフィックスが必要)。ひとまず角度指定がどのバージョンから変更され... 続きを読む

[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック | コリス

2013/07/11 77 users コリス div ノコギリ テクニック CSS

画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。 下記は、p要素一つだけです。 実装は、こんな感じです。 HTML HTMLはpでもdivでも適当に。 [html] 塩レモン [/html] CSS ぎざぎざの線はlinear-gradientでかきます。 ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。 [css]... 続きを読む

CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com

2013/06/02 61 users hsl Ginpen.com Saturation CSS

CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、... 続きを読む

[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。

2013/02/05 150 users Latin ジェネレータ バシャログ グラデーション たくさん

こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない... 続きを読む

結局CSS3のlinear-gradientはどう書いたらいいのかまとめてみた (最新仕様・全ブラウザ対応版) - Studencheskie Programmisty

2012/12/07 121 users 最新仕様

注意 [-ms-]などとあるのは、ベンダープリフィックスが必要という意味です。 Firefox 16以降のように、１つのブラウザに複数の項目があるのは、ベンダープリフィックスによってサポートされる構文が異なっているからです。 iOS本体のバージョンと、搭載されているSafariのバージョンの対応表はWikipediaが詳しいです。 これから分かるように、現時点（2012/12/7）ではWebkit... 続きを読む

SVG Gradient をSASS (LESS) で生成して CSS Gradient として扱う mixin | ヨモツネット

2011/12/26 30 users Mixin less Sass ヨモツネット SVG

2011年12月22日 木曜日 この記事では最終的に、linear-gradient 関数を SASS の mixin にまとめたコードを解説します。これは、Webkit 系ブラウザーや Firefox だけでなく Internet Explorer 9 でも SVG 経由で再現可能でとても便利です。 まず、利用例を紹介しますと、次のように mixin を利用することになります。 .selecto... 続きを読む

CSSグラデーションの構文変更とベンダー接頭辞 | Web標準Blog | ミツエーリンクス

2011/11/28 40 users ベンダー接頭辞 ミツエーリンクス CSSグラデーション 構文

前回のベンダー接頭辞に関するエントリで、接頭辞なしの機能を併記してもうまくいかないことがあると書きました。 これは、標準化された（接頭辞のない）機能の構文もしくは解釈が変わってしまう場合を意図しています。そして、CSSのグラデーションでそうした変更が加えられています。 linear-gradient()のキーワードが変更に 少し前の話になりますが、9月8日に更新されたCSS3 Image Valu... 続きを読む