opacityを下げる。透明から黒へのグラデーションを加える(親の上部中央にある擬似要素のエッジを非表示にするため)。最終のコード最終のコードは、下記の通りです。skewY(2deg);}疑似要素の:beforeと:afterにskewYに入れ替えると、また違ったシャドウを実装できます。skewYに入れ替えたエフェクト実際のデモは、下記ページでご覧ください。CodePen.:afterと:beforeのどちらを使うべきか私は最近Twitterの議論で、:afterではなく:beforeを使用する方が良いということを学びました。してでしょう?なぜなら、:afterを使用した場合は疑似要素が他のネストされた要素と重ならないようにz-indexを他のネストされた要素に追加する必要があるかもしれないからです。実際の例を見てましょう。サムネイルとタイトルで構成されたシンプルなカードです。テキストの下にはグラデーションオーバーレイがあり、サムネイルの画像が明るすぎる場合でもテキストが見やすくなります。サムネイルとタイトルで構成されたシンプルなカードHTMLは非常にシンプルです。here</h2></article>タイトルの下にオーバーレイを追加するには、疑似要素を使用する必要があります。両方の例を見てましょう。:afterを使用した場合:afterを使用した場合は、タイトルは下記のように擬似要素オーバーレイの下に表示されます。タイトルがオーバーレイの下に表示されてしまうこれを解決するには、タイトルにz-indexを加えます。簡単で迅速な解決策ですが、それは正しい方法ではありません。1;}:beforeを使用した場合:beforeを使用した場合は、デフォルトで機能します。タイトルにz-indexを加える必要はありません。これが機能する理由は、:beforeを使用すると他の兄弟要素の上には表示されませんが、:afterだと表示されてしまうからです。実際のデモは、下記ページでご覧ください。CodePen.ファイル拡張子を元にリンクのスタイル設定このテクニックは例えば、PDFファイルへのリンクがある場合はPDFアイコンを表示して、ユーザーに分かりやすくすることができます。その実装方法を見てましょう。3px;}これで、.pdfへのリンクにはPDFアイコンを、.docへのリンクにはDOCアイコンを表示します。実際のデモは、下記ページでご覧ください。「or」の両側にラインを引いた区切り線です、これは疑似要素とFlexboxを使用して簡単に実装できます。実装は非常にシンプルです。10px;}実際のデモは、下記ページでご覧ください。CodePen.アップデートこの実装方法より、よい方法があります。ZirkelのTwitterで指摘され、<hr>を使用する方がよいことが分かりました。実際のコードは、下記のデモをご覧ください。CodePen.終わりにこれで終了です。コメントや提案があれば、@shadeed9に送ってください。Posts関連記事が見つかりませんでした。WordPress当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。