素晴らしい結果を伴う珍しいアイデア – Codepen

SVG短絡

SVGは通常、かなり効率的なファイル形式です。画像が本質的にベクトルである場合、ベクトルとしてそれを残すことは通常、スケールを好むようになり、かなりくだれのクリップに見えるので、良い計画です。しかし、もちろん、それは依存します。超複雑なベクトルグラフィックは巨大になる可能性があり、ラスター（すなわちJPG、PNGなど）バージョンは実際には小さくなります。これは、まっすぐな量のピクセルがかなり効率的な小さな画像でも発生する可能性があります。

これは、コンピューターが得意なようなものでなければなりませんよね？あなたがひっくり返っているならあなたは幸運です。 Zachは画像コンポーネントが110のためにできることについて書きました SVG短絡。アイデアは、あなたの場合です ソース 画像はSVGであり、効率に役立つラスターバージョンを作成できます。ただし、SVGバージョンが他の生成されたバージョンよりも小さくなった場合、ラスターバージョンを破棄します。

ディスレクシアに役立つ見栄えの良いフォント

知る価値：

によると 国際ディスレクシア協会、米国の人口の15〜20％がディスレクシアの症状を持っている可能性があります。これらには、ゆっくりと不正確な読み物、スペルの弱い、執筆不良が含まれます。

ジルスタック

また、知る価値もあります：これらの人々、そして本当におそらく 誰でも 一緒に助けることができます より良い書体。 つまり、ディスレクシアの人々にとって混乱が少なく問題が少ないように設計された書体です。

私は以前にディスレクシーを見たことがありますが、それはかなりきれいです。しかし、率直に言って、それは幼稚に見えますが、ブランドの声がもっと真剣に見える必要があるときにそれを厳しい選択にするかもしれません。安っぽいトレードオフですが、それは人生です。

見たばかりです オリバ・キングの包括的サンズ 私の目には、それは非常に見栄えがよく、ソフィー・ビエルによって排出された一般的な基準をカバーしています 読みやすいための設計。

1. I、L、1の明確な区別
2. 文字D、B、Q、およびPの非誤り
3. Oと0の区別
4. c、o、a、eのより広く、より開かれたカウンターフォーム
5. 小さなサイズで読みやすくするためのX-Heightが高い
6. より広いデフォルトの文字間隔
7. 資本の高さとアセンダーの高さの明確な違い

＃2がどのように処理されるかを見てください：

あなたが私に尋ねるならば、超上品。私はそれを何かのために使いたいです。ボディコピーサイズがどれほどよく見えるかを興奮させています。

マスクとしてのHTML要素

マスクの大部分は、黒/白の形状であるため、その形でそれらの背後にあるものを隠すか明らかにします。または勾配であるため、彼らは彼らの背後にあるものを少しずつフェードアウトします。

ArturBieńには別のアイデアがあります マスクの可能性：任意のHTML要素。シンプルでクレバーSVGフィルターをセットアップして、すべて黒を除外できます。

遊びをするためだけに自分で簡単なショットを与えました そして、それはうまくいきました。

あなたがお互いの上に物事を重ねて、奇妙でクールな結果を得るためにエキゾチックなフィルタリングをしていることを考えて準備ができているので、あなたはこの次のものの準備ができています。

ハビエルボルケス： 主にCSSによる動き抽出。

あなたがあるものだけがあるビデオを見たかったとします 動く 見えるで、残りは本質的に黒く塗られています。なぜ？その部分についてあまりにも一生懸命考えないとは知りません。たぶん、それはセキュリティビデオの変更を簡単に見つける方法です。または、おそらくそれは本当にクールな最終効果です。

それを成し遂げるには、洗練されたビデオ処理技術が含まれると思います。しかし、いや：CSS。トリックはとても完璧です：

1つのビデオがもう1つのビデオの上に配置され、少し先に再生されます。次に、トップビデオをスタイリングすることによって mix-blend-mode: difference CSSでは、2つのフレーム間で変更されたピクセルのみが表示されます。

とてもかっこいい。それは私がしばらく見た私のお気に入りのトリックです。

単一要素勾配境界

実際、私はゾーンに正しい別のトリックがあり、最後の2つのトリックもあります。 非常に いいね。グラデーションの境界の外観が今かなり暑いことを認めなければなりません。

それをやってのける方法はたくさんありますが、通常、複数の積み重ねられた要素と、きちんとした策略や制限が含まれます。上記は単なる要素であり、要素の本体で何をしたいかについてもあなたがどのように制限されていないかを示しています（そこを使用して backdrop-blur）。

ベン・フレーンは、彼が見つけたトリックを文書化しています FreeCodecampフォーラムで。主な要素に擬似要素を平手打ちして境界線を作成し、本質的に中央の穴をノックアウトします。

これが私が今まで見たことのない賢いビットです。次に、マスクとマスクコンポジットを使用します。これにより、勾配の境界線が住む「形」を作成できます。この形状を作成するには、2つの画像を合わせて違いを見つける必要があります。それは多くの作業のように聞こえるかもしれませんが、線形勾配を使用してCSSを使用してこれら2つの画像を作成できます。線形勾配が実際にはフラットな白色であることは関係ありません。線形勾配として定義されているという事実は、ブラウザがその表記の結果を画像としてレンダリングし、画像を構成できることを意味します。したがって、最初のマスクは、 padding-box、その後、これには境界線が重要ではなく、2番目の勾配はフルサイズであり、それらの違いは境界線の形です。天才！！！！

本当に天才。