CSSで背景グラデーション+アニメーションで変化する背景色を実装してみよう！ | WebLifeTimes
最近では鮮やかなグラデーションを背景などに採用するというのが1つのトレンドになっていますよね。単色の背景では味気ないと感じた時などに試してみるとインパクトを加えることができるのでオススメです。 CSS3からグラデーションをCSSのみで表現できることができるようになったこともあり積極的にと入れる価値があると思います。また、アニメーションも合わせることでより目を引く背景をつくることが可能です。 それでは、CSSのbackgroundプロパティのlinear-gradientとanimationを利用して背景グラデーション+アニメーションを実装していきましょう！ 背景グラデーションをCSSで実装する方法 背景をグラデーションにするにはbackgroundプロパティにliner-gradient関数を設定します。 background: linear-gradient(#FFB3E7,#FF54C
Granim.jsでグラデーションをアニメーション表示してWebサイトをリッチにしよう - Qiita
GitHubでトレンド入りしているJavaScriptライブラリGranim.jsの紹介記事です。 デモ画面が用意されているのでどんなのか見てみてください。 ※執筆時点（2016/09/15）のバージョンはv1.0.5です。 公開されて間もないため、かなりの頻度で更新されています。 バグフィックスや機能追加等の変更が入ると思います。 使い方 基本的にはデモ画面やAPIを見てください。 本記事ではそこを見ても分かりづらかった点を記載していきます。 ライブラリはzipをダウンロードした方が手軽です。（npmでも提供されています） https://github.com/sarcadass/granim.js/releases 上記から最新版を落としておきます。 最小構成は以下の様になります。 <canvas>タグを用意 granim.jsを読み込む new Granim({});でグラデーション
CSSブレンドモードで画像を彩ろう
2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;
デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ
iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー１：現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか？ 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」（＝影）の基本ルールです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Grad3
CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor
新着記事
