Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
「グラデーション」を1クリックでCSSとして出力できる【Blend】の使い心地がバツグン！
最近背景として大々的にグラデーションを使っているWebサイトを多く目にするようになってきました。以前SeleQtがご紹介した「2016年8月のWebデザイントレンドを振り返ろう！3つの最新トレンドの特徴とは？ 」でも、「グラデーションの復活」がトレンドとの1つに入っています。 さてそんなグラデーション表現なんですが、直観的に色を組み合わせてワンクリックでCSSで吐き出せたら便利だと思いませんか？ そんなことができてしまうのがこの【Blend】です。 使い方は説明するまでもないほどシンプル。 グラデーションに使いたい2色を選んで「Let’s Blend!」ボタンをクリックするだけ！ 色の選び方は直観的に色相から選ぶもよし、カラーコードを入力して色を指定するもよし、です。 そして「Let’s Blend!」ボタンをクリックして、CSSを吐き出した画面がこちらです。 CSSを吐き出すには画面右↑
写真やイラストをヴィンテージ風に仕上げる美しいグラデーション素材 -Vintage Lights
写真やイラストをヴィンテージ風に仕上げるPhotoshopの美しいグラデーション素材を紹介します。 通常は有料ですが今週末まで無料なので、この機会にダウンロードしておくのをオススメします。個人でも商用でもクライアントワークでも利用できます。 Vintage Lights Gradients Vintage Lights Gradientsには15種類のグラデーション素材が含まれており、レイヤーモードで「スクリーン」「オーバーレイ」「比較（明）」で重ねるとヴィンテージ風に簡単に仕上げることができます。
グラデーションのデザインはこれで決まり！Photoshop用グラデーションファイル50選
Photoshopでのデザイン作業で使えるお役立ちツールの一つにグラデーションファイルがあります。 グラデーションファイルとはその名の通りグラデーションが設定してあるもので、使いたい時に設定するだけでいつでも任意のグラデーションを適用できます。 作業時間を一気に短縮してくれるだけでなく、最適なカラーリングを確実にできるという点も大きなメリットです。 今回は、便利なグラデーションファイルを50個ピックアップしてご紹介します。 ホームページで使いやすいものからイラストに使えるものまで多様に揃っていますので、使えそうなものがあればぜひダウンロードしてみてはいかがでしょうか。 デザイン作業の効率化を上げる！Photoshop用グラデーションファイル50選 1.Candide Ps Gradients http://feniksas4.deviantart.com/art/Candide-Ps-Gr
[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS
aqua .bg-aqua-gradient { background: rgba(127,219,255,1); background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); } blue .bg-blue-gradient { background: rgba(0,116,217,1); background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); background: linea
![[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebba618dc6b777a167e6a6ec61d8756e3209bf80/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015093001.png)
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
美しいグラデーションが簡単に利用できる！グラデの種類が豊富に揃ったmixinとスタイルシートのまとめ -SuperGradient
垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描くmixinをまとめた「SuperGradient」を紹介します。 ↓4色を使った斜めのグラデーション、美しいですね！ SuperGradient SuperGradient -GitHub SuperGradientではグラデーションのタイプとカラー、そのカラーが始めるポイントを指定するだけで、簡単に美しいグラデーションが描けるSassのmixinがまとめられています。 下記に、そのmixinの使い方とスタイルシートでの記述も添えてみました。 Vertical, 2 colors 2色を使った垂直方向のグラデーション mixinの使い方 @include sgradient( $colors: ( (#31B7D7, 0%), (#EDAC7D, 100%) ) );
刮目しよう、心惹かれるグラデーション in Webデザイン｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 昨日は私が住んでいる地域で光化学スモッグ注意報が発令されました。 もう10年以上同じ地域に住んでいますが、おそらく初めての経験で、この先の真夏がどうなるか心配です…。 さて、webデザインギャラリーなどで紹介されているwebサイトを見ていて、ふと心惹かれるものがありました。それは美しいグラデーションです。 グラデーションと言っても幅がありすぎるのですが、中でも複数の色（色相）を組み合わせたグラデーションが非常に美しく感じられました。 なかなか説明しづらいので、実際にいくつかご紹介させて頂きます。 美しいグラデーションを使ったwebサイト https://www.circle.com/ メインビジュアルに限って言うと、背景の写真もとても綺麗なのですが、このタイトルとボタンの、水色→紫のグラデーションが美しいです。あたかも背景写真の陽の光が届いているかのよう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld
お探しのページはみつかりません - グノシー
少しずつ色が変わるグラデーション背景をCSSで作成出来る・「CSS GRADIENT ANIMATOR」