目次
CSS Shape-Outsideプロパティは、テキストフェージング効果を実現します
ホームページ ウェブフロントエンド CSSチュートリアル CSSのShape-Outside属性を使用して、テキストを徐々に短縮するディスプレイ効果を実現する方法は?

CSSのShape-Outside属性を使用して、テキストを徐々に短縮するディスプレイ効果を実現する方法は?

Apr 05, 2025 pm 10:54 PM
css ai

CSSのShape-Outside属性を使用して、テキストを徐々に短縮するディスプレイ効果を実現する方法は?

CSS Shape-Outsideプロパティは、テキストフェージング効果を実現します

この記事では、一意のWebページのテキスト表示手法を紹介します。テキストの長さを徐々に短くし、創造的なWebページやアートディスプレイに非常に適した動的な視覚効果を作成します。

これは、CSSのshape-outsideプロパティを通じて実現できます。 shape-outside使用すると、テキストが囲む非長方形の形状を定義し、テキストフェージングの視覚効果をもたらすことができます。

次の例はshape-outsideを使用してこれを達成する方法を示しています。

 。容器 {
  幅:300px;
  高さ:300px;
  位置:相対;
}

。形 {
  幅:100%;
  高さ:100%;
  バックグラウンドカラー:#f0f0f0;
  クリップパス:ポリゴン(0 0、100%0、100%100%、0 100%); /*調整可能な形状*/
  シェイプアウトサイド:ポリゴン(0 0、100%0、100%100%、0 100%); /*クリップパスと一致する*/
  フロート:左;
}

。文章 {
  マージン左:30px;
  フォントサイズ:18px;
}
<div class="container">
  <div class="shape"></div>
  <div class="text">
    これは、徐々に長さが短くなるサンプルテキストです。これは、徐々に長さが短くなるサンプルテキストです。
  </div>
</div>

コードでは、 clip-pathshape-outside属性がポリゴンの形状を共同で定義します。ポリゴンの頂点座標を変更することにより、テキストラッピングの形状を調整して、テキストフェージングの効果を制御できます。 shape-outsideの値は、効果の精度を確保するためにclip-pathと一致する必要があることに注意する必要があります。

この効果をより深く調査するために、 polygonの座標値を変更してさまざまな形状を作成して、さまざまなテキストフェージング効果を実現してみてください。たとえば、より豊かな視覚効果のために、サークルや曲線などのより複雑な形状を使用してみることができます。重要なのは、 polygon値を調整して形状を制御することであり、テキストの表示方法を制御することです。

以上がCSSのShape-Outside属性を使用して、テキストを徐々に短縮するディスプレイ効果を実現する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Stock Market GPT

Stock Market GPT

AIを活用した投資調査により賢明な意思決定を実現

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

ホットトピック

Huawei Harmonyos 6システムは「次の」接尾辞をキャンセルします。 Huawei Harmonyos 6システムは「次の」接尾辞をキャンセルします。 Sep 24, 2025 pm 04:12 PM

9月18日の最新ニュースであるHuawei Harmonyos6は、開発者向けに複数のラウンドのプレビューバージョンプッシュを開始し、最近、初めて試した一部のユーザーに経験資格を開きました。ユーザーのフィードバックによると、現在のシステム名は「次の」サフィックスを表示しなくなり、HarmonyOs6.0に正式に名前が変更されています。 Huaweiは、2023年8月の開発者会議で初めてHarmonyOsNextという名前を提案し、Hongmengシステムに新しい開発段階に入り、真のネイティブの自己開発を実現することを目指しています。 HarmonyOsNextの最もコアブレークスルーは、独立して開発された基礎となるシステムアーキテクチャを完全に採用し、LinuxカーネルとAndroid AOSPコードを完全に除去し、Harmonyosカーネルに基づいてアプリケーションのみを実行することです。

Windows 10システムで自動メンテナンスサービスを無効にする方法は? Windows 10システムで自動メンテナンスサービスを無効にする方法は? Sep 25, 2025 am 11:09 AM

Windows 10システムには自動メンテナンス機能が搭載されており、システムの更新やディスクの解体など、設定された時間に応じてシステム上のメンテナンスタスクを実行できます。デフォルトでは、Windows 10の自動メンテナンスが有効になっています。ただし、場合によっては、機器をより適切に制御するために、これらのメンテナンス操作を独自に管理することをお勧めします。それでは、Windows10の自動メンテナンスサービスをオフにするにはどうすればよいですか?次に、特定の手順を一緒に見てみましょう。誰にとっても役立つことを願っています。 Win10の自動メンテナンス機能を無効にする特定の方法は次のとおりです。ステップ1、WinとRキーを同時に押して、実行中のウィンドウを開きます。 Regeditに入った後、[OK]をクリックするか、Enterを押します。ステップ2:ユーザーアカウントコントロールが追加された場合

safari browser_safariブラウザによってすべてのクッキーをブロックする方法Cookies設定ガイドを完全に無効にする方法 safari browser_safariブラウザによってすべてのクッキーをブロックする方法Cookies設定ガイドを完全に無効にする方法 Sep 25, 2025 am 10:06 AM

最初にすべてのCookieを無効にすると、Safariプライバシー保護が強化されます。設定のプライバシータブでは、「すべてのCookieをブロックする」をチェックして、グローバルなシャットダウンを達成します。または、目に見えないブラウジングモードを使用して、クッキーストレージを一時的にブロックし、ウィンドウを閉じた後にデータを自動的にクリアします。また、既存のCookieのクリアを組み合わせて、ブロッキング関数を可能にして、歴史的および将来のCookie保持を完全に排除できます。

Win10ブルースクリーン:カーネル Win10ブルースクリーン:カーネル Sep 25, 2025 am 10:48 AM

誰もが、Windows 10には多くの種類のブルースクリーン現象があることを知っています。ブルースクリーンが発生すると、多くの人がそれに対処する方法を知らないことがよくあります。ブルースクリーンに表示されるコードのほとんどはあいまいで理解が困難であるため、多くのユーザーは混乱しており、自分で問題を解決するのが困難です。今日は、kernel_security_check_failureブルースクリーンコードを効果的に扱う方法について話しましょう。このブルースクリーンコードは通常、ドライバーに問題があることを示しており、最も一般的なエラーはネットワークカードとグラフィックドライバーです。カーネルセキュリティチェックフェイルブルースクリーンの理由は次のとおりです。ネットワークカードドライバーに互換性のある問題があります。グラフィックカードドライバーのバージョンは、一致していないか、破損していません。この状況に応じて、

空の要素を選択する方法:CSSの空の擬似クラス 空の要素を選択する方法:CSSの空の擬似クラス Sep 25, 2025 am 03:07 AM

The:emptypseudo-classselecteselementswithnocontentorchildren、nospacesorlinebreaks;前exapple、div:emptystylescompleteLemptydivs、およびcombiningitiTh ::

印刷時にヘッダーとフッターを削除するクロムブラウザを設定する方法_ページを印刷するときにヘッダーとフッターを非表示にする方法 印刷時にヘッダーとフッターを削除するクロムブラウザを設定する方法_ページを印刷するときにヘッダーとフッターを非表示にする方法 Sep 25, 2025 am 09:54 AM

1. Webページの印刷インターフェイスを開き、[その他の設定]をクリックして、「ヘッダーとフッター」をチェックして、自動的に追加されたURL、日付、その他の情報を削除します。 2。@mediaprint {@page {margin:0}}のCSSスタイルをWebページコードに追加することにより、デフォルトのマージンとヘッダーとフッターをクリアできます。 3.印刷コンテンツをより柔軟に編集し、デフォルトのヘッダーとフッターを無効にできるPrinteditなどのサードパーティ印刷拡張機能をインストールします。

起動時に複数のWebページに起動ページを複数のWebページに設定する方法 起動時に複数のWebページに起動ページを複数のWebページに設定する方法 Sep 25, 2025 am 10:15 AM

Chromeブラウザーを起動するときに、複数のWebページを自動的にロードするように起動ページを設定できます。まず、「設定スタートアップ」で「特定のWebページを開く」を選択し、「新しいWebページの追加」をクリックしてURLを入力して保存します。次に、ブックマークバーの「起動ページ」フォルダーに一般的なWebページを追加し、「新しいタブページですべてのブックマークを開く」でワンクリックで復元します。さらに、セッションを保存して「SessionBuddy」などの拡張機能をインストールし、スタートアップで指定されたページグループを自動的に復元して効率を向上させることもできます。

360ブラウザをIEカーネルに設定する方法は? 360ブラウザを使用するためにIE互換モードを強制する方法 360ブラウザをIEカーネルに設定する方法は? 360ブラウザを使用するためにIE互換モードを強制する方法 Sep 26, 2025 pm 12:27 PM

まず、IE互換モードに切り替えて、異常なWebディスプレイの問題を解決します。特定の操作には以下が含まれます。アドレスバー稲妻アイコンを介してカーネルを手動で切り替える。互換性モードリストにWebサイトを追加して、自動適応を実現します。または、特定のURLをIEカーネルの使用に強制するために、高度な設定でルールをカスタマイズして、互換性を向上させます。

See all articles