インターネット・アカデミー オフィシャルブログ
About

ブクマ必須!グラデーションを簡単にCSS3に変換できる「Blend」

2015年11月 4日

Blend | CSS3ジェネレーター

Webサイトの見た目を指定する言語であるCSSの最新バージョンが、「CSS3」です。 その特徴の一つが、グラデーションの表現を数字やアルファベットで指定することができるということにあります。 画像を作る必要がないため、気軽に記述を変えたり、JavaScriptと連携させて色やそのグラデーションに変化を与えたりすることができます。

そんな、グラデーションをCSS3で表現するために、さまざまなジェネレーターが世の中に生まれていますが、本日はその中でも使い勝手が良くてお勧めできる「Blend」をご紹介します。

Blendの使い方

使い方は簡単。両サイドのパレットから好きな色を選びます。 パレット上部の「Flat UI」ボタンをクリックすると、選択できる色の数が増えます。

Blend | CSS3

色が決まったら、真ん中に表示されている矢印ボタンを押しましょう。 すると、選択した2色の色で作ったグラデーションが背景に表示され、新たにボタンが3つ表示されます。

Blend | CSS3グラデーション

一番上のボタンはグラデーションコードの表示ボタンであるView Code、真ん中のボタンはグラデーションのセンター位置をクリック&ドラッグで移動でき、一番下が前の画面に戻るRefreshボタンです。

View Codeボタンを押すと次のようなコードが表れて、そのままコピーをとってCSSファイルに貼り付けをすればすぐに使用することができます。

Blend | CSS3グラデーションコード

操作画面が非常にシンプルに作られているため、直感的に操作ができて使いやすいサイトです。Webサイト制作に役立つツールの一つなので、ぜひブックマークして使ってみてください。


関連ブログ記事

本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。

  • このエントリーをはてなブックマークに追加

現在、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発とインターネット・アカデミーのカリキュラム開発を担当する。

海外支店責任者として、アメリカとインド、日本を行き来する。5年間、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発と普及活動を行ってきた経歴を持つ。

日本の新宿校、渋谷校インストラクター。主にWebマー ケティングとクリエイティブ系の授業を担当。

バンガロール校インストラクター。デジタルマーケティング が専門分野。

Google認定Webマーケティング講座の企画・開発に携わる。「PHPカンファレンス2011」で講演。「PHP公式資格教科書」の執筆など

バンガロール校支店長。Webプロデューサー、インストラクター、エリアマネージャを経て、現在はグローバル展開のビジネスディベロップメントを担当。

「W3C"HTML5 Tour"」での講演や、インド校にてWebデザイナーおよびチーフインストラクターを勤めた経歴を持つ、人気キャリアプロデューサー。

フランスにあるW3CのEUホスト、ERCIM(欧州情報処理数学研究コンソーシアム)に常駐し、Webの研究を行うインド人インストラクター。Webマーケティングに精通している。

テーマテーマ

最新の記事最新の記事

スタッフ別ブログスタッフ別ブログ