ホームページ ウェブフロントエンド htmlチュートリアル 【CSS上級】擬似要素の使い方の素晴らしさと単一タグの美しさ_html/css_WEB-ITnose

【CSS上級】擬似要素の使い方の素晴らしさと単一タグの美しさ_html/css_WEB-ITnose

Jun 24, 2016 am 11:17 AM

最近、傑作「CSS SECRET」(CSS Revealed) を研究しており、CSS についての理解が深まり、次のプロジェクトに取り組んでいます:

CSS3 Wonderful Ideas - Demo (Chrome ブラウザを使用してください) を開きます。一見の価値は十分にあります)。単一のラベルを使用してさまざまなパターンが完成しますが、その多くはこの記事に関連します。

また、これが良いと思った学生が私の Github: CSS3 Wonderful Ideas にスターを付けてくれることを願っています。

本文はここからです。この記事では、主に疑似要素の前後のさまざまな使い方について説明します。

:before と ::before の違い

具体的な使い方を紹介する前に、疑似クラスと疑似要素について簡単に紹介しましょう。疑似クラスについては誰もがよく耳にしますが、実際には、CSS ではこの 2 つを区別しています。

時々、疑似クラス要素が 1 つのコロン (:) ではなく 2 つのコロン (::) を使用していることがわかります。これは、CSS3 仕様の要件の一部であり、疑似クラスと疑似クラスを区別することです。ほとんどのブラウザでは、プロセッサは両方の表現をサポートしています。

#id:after{ ...}#id::after{ ...}
ログイン後にコピー

CSS3 疑似クラスには単一コロン (:) が使用され、CSS3 疑似要素には二重コロン (::) が使用されます。 :before などの CSS2 の既存の疑似要素の場合、::before の単一コロンと二重コロンの記述方法は同じ効果があります。

そのため、Webkit、Firefox、Opera、およびその他のブラウザとの互換性のみが必要な Web サイトの場合は、疑似要素に二重コロンの記述を使用することをお勧めします。IE ブラウザとの互換性が必要な場合は、使用する方が安全です。 CSS2のシングルコロン記述。

より具体的な情報については、MDN の擬似クラスと擬似要素の理解を確認してください。

この記事の主役は、前後の疑似要素です。この 2 つの疑似要素の魅力について、以下で詳しく説明します。

フロートをクリアするには after を使用します

これはおそらくフロントエンドユーザーには、詳細な説明がなくてもページのフロートをクリアするために after 疑似要素を使用することが知られています。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }
ログイン後にコピー

疑似要素とCSSスプライト スプライト写真

これも古い姿勢です。スプライト画像については誰もがよく知っているはずですが、http リクエストを減らすために、複数の画像アイコンを 1 つの画像に結合することで、多くの Web サイトでスプライト画像に対する大きな需要が依然としてあります。

しかし、スプライト画像を作成する過程や、現在多くのパッケージングツールによって自動生成されるスプライト画像では、各アイコンにどれだけのマージンを確保する必要があるかという問題があります。下の図を見てください:

-->

たとえば、上記の状況では (ボタンのアイコンがスプライト画像を使用していると仮定します)、製品はボタンを突然左の状態から状態に変更する必要があります。ある日、右にあるので、スプライト画像は元々プリセットされていました。左のマージンが明らかに十分ではなく、ボタン内に他のグラフィックが表示されてしまいます。

そして、私たちは通常、小さなアイコンに余分なラベルを追加しません(意味論的ではありません)。

通常、この状況でスプライト画像を使用する必要がある場合は、ボタンに擬似要素を設定し、擬似要素の高さと幅を元のアイコンのサイズに設定してから、絶対位置を使用して位置を特定します。必要な場所に配置すると、スプライトに関係なく、画像内の各アイコンの余白がどのようなものであっても、完全に適合させることができます。

単一の色でボタンのホバーとアクティブの明暗の変化を実現します

最近のプロジェクトでは、さまざまなビジネス シナリオに従って、操作でボタンの異なる背景色の値を構成する必要があります。しかし、ボタンには通常、通常状態、ホバー状態、アクティブ状態の 3 つの色の値があることがわかっています。通常、ホバー状態は元の色よりわずかに明るく、アクティブ状態はわずかに暗くなります。

それは次のようになります (下の図):

操作する生徒の負担を軽減するために、ボタンが追従するようにホバー色とアクティブな色を設定せずに、背景色を 1 つだけ設定するにはどうすればよいですか?変更。はい、前後の 2 つの疑似要素を使用して実行できます。

色についてのちょっとした知識

色の値についてのちょっとした知識をご紹介します。 #fff、rgb(255,255,255)、HSL (HSV) に加えて、私たちは色の表現に精通しています。

HSL を例に挙げます。これは、円筒座標系での RGB カラー モデルの点の表現です。 HSLは色相、彩度、明度(英語:Hue、Saturation、Lightness)の略です。

HSL を使用して表現された色の場合、L (明るさ) の値を変更するだけで、より明るい色またはより暗い色を得ることができます。

もちろん、明るさの変更は透明レイヤーを重ねることで実現できます。ここでは、擬似要素を使用してボタンの背景色を変更することは、半透明レイヤーを重ねることによって実現されます。

简单来说,在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色。(这句话不是很严谨,假设一个元素是纯白元素,叠加白色半透明层也是不会更亮的)

反之,在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。

所以,我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2),在 .btn:hover:before 时显示,用 after 伪元素生成一个与按钮大小一致的白色半透明层 rgba(255,255,255,.2),在 .btn:active:before 时显示,就可以做到只配置一个背景底色,实现 hover 、active 的时的明暗变化。

.pesudo:before{  position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index:-1;  background:rgba(0,0,0,.1);}.pesudo:hover:before{  content:"";}.pesudo:after{  position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index:-1;  background:rgba(255,255,255,.2);}.pesudo:active:after{  content:"";}
ログイン後にコピー

戳我看demo 。

变形恢复

有的时候,设计师们希望通过一些比较特殊的几何图形,表达不同的意思。

用 CSS3 transfrom 属性,我们可以轻松的得到一个梯形,菱形或者平行四边形。有时我们设计师们希望在这些容器内配上文字,譬如平行四边形可以表达一种速度之感。

但是如上图所示,内容文字也会跟着 CSS3 变换一起发生了扭曲,通常我们会用一个 div 做背景进行变换,而文字则是放在另外一个 div 中。

但是运用伪元素,我们可以去掉这些不合语义化多余的标签,运用 before 伪元素,将 CSS3 变换作用于伪元素上,这样变形不会作用于位于 div 上的的文字,而且没有使用多余的标签。

戳我看demo 。

伪元素实现换行

大家都知道,块级元素在不脱离正常布局流的情况下是会自动换行,而行级元素则不会自动换行。

但在项目中,有需求是需要让行级元素也自动换行的,通常这种情况,我都是用
换行标签解决。而 《CSS SECRET》 中对
标签的描述是,这种方法不仅在可维护性方面是一种糟糕的实践,而且污染了结构层的代码。
,想想自己敲代码以来,用的
标签还不少。

运用 after 伪元素,可以有一种非常优雅的解决方案:

.inline-element::after{    content: "\A";    white-space: pre;}
ログイン後にコピー

通过给元素的 after 伪元素添加 content 为 "\A" 的值。这里 \A 是什么呢?

有一个 Unicode 字符是专门代表换行符的:0x000A 。 在 CSS 中,这个字符可以写作 "\000A", 或简化为 "\A"。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。

而 white-space: pre; 的作用是保留元素后面的空白符和换行符,结合两者,就可以轻松实现在块级元素末尾实现换行。

原文Demo。

 

   more magic -- 单标签图案

上面介绍的是伪元素众多用法的一部分,伪元素的作用远不止于此。有了before 、after 两个伪元素。一个标签其实可以相当于 3 个标签来使用,而配合 CSS3 强大的 3D 变换、多重背景,多重阴影等手段,让单标签作画成为了可能,下面是我仅用单个标签,实现的一些动画效果:

单标签实现浏览器图标:

 

单标签天气图标:

CSS3奇思妙想,采用单标签完成各种图案 -- Demo (请用 Chrome 浏览器打开,非常值得一看)。

也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 。

 

 

希望这篇文章对大家有所帮助,尤其是在对问题解决的思维层面上。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有帮助,请点下推荐,写文章不容易。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

See all articles