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

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

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

CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス

2019/11/26 179 users コリス シャキ SVG CSS テクニック

CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかな... 続きを読む

CSSのスニペットに登録！背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート | コリス

2018/06/21 68 users スクリーン HTML Pure CSS コリス CSS

スクリーンいっぱいの背景にCSSグラデーションが変化するアニメーションを実装するスタイルシートを紹介します。 HTMLもCSSも非常にシンプルで、簡単に利用できます。 Pure CSS3 Gradient Backgro...記事の続きを読む 続きを読む

CSSグラデーションで作った背景パターンのサンプル | NxWorld

2015/11/27 283 users NxWorld サンプル 背景パターン

CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきましたし、今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が... 続きを読む

[CSS]シンプルなスタイルシートで書かれたグラデーションを使ったかっこいい背景のテクニック -Cool Gradient | コリス

2014/07/10 112 users コリス radial-gradient CSS テクニック

ブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。 ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。 デモは「radial-gradient」を使用しているため、モダンブラウザでご覧ください。IEは10+で。 Cool Gradient 実装は非常にシンプル、コピペで簡単に利用できます。... 続きを読む

CSSで画像を六角形にくり抜く - Weblog - Hail2u.net

2014/05/19 76 users Weblog hail2u.net SWARM CSS 六角形

Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 View Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要があ... 続きを読む

[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法 | コリス

2011/02/02 322 users コリス border-radius text-shadow

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティpadding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要... 続きを読む

hail2u.net - Weblog - CSSグラデーションのちょっとしたテクニック #2

2009/12/20 350 users エントリ グラデーション Weblog hail2u.net

前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと... 続きを読む