CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる
コーディング Kota Naito / 2017.07.20 CSS3のブレンドモードを使えば、簡単にオーバーレイ等の描画モードを指定できる PhotoshopやIllustratorなどのグラフィックツールに搭載されている、ブレンドモード(描画モード)と呼ばれる機能をご存知でしょうか。要素と要素を重ねあわせることで、様々な効果を作り出すことのできる機能なのですが、実はこのブレンドモード機能、CSSのみでも実装することができるんです。それを可能にするCSSプロパティがmix-blend-modeです。 非デザイナーだけど自社サイトの更新を任されているような方にとっては、大変便利なプロパティになるかと思います。オーバーレイ効果を使った簡単な合成画像を作るくらいであれば、わざわざ外注のデザイナーに任せなくても、自分でCSSを記述するだけで、簡単に合成画像を作れるはずです。 それでは、今回はこの
ブレンドモードのデモページ
背景画像の上に画像を重ねる 通常 ブレンドモードを利用せず、海辺の画像の上に、透過PINGのロゴ画像をシンプルに重ねています。
シェアされるシェアボタンとは。CSSだけで作られた12のオリジナルレスポンシブシェアボタン【無料ダウンロード】
トップページ FIT BLOG コーディング シェアされるシェアボタンとは。CSSだけで作られた12のオリジナルレスポンシブシェアボタン【無料ダウンロード】 コーディング Kota Naito / 2018.03.09 シェアされるシェアボタンとは。CSSだけで作られた12のオリジナルレスポンシブシェアボタン【無料ダウンロード】 ソーシャルメディアでのシェアは、そのサイトの人気を左右する非常に重要な要素であることは多くの方が認識していることだと思います。だからこそ多くのWEBページにはシェアボタンが設置されているわけですが、シェアボタンのデザイン・配置位置の違いで、クリック率(シェア率)が変化することを意識している方はそう多くはないのではないでしょうか。ただなんとなくサイトのデザインにマッチしているからという理由でシェアボタンを設置しているなら、もしかすると、この記事にある通りに配置やデザ
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
