商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy

2024/04/25 532 users スモーク 大理石 蜘蛛 シャドウ 水彩

個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとに... 続きを読む

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

2022/01/27 576 users CSS 美しいグラデーション 中央 解説 現象

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当... 続きを読む

Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス | コリス

2015/07/01 587 users OGP コリス metaタグ シャドウ CSS

CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオン...記事の続きを読む 続きを読む

美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ | Webクリエイターボックス

2015/03/02 515 users CSS 配色 実例 実装 美しいグラデーション

背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear... 続きを読む

Photoshopでの面倒な作業を簡単に！便利すぎるPhotoshopのアクションのまとめ | コリス

2014/08/07 689 users コリス ハンティング Photoshop グラデ ソリッド

グラデーションの縞々を取り除いたり、背景を削除したりする実用的なアクションをはじめ、カラーのバリエーションを生成したり、画像を幾何学模様やハーフトーンにしたり、テキストやオブジェクトを3DにするPhotoshopのアクションを紹介します。 no more banding フラットやソリッドなスタイルがトレンドでも、まだまだグラデも健在です。そんなグラデーションが汚く見えてしまう縞々（バンディング）... 続きを読む

一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ | コリス

2013/12/09 585 users コリス コーポレートカラー カラースキーム 配色設計 配色

コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。 またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。 最初は、国産のツールから。 配色の見本帳 | キーカラーで選ぶ配色パターン 一つのカラーをベースに、さまざまな色の法則から配色パターンを表... 続きを読む

[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した - WEBCRE8.jp

2013/06/19 576 users ダサ 議論 考察 角丸 WEBCRE8.jp

以前書いた角丸に関する考察のグラデーション版です。Webデザインで角丸とともに多用されるグラデーション。それにどんな意味があるのか、やり過ぎると何故ダサいのかを徹底的に考察しました。 iOS 7のデザイン変更に伴う議論 [...] 続きを読む

ゼロからはじめるCSS3を勉強するために参考になるサイトや便利なツール、チュートリアルを一挙にまとめました | HTML5でサイトをつくろう

2012/08/01 918 users チュートリアル ツール CSS3 参考 チュートリアルサイト

今までCSS3を使ったパターンやスタイルの付け方などを紹介してきましたが、一言にCSS3の機能といっても、角丸やグラデーションなどの装飾だけでなく、アニメーション機能などアプリ制作をする上でも便利な機能がたくさんあります。 そこで、今回はアプリ制作をする上でも便利なCSS3のアニメーション機能等を勉強する際に参考になるサイトをまとめました。 デモページからチュートリアルサイト、便利ツールまでこれか... 続きを読む

CSS3の制作をぐっと楽にする厳選20のオンラインツール | コリス

2012/07/10 718 users コリス セレクタ グリッド シャドウ ボーダー

CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利... 続きを読む

【テスト】きちんと色が見えていますか？ オンラインで「色覚」のチェックをしてみよう | ロケットニュース24

2012/06/30 660 users 色覚 ロケットニュース オンライン チェック 順番

女性の255人にひとり、男性では12人にひとりが色覚に何らかの問題があるという。あなたは大丈夫だろうか？　カラーサイエンスおよびテクノロジー分野の世界的メ企業の「エックスライト」は、オンラインでできる色覚のテストを提供している。気になる方はぜひともチェックして頂きたい。 同社が提供している「Online Color Challenge」は、マスに並ぶ色の順番をかえて、きれいなグラデーションを完成さ... 続きを読む

角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！ | OZPAの表4

2012/06/14 607 users ドロップシャドウ OZPA アニメーション 角丸 おつぱ

html5-css3-orange-logos / Nelson Felix Giga どうも！おつぱ（ @OZPA ）です！ 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介！ ｳｵｱｱｱｱｱｱｱｱ さて、CSS3対応ブラウザも増え、角丸、ドロップシャ... 続きを読む

CSS3の勉強になるかも！？画像を使わないボタンの作成手順｜Webpark

2012/04/04 886 users Webpark Firefox 順番 動作 たくさん

CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。 続きを読む

信じられないほど美しい空のグラデーション – Capturing Gorgeous Sky Colors - | STYLE4 Design

2012/01/11 882 users インスタレーション 日没 美しい空 ガジェット ニューヨーク

インテリア、雑貨、ガジェット、Webサイト、インスタレーションなどクリエイティブなものや面白いと思ったものをご紹介しています 信じられないほど美しい空のグラデーション。 ニューヨークを拠点とする写真家 Eric Cahanさん作品。 実際の日没の際に取られた空の写真だそうです。 空だと聞かされなかったらただのキレイなグラデーションにしか見えないかもです。 それでも本物の空だとは信じられない。。 美... 続きを読む

[CSS]hr要素をおしゃれにスタイリングする8つのテクニック | コリス

2011/11/23 613 users コリス background border CSS hr要素

デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; ba... 続きを読む

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ（くだくらげのBLOG）

2011/11/13 807 users リフレクト WebFont くだくらげ CSS くらげだらけ

CSS前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。今回はCSSでテキストにグラデーションをかけるテクニックについてです。前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブが... 続きを読む

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集｜最適化ノウハウコラム記事　～スマートフォン最適化・スマートフォン対応サイト制作はTOUCH&SLIDEへ～

2011/11/11 751 users btn href HTML サンプル a class

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集 CSS3によって、グラデーションや角丸などの様々なデザイン表現を、画像で書き出すことなく表現出来るようになりました。 ここではボタンデザインの際に役立つ5つの効果をご紹介します！ 当記事のサンプルについて すべてのサンプルは下記のHTMLを使用しております。 <a class="btn" href="#">LinkText</a> また、... 続きを読む

ロゴ、背景、アイコンなどの画像ジェネレータ厳選20個｜Webpark

2011/03/16 628 users Webpark favicon ストライプ アイコン ロゴ

背景、ロゴ、favicon、Ajaxローディングなどの画像をオンラインで作成できるサイトを集めました。まだまだありますが、多すぎるとかえって不便だと思うので各ジャンルごとで3個または5個で厳選しています。背景関連1. Stripe Generatorストライプの模様を作るならここ。ストライプの幅はもちろん、影や柄なども自由自在です。グラデーションもつけることもできます。2. bgMaker背景パタ... 続きを読む

CSSでアイコンをデザイン - Weblog - hail2u.net

2011/03/03 770 users View Demo 万能 Weblog スクリーンショット

ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。View demo: Design icon with CSSul li a ... 続きを読む

[CSS]CSS3で何ができるの？　という時にみておきたいサイト集 | コリス

2010/02/10 734 users コリス ドロップシャドウ CSS 記述 CSS3

角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコ [...] 続きを読む

グラデーションをより滑らかにするPhotoshopのチュートリアル | コリス

2009/09/14 519 users コリス SloDive Photoshop チュートリアル

Photoshopを使用して、グラデーションを描いた時に濃淡の縞ができないように滑らかにするチュートリアルをslodiveから紹介します。 How To Correct Banding In Your Gradient [...] 続きを読む

デザイナーさんにカフェで教えてもらったこと - IDEA*IDEA ～ 百式管理人のライフハックブログ

2009/09/08 1144 users IDEA Fireworks 下心 覚書 昨晩

昨晩はとあるデザイナーさんと夜カフェ（許可とってないので一応名前伏せとこ）。Fireworksを買ったまま放置してあったので勘所を教えてもらおう、という下心でしたよ。思いのほか勉強になったので以下、覚書。いつか詳しく書く。 いまっぽいボタンを作りたいならFireworks用のグラデーションをダウンロードしておくべき。さくっと作れますよ！「Web 2.0 Layer Styles for Firew... 続きを読む

見栄えがよく、分かりやすいエクセルのグラフを作成する5つの簡単なテクニック | コリス

2008/10/28 896 users Chandoo.org テンプレート コリス エントリー 画像

Chandoo.orgのエントリーから、見栄えがよく、分かりやすいエクセルのグラフを作成する5つのテクニックとカラフルにデザインされた73のエクセルのテンプレートを紹介します。 How to NOT spend $ 150,000 and still dress up your charts 色の代わりにグラデーションやパターンを使用したグラフ 色の代わりに画像を使用したグラフ 注目するポイントに... 続きを読む

無料で使えるPhotoshop グラデーションファイルいっぱい - DesignWalker

2008/10/02 559 users DesignWalker 背景 たくさん Photoshop

ボタンや、背景など、いろいろな場面で活躍してくれるPhotoshopのグラデーション。 お気に入りのグラデーションファイルをダウンロードして登録しておけば、いつでも簡単にグラデーションをかける事が出来ますね。 このブログでも以前、『Photoshopのグラデーションファイルを日本の伝統色で作ってみた』でグラデーションファイルを公開させていただきました。 今回は、まだまだたくさんある無料で公開されて... 続きを読む

グラデーションをマスターするためのPhotoshopのチュートリアル集 | コリス

2008/06/26 620 users コリス Photoshop GIM チュートリアル集 リソース

Vandelay Web Designのエントリー「ウェブデザインのための71のグラデーションのリソース」から、グラデーションをマスターするための基本的な使い方から、実践的なサンプル・実用的なダウンロードできるリソースを紹介します。 71 Gradient Resources for Web Design Vandelay Web Designのエントリーでは他にも、IllustratorやGIM... 続きを読む

テクスチャとグラデーションで質感のある背景を作ろう - DesignWalker

2008/06/03 595 users ウェブデザイン DesignWalker ファイ テクスチャ

今回は、ひさびさのPhotoshopチュートリアルです。 最近では、ベタな背景や、単純な上から下へのグラデーションだけではなく、なんだかとっても質感のある背景のウェブデザインがはやりっぽいです。 今回は、テクスチャ画像とグラデーションを組み合わせて、簡単に質感のある背景をPhotoshopで作るチュートリアルをご紹介。 とっても簡単なので、是非お試しください。 1. 新規作成 適当な大きさでファイ... 続きを読む