Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
ウェブサイトやグラフィックデザイン、音楽サービス Spotify などで見かけるようになったデザインのひとつが、鮮やかでシンプルな配色の組み合わせが特長のデュオトーン（英: Duotone）です。 デュオトーンとは、２色（Duo）の色合い（Tone）から構成されたデザインを指し、かつて60年代に生まれたポップアートの旗手のひとり、アンディー・ウォーホルの作品が分かりやすいでしょう。 今回は、たった2ステップで手軽にデュオトーンを作成できる Photoshop チュートリアルをご紹介します。また、ダウンロードしてすぐに使える、デュオトーンエフェクトに適した無料グラデーションファイル10個セットも、記事の後半で公開しています。 詳細は以下から。 Photoshopで写真を今どきのデュオトーンに加工する方法 ステップ1: 加工する写真を開こう。 まずはデュオトーン・エフェクトを加えたい写真を P
ゴールドとシルバーのグラデーションが眩しいほどに美しい！490種類のPhotoshop用のグラデーション無料素材
落ち着いたパステル系のカラー、同一色相の繊細で美しいグラデーションなど、Material Design, iOS 8, Modern UIなどやフラットなスタイルで使われている最近人気のあるカラーを紹介します。 PhotoshopやIllustrator用のスウォッチもダウンロードできますよ。
ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 多層グラデーションな背景を作れる、というもの。用途は限られそうですけど、なかなか素敵な感じ。 こういう背景を色を指定してランダムに作成出来ます。 以下サンプルです。 Sample リロードする度に異なったグラデーションが作られます。 コード <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="shards.min.js"></script> 本体とプラグインを読み込む・・・のですが、1.9だと動かないっぽい？ $('#foobar').shards( [239,199,222
45+ Photoshop Gradient Sets For Web Designers by Lars | Last updated Feb 16, 2017 | Photoshop | 1 comment Gradients in designs provide a transition between two or more colors with a linear or circular direction. Using gradients to add realism and depth is a very popular design technique today. To give an example you see gradients used very often in web design e.g. to give buttons a cool and shiny
手持ちの写真にオーバーレイさせたくなる、レトロ風のグラデーション素材を紹介します。 Sweet Roll Hinge Candy Yum [ad#ad-2] Fanrush Blown Off Nex
Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 ↓とりあえず、border を使った場合と、線をグラデーションさせた場合の作例です。CSS だけで作っています。モダンブラウザで見てください。 微妙な違いかもしれませんが、線にグラデーションを適用した方、よりリアルで繊細な印象になります。 作り方 border は使いません。替わりに、ネストしたボックスを作り、親ボックスをグラデーションさせることで、線がグラデーションしているように見せます。 HTML 内側に span を入れ込んで「重ねた塗り」を実現します。 <a href="#" class="button"><span>ボタン</span></a> 外側のボックス (a) の padding が線幅になります。内側のボックス (span) は、白で塗りつ
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
CSS3の角丸やシャドウ、グラデーションを使用して、より美しくスタイルを適用するチュートリアルをAbduzeedoから紹介します。 Playing with CSS3 demo キャプチャはChrome3 CSS3に対応しているブラウザでは上記のように、角丸やシャドウ、グラデーションのスタイルが適用され、美しいレイアウトが再現されます。 完全に対応していないブラウザでは下記のようになります。 キャプチャはFirefox3.5 チュートリアルでは「box-shadow」のエフェクトから一つずつCSS3のテクニックが紹介されており、全部を使用するだけでなく、部分的に使用したい場合にも参考になると思います。
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
ゴールドとシルバーで全400種類以上が揃っている、メタルのグラデーションが美しいPhotoshop用の素材を紹介します。
What are Photoshop Gradients? A Photoshop gradient is an effect in which one color, shade, or brightness level fades into another. Gradients are commonly used in web and graphic design and can also be used in photo editing. Gradients range from a simple linear change from one color to another to multiple colors combined in varying shapes or patterns. Aside from linear gradients, you can create rad
手元の画像やオンラインの画像から、このグラデーションいいな、という箇所を抽出し、CSS3 グラデーションのスタイルシートを生成するオンラインツールを紹介します。 Gradient-Scanner [ad#ad-2] Gradient-Scannerの使い方は簡単です。 まず、画像を「Browse」ボタンをクリックしてアップロードします。 ※画像は手元の画像だけでなく、URLでも指定できます。
Gradients By Jxperiment [ad#ad-2] ダウンロードできるグラデーション素材は、全部で54種類のグラデーションが揃っています。 下記はPhotoshop CS5にインストールしたものです。 Photoshopのキャプチャ ダウンロードは無料でできますが、ライセンスの明記がないため、特に商用利用の際には問い合わせをした方がいいかもしれません。 また、同作者のWeb 2.0用のグラデーション素材もあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://designmodo.com/wp-content/uploads/2012/05/Photoshop.jpg
