CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image: linear-gradient( top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );
結局CSS3のlinear-gradientはどう書いたらいいのかまとめてみた (最新仕様・全ブラウザ対応版) - Studencheskie Programmisty
[-ms-]などは当該ベンダープリフィックスが必要という意味を表します。 Firefox 16以降のように1つのブラウザに複数の項目があるのは、ベンダープリフィックスによってサポートされる構文が異なっていることを表します。 iOS本体のバージョンと、搭載されているSafariのバージョンの対応表はWikipediaが詳しいです。 これから分かるように、現時点（2012/12/7）ではWebkitは最新の構文（to付き）に対応していません。また、FirefoxやOperaのようにプレフィックスを付けるかどうかでtoなしの古い構文が使えたり使えなかったりと変化します。 さて、では結局過去のブラウザも含めて全てに対応するにはどう書けばいいのでしょうか？上から下へ#000〜#fffのグラデーションをかけるコードを例に示します。実際には、対応したいブラウザののみ取捨選択して記述するのが実用的かと思わ
最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty
【CSS3】IE9にCSS3のグラデーションを適用する | r-tgw.net:WEBの備忘録 – ブログ -
CSS3もやっとこさコーディングの選択肢となりつつありますね。うれしい限りです。角丸かつ影つきのグラデーションの効いた画像を作るスキルがなくても、コーディングのスキルさえあればそれらしい絵になるっていうのが素晴らしい。 IE9も正式にHTML5/CSS3への対応を表明し、「さぁこれからはHTML5/CSS3だ！！」 と意気込んだものの、やっぱりIEはIEでした。笑 実は、IE9は背景グラデーションに対応してない！ 各レンダリングエンジンによって記述が微妙に違うからコード増えるし鬱陶しいとか思ってたけど、きちんと書いたらきちんとグラデかかるから、まだましだってことに気づいた今日。苦笑 さて。ではどうやってIE9で背景グラデーションを実現するか。（←やっと本題） 当然といえば当然なんだけど、画像を使います。笑（身も蓋もないとか言わないでw） SVGっていう拡張子のファイルを作成するんだけど
More preview enhancements for Windows Azure AD Premium - Active Directory Blog - Site Home - TechNet Blogs
Microsoft is holding an AI Agents Hackathon, and we want to see what you can build with Python! We'll have 20+ live streams showing you how to build AI agents with Python using popular agent frameworks and Microsoft technologies. Then, you can submit your project for a chance to win prizes, including a Best in Python prize!
CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ
17 CSS/HTML Effects with Cross-Browsing Alternatives サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。 [ad#ad-2] 下記は各ポイントを意訳したものです。 幅の最小値・最大値 (IE included) RGBa (IE included) 不透明度 (IE included) 画像の回転・拡大縮小 (IE included) 背景をブラウザいっぱいに表示 (IE included) 画像無しのビュレット テキストのシャドウ (IE included) 複数のボーダー (IE included) ボックスシャドウ (IE included) 角丸 スクリーンリーダー用のコンテンツ ネガティブ値で指定したtext-indent Clearfix (IE inclu
CSSグラデーションでの角度の解釈 | Web標準Blog | ミツエーリンクス
CSS Image Values and Replaced ContentモジュールのeditorであるTab Atkins Jr.の名前で、CSS WG Blogやメーリングリスト、CSS3.infoに、グラデーションの角度表記とその方向について意見を募っています。 Angles in Gradients linear-gradient()の表記 Image Valuesのlinear-gradient()では、同じグラデーションをいくつかの書き方で指定できます。 たとえば、ボタンなどに浮き上がったように見える効果を与えるため、上に薄い色、下にそれよりも濃い色を指定するケースはグラデーションの最も多いユースケースでしょう。現在の草案で、一番簡単な指定は次になります。 background-image: linear-gradient(#eee, #ccc); 角度による表記を使うと、次の
え！Photoshop？って見間違うほどのUIを備えたCSSジェネレーター -LayerStyles
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
FirefoxとWebKit、CSS3グラデーションの指定方法統一 | エンタープライズ | マイコミジャーナル
The WebKit Open Source Project CSS3は策定段階にあり、ブラウザ側で同じ実装が実現されている機能と、そうでない機能が混在している。それは実装をはじめた時期や経緯などにも依存している。たとえば標準化作業が進められる以前に実装された機能は、のちに標準化を目指して策定がはじまった機能とは考え方やシンタックスが大きく違っていることがある。 そうした機能のひとつにグラデーションがある。グラデーションは便利な機能だがサポートしているFirefoxとSafari/WebKitでフォーマットが違っていた。しかしCSS3の策定は進んでおり、こうした差異も徐々に統一が進められている。WebKitのブログCSS3 Gradientsにおいて、最近進められたグラデーションに関する議論と、その実装状況が報告されている。 報告によれば、CSSのワーキンググループはここ数ヵ月の間、グラデ
CSS Images Module Level 3
CSS Images Module Level 3 Editor’s Draft, 11 January 2025 More details about this document This version: https://drafts.csswg.org/css-images-3/ Latest published version: https://www.w3.org/TR/css-images-3/ Previous Versions: https://www.w3.org/TR/2019/CR-css-images-3-20191010/ https://www.w3.org/TR/2012/CR-css3-images-20120417/ Implementation Report: https://wpt.fyi/results/css/css-images?label=ex
[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス
Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
CSS3 「gradient」と「@font-face」
CSS3 「gradient」と 「ウェブフォント（@font-face）」 このページは背景画像を一切使用していません。 背景のストライプ模様はCSS3のbackground-image:gradient、フォントはCSS3の@font-faceでサーバー上に置いたフォントを読み込んで表示しています。これによって、閲覧者のパソコンにインストールされていないフォントも表示する事が出来ます。また、画像文字ではないのでコピーする事も可能。 SEOの一環としても有効です。 2010年1月現在、InternetExplorerとOperaではまだgradientに対応していない為、これらのブラウザでは背景は単色になります。フォントファイルはうっかり領収書５部ダメにできる筆圧を誇るふいさんの作った「まきばフォント」をお借りしています。 フォントの為のスタイル指定 @font-face { font
ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル
なんとなく目立たせるためにドロップシャドウを適用したり、ちょっとさみしいのでグラデーションを加えたりしていませんか？ Web designer Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。 Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors 下記は、各ポイントを意訳したものです。 ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションの使用の注意点 使用は、より繊細に よくある間違いと解決方法 おわりに ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションは、スペースに錯覚を生じさせるための基本的なテクニックです。 Mac OS Xのドックを例にとると、輝いたテーブルの上に各メニューのアイコンが浮き上がっ
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
注目を集めるためのCSS3を使った光るボタンサンプル実装例:phpspot開発日誌
注目を集めるためのCSS3を使った光るボタンサンプル実装例が公開されています。 Safari4や Firefox3.5、ChromeでみるとCSS3の機能を使ってボタンが光ります。少しだけ次世代ですがこんなことができるんだなと覚えておいてもよいかも。 アニメーションで輝くボタンはまるでイルミネーションのようです。 @-webkit-keyframes を使うことでこんなことができるんですね。 Firefox3でみると次のように光りはしませんが、それなりにきれいなボタンで表示されます。 デモは以下のエントリを参照してください。 Radioactive Buttons with CSS Animations and RGBa - ZURB Playground - ZURB.com 作成のチュートリアルは以下を参照してください Pushing Your Buttons With Practic
Firefox 3.6でCSSグラデーションを使う方法 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable 公開が近づいているFirefox 3.6 (Gecko 1.9.2)ではCSS関連の機能が強化される。従来サポートされてきた機能の強化に加え、CSS3からいくつか新機能の取り込みと、Mozillaが提案する独自の機能が追加されることになっている。Mozillaが提案する機能のうち、グラデーションに関する説明がcss gradients in Firefox 3.6 at hacks.mozilla.orgで紹介されている。 グラデーション機能がどのように動作するかは、Firefox 3.6 beta4などでCSS Gradient & Firefox 3.6ページを閲覧するとよくわかる。Firefox 3.5で閲覧した場合と3.6で閲覧した場合では表示される内容が異なっている。
CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
Gradientifier
Gradients are presently only supported in Safari 4. They can be used anywhere an image can be - for example background-image, list-style-image, border-image or with generated content. If you specify a gradient as a background, be sure to also specify a background color, to ensure text is legible in browsers which don't support gradients. Gradients can be linear or radial (this editor creates linea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Grad3
2011年9月 | Web標準Blog | ミツエーリンクス