wde

webkitのgradient簡単入力ツール

2009-05-23 07:26:21

webkit（Safari3.1以上も含む）ではCSSでbackgroundにグラデーションを適用することができます。OperaではSVGを利用して同じようなことができますが、webkitのCSSの記述は非常に面倒です。

Webkit Surfin’Safari(グラディエントについての記事)
http://webkit.org/blog/175/introducing-css-gradients/

Opera SVG (SVGについての記事)
http://virtuelvis.com/archives/css3/index

http://virtuelvis.com/download/2007/09/kestrel/itunestable/

そこで、Web DirectionsのJohn Allsoppが作成したツールがこれです。

http://westciv.com/gradients/

使い方はいたって簡単

上から『Start』『End』『Stops』ボックスが並んでいる。その中で『Start』と『End』はグラデーション色、Horizontal Position=水平位置、Vertical Position=”垂直位置”をそれぞれ指定することができます。

一番最後の『Stops』は途中で色を追加するものと考えると分かりやすい。色をグラデーションの途中で追加することができる。

今後はradial(放射状)のgradientを実装するとJohnと言っていましたので、後ほど実装されると思います。

※このエントリはブロガーにより投稿されたものです。朝日インタラクティブおよび ZDNet Japan編集部の見解・意向を示すものではありません。

Web Directions East 最新エントリ

Web Directions East 一覧へ »

ホワイトペーパー

RSS | サイトマップ

ブログを書く(CNET_IDのご登録が必要です)

[ログイン] [ログアウト]

folllow builer on twitter

新着記事
特集
ブログ

新着一覧 »

アドビ、Photoshopの機能追加を含めCreative Cloudをアップデート 2012-12-17 16:50:00
システム担当者がより楽しめる「007 スカイフォール」の見方--MI6が遭遇する手痛いピンチは、こうすれば防げた？ 2012-11-27 11:00:00
Javaエバンジェリストが語る「JavaOne 2012 San Francisco」の見どころ～築き上げられる『未来のJavaの姿』～ 2012-11-19 15:30:00
企業ITのクラウド化と多様化するPaaS 2012-07-31 09:00:00
FAQ：Herokuと既存システムはどうやって連携させるの？ 2012-07-12 09:00:00
特集一覧 »

“海上オフィス”と“コグニティブ・ロボット”--ドリーム・アーツが2つのびっくりプロジェクトで目指すのは…… 2017-04-01 00:00:00
ドリーム・アーツ、iPadで営業活動を革新するクラウドサービス「YUKARi」を発表 2013-09-11 10:30:00
日本サード・パーティ、Twitterマイクロサイト構築サービス「Wayin Hub」を国内展開 2013-06-27 08:00:00
デル、Dell SonicWALL SuperMassive 9000シリーズを発表--キャリア向けの性能を企業にも 2013-05-16 23:00:00
IBC、性能監視アプライアンスの新製品「System Answer G2 RAID Appliance」を発売 2013-04-19 09:00:00
ブログ一覧 »

企画特集

AWSセミナー講演レポート
「クラウド」でコンタクトセンター
Amazon Connectを使ってわかったこと
必須の時代！AIチャットボットの力
問い合わせ業務の重要性を改めて認識の機運
コンタクトセンターを「パンク」させない！
いまどきのクラウド用語12選
今さら聞けない単語から最新トレンドまで
これだけは知っておきたい厳選の12語収録
対談：大谷イビサ氏×ZDNet編集長
DX時代を勝ち残るために必要なものとは？
両編集長が語る、CIOのあるべき姿
「ゼロ情シス」企業こそ攻めのITへ
VMware提供、HCIベースのインフラの威力！
「VMware Quick Win Solution」の事例増加
Core to Edge Security
マルチクラウドが当たり前の時代に
とるべきセキュリティ対策は？
転換期を戦える組織やチームを作れ
「ゲームチェンジ」でITを核にした時代へ！
アジャイルな組織と開発体制を識者が語る
5G時代のネットワーク運用最前線
デジタル変革は5Gでさらに加速する！？
ノキアの提唱する「DX5つのステップ」とは
Windows 10 移行の課題に切り込む
移行したはいいが、管理が煩雑に…
使い勝手とセキュリティをどう両立させる？
熱視線！「次世代メガクラウド」
DRサイト構築やデータ保護の常識が変わる
「VMware Cloud on AWS」東京リージョン
AWSセミナー講演レポート
AWS移行で気になるマイグレやDR、
セキュリティをエキスパートが指南
真の生産性向上を成す働き方とは
労働人口が減少しても、企業は成長を続けな
ければならない。生産性をいかに高めるか
コネクテッド・エンタープライズへ
現場で進む価値創出・デジタルとの融合！
英国では拡張現実(AR)で生産性3割増の衝撃
働き方改革のカギはズバリこれ！
「セキュリティ」と「利便性」は両立するか
実現するためのノウハウをご紹介中＞＞
NWに悩まない次世代クラウド基盤！
高信頼サーバとVMware NSXの次世代基盤が
ヘアピン通信を解決しスループットを向上
ITガバナンス協会副理事に聞く！
ITガバナンスは今後どうなるか
クラウド時代の展望
事例で知るAWS徹底活用！
クラウド移行と同時に何をしたのか？
負荷を減らして「攻め」に転じる方法とは
DX時代に競争力の源泉となるHCI
市場競争に勝つためにはスピード感が不可欠
それを生み出すインフラ改革の事例を紹介
結局ここで手を抜いたら終わり…！
脅威の「侵入経路」はエンドポイントから！
ここの防御だけは現状維持では許されない…
AWSセミナー講演レポート
AI×IoT：実は期待するほど進んでいない？
「製造業の生産性向上」の現実解
衝撃！サイバー攻撃の9割はメール
それが有効であるから依然としてメール攻撃
はなくならない。さらに急増するBECとは？
最近、Office 365が重い…！？
クラウドの利用増加やセキュリティの問題を
一挙にカバーするトラフィック可視化技術
AWSセミナー講演レポート
クラウド活用と合わせて考えたい
「ガバナンス強化策」のポイント
コンタクトセンターが変わる！
最新・高精度な音声認識、クラウド
を手にした未来の姿とは
AWSセミナー講演レポート
1年で約4,000台の環境をAWSへ移行完了！
そのポイントと効果を語る
CIOは部分最適ではいけない
両編集長は何を語る？CIOの今とこれから
TECH.ASCII.jp×ZDNet Japan
ビジネス視点で評価せよ！
競争に勝つクラウドは「ハイブリッド」
AI・IoT時代に、スピードとコストの現実解
vFORUMレポ！次世代の構築・運用へ
「サイロ化リスク」に直面！今後のNW環境は
仮想化プラットフォームに置き換えられる！
デジ変した世界の勝ちパターン探る
デジタル変革は起き、これまでの市場ルール
は破壊された。新たな世界で生き残る術とは
まさにインフラ担当者の希望の星！
ユーザー部門の無茶な要望にも楽々対応
マンガで解説！「HCI」の新常識 vol.2
悩ましい！生産性と管理強化の天秤
多様な働き方、デバイスがもたらす生産性とセキュリティのバランスをどう保てばよいか
これで万全！VDIスモールスタート
スモールスタートには意外な落とし穴が！
将来を見据えた構築術を伝授！
加速する基幹システムのオープン化
基幹業務で重視する要件が変わってきた！
高信頼プラットフォーム構築の価値
兼任情シスでも、手は緩められない
総務が情シスを兼任する実情でセキュリティ
専任なんて夢物語。それでも対策は不可欠！
漫画：輸出管理の困ったに
例えば、規制リストの該非判定どうしてる？
属人化やノウハウ不足から脱却する
特集：ブロック至上主義からの脱却
新潮流とも言える「セキュリティの可視化」
選定・導入・運用の複合的な視点で紹介
特集：AWS活用はここまできた
「ビジネスを支えるIT」から
「ビジネスの価値を創出するIT」へ
「ためられない」と分析もできない
貴社のデータ蓄積基盤は分析ニーズに応えら
れますか？データ活用の第一歩はここから！
「カジュアルなIoT」を実践！
製造現場の作業からオフィスワークまで
見える化を実現したＡＧＣの事例
SBI証券の挑戦！！
データから、「顧客のライフプラン」に
寄り添う提案をリアルタイムに
複雑なセキュリティ運用と決別を！
EDRのパイオニアが語った、新たなアプロー
チとは？CEOを「宣言」にも注目のレポート
AWSセミナー講演レポート
ソニー銀行のAWSによる可用性対策を公開
大阪ローカルリージョンの活用ポイントも
すぐに使えるデータは3割以下
AIを活用した分析の大きな課題
データ準備をどうすれば良いのか
IoT時代の新たなモノづくり
フィジカルとデジタルの“融合”が製造業に
もたらすインパクトとは？詳細はコチラ＞＞
どのクラウドかは重要ではない
エグゼクティブが語る、クラウド活用のイマ
楽天　副社長CIO ＆ CISO平井康文氏
急げ！新たなネットインフラの革新
Virtual Cloud Networkで新クラウド時代
移行する必然は　もう満ちている！
AWSセミナー講演レポート
三菱電機と東洋ビジネスエンジニアリングが
語るまったなしの「ものづくり×IoT」
クラウドがもたらすITの価値
デジタル変革の主役はIT部門
時代を作るためのクラウド情報が満載！
IoTは次のフェーズへ
クラウドとの組み合わせが重要となる
エッジコンピューティングとはなにか？
機械学習は敷居が高い？
使い慣れたSQLで簡単大量データ分析できる！
PDCAサイクルを高速で行う方法とは

CNET_ID | RSSフィード | サイトマップ

ASAHI INTERACTIVE sites: CNET Japan | ZDNet Japan | builder by ZDNet Japan | TechRepublic Japan | Tetsudo.com

International Business Site for Developer: Builder.com | Builder UK | TechRepublic

The Japanese edition of 'ZDNet' is published under license from CBS Interactive, Inc., San Francisco, CA, USA.Editorial items appearing in 'builder by ZDNet Japan' that were originally published in the US Edition of 'ZDNet', 'CNET', 'TechRepublic', and 'CNET News.com' are the copyright properties of CBS Interactive, Inc. or its suppliers. Copyright © CBS Interactive, Inc. All Rights Reserved. 'ZDNet', 'CNET' and 'CNET News.com' are trademarks of CBS Interactive, Inc.

個人情報保護方針 | 利用規約 | 広告について |
運営会社

webkitのgradient簡単入力ツール

使い方はいたって簡単

より“せっかちに”なっている顧客が貴社のカスタマーサービスに不満を抱く理由が明らかに

顧客体験と顧客満足は何がちがうのか？CX向上で求められるコンタクトセンターの品質管理

セキュアなwebアクセスの実現に向けた、最適な「インターネット分離」環境の検討方法

時代が変わっても支持され続けるコンタクトセンターの秘訣とは？

既存のセキュリティ対策は“穴だらけ”─企業の命運は次世代型の防御アプローチにかかっている

ビジネスを変えるAIと変えないAIの違いとは？業務で“使える”AIのかたちを動画で解説