CSSのmix-blend-mode完全に理解したい - freee Developers Hub
こんにちは、デザイナーだけどFigmaよりTypeScriptを触っている時間のほうが長いid:ymrl です。 この記事はfreee Developers Advent Calendarの2日目です。 CSSの mix-blend-mode 、なんだかカッコいい見た目のものを作るのに便利そうとずっと思っていたものの、 mix-blend-mode に何を指定したらどうなるのか想像しづらく、私は「当てずっぽうでいろんな値を入れてみていい感じになったのを使う」みたいな状態でずっと誤魔化していました。 なにせ MDNのmix-blend-modeのページに載っているサンプルがこれですよ。 MDNに載っているサンプル（MDNのmix-blend-modeのページより引用） これだけ見てもよくわからない！ ということで、それぞれの blend-mode の値のときの色の計算方法を調べて、自分で計算
CSSで画像をハーフトーン（網点）に加工する
2022年10月19日 CSS 画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ ↑私が10年以上利用している会計ソフト！ グラフィックツールを使わず、CSSだけでひとつの画像をこんな感じに加工してみます。 1. 画像をdivに入れておく まずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt=""> </div> 2. CSSで水玉模様を作成 「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーシ
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
ビフォーとアフターの画像を比較するビューワーを実装できる軽量スクリプト -Image Compare Viewer
ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できるスクリプトを紹介します。バニラJavaScriptで実装されており、他のスクリプトへの依存は一切ないので、利用しやすいと思います。 この手のスクリプトは今までにいくつか紹介してきましたが、今回のが一番いいかもしれません。 Image Compare Viewer Image Compare Viewer -GitHub Image Compare Viewerの特徴 Image Compare Viewerのデモ Image Compare Viewerの使い方 Image Compare Viewerの特徴 Image Compare Viewerは、ビフォーとアフターの画像をスライドして比較するビューワーを簡単に実装できます。 ということで、さっそく実装してみました。 中央のコントローラーをスラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
