CSS3 で less のテキストの長い影を実装する
|
この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。詳細は次のとおりです。 質問 以下の効果を達成するには
主な知識ポイント CSS テキストシャドウレスのフォントシャドウ 構文内のループとマージコード <div class="long-shadow">豮艸芔茻</div>
.loop(@counter) の場合 (@counter > 0) {
.loop((@counter - 1));
テキストシャドウ+: (1px * @counter) (1px * @counter) #2d585a;
}
.long-shadow{
オーバーフロー: 非表示;
背景色: #5f9ea0;
幅:800ピクセル;
高さ: 160px;
行の高さ: 160px;
テキスト配置: 中央;
文字間隔: 80px;
色: #fff;
フォントサイズ: 100px;
.ループ(200);
}CSS3 で less のテキストの長い影を実装する方法についての記事はこれで終わりです。less のテキストの長い影に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Docker 階層化パッケージを使用して Spring Boot を設定する方法
>>: 初心者向けWebサイト構築ガイド⑥：FlashFXPの詳しい使い方
推薦する
JavaScriptの再帰の詳細
目次1. 再帰とは何ですか? 2. 再帰を使って数学の問題を解く1. 1 * 2 * 3 * 4 …...
小さなページングデザイン
ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...
CSS カウンターを使用して数字の順序付きリストを美しく表示する方法
Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できる...
Dockerを使用してMySQL 8.0をデプロイする方法の例
1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします（デフォ...
Vue.js $refs 使用例の説明
プロパティやイベントがあるにもかかわらず、JavaScript で子コンポーネントに直接アクセスする...
Vueを使用して手書き署名機能を実装する
個人的な実装のスクリーンショット:インストール： npm インストール vue-esign --sa...
React+Koa によるファイルアップロードの実装例
目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...
Ubuntu 20.04でAliソースを変更する方法
なお、この記事では、単に 20.04 ソースに変更する方法を説明するのではなく、20.04 に基づい...
CSS変数を使用して、クールで素晴らしいフローティング効果を実現します。
最近、Grover の Web サイトで楽しいホバー アニメーションを見つけ、自分自身のインスピレー...
React でカレンダー コンポーネントを構築するためのステップ バイ ステップ ガイド
目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...
単語のグループ化シーケンスと複数フィールドのグループ化のための MySQL グループ方法
ここで商品テーブルを作成しました。その中のデータを見てみましょう。 mysql> 商品から *...
JavaScriptとTypeScriptの関係
目次1. JavaScript とは何ですか? 2. JavaScript は何に使用されますか? ...
Vueのスロットの詳細な説明
Vue でのコードの再利用により、mixnis が提供されます。テンプレートの再利用により、スロット...
HTMLタグと基本要素の学習のまとめ
1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...
MySQL ストアド関数の詳細な紹介
目次1. ストアド関数を作成する2. ストアド関数の呼び出し3. 保存された関数を削除する4. スト...