CSS - BinaryDevelop

[CSSチュートリアル】SCSS50%スタイルコード削減のための14の実践レッスン

前書き SassはCSS3言語の拡張で、より良いスタイルシートをより少ない労力で書くことができ、重複した作業から解放され、よりクリエイティブな作業ができるようになります。変化をより早く受け入れることができるため、デザインの革新も敢行できるようになります。Sassの構文は比較的シンプルですが、難しいのは、Sassを実際のプロジェクトにどのように適用し、CSSのペインポイントを解決し、

2022-02-02 17:38:32
[CSSチュートリアル]スクロールバーを非表示にし、サンプルコードの内容をスクロールすることができますするCSS

プリアンブルページのhtml構造が多くのボックスを入れ子にしている場合、複数の縦スクロールバーを含むページになってしまうことがあります。これはページのスタイルに影響を与えるので、スクロールをサポートしながらスクロールバーを隠す必要があり、ここではcssを使用してそれを行う2つの方法を紹介します。方法1：スクロールバーの幅を計算し、非表示にする原理：外

2022-02-02 17:04:34
[CSSチュートリアル]cssに0.5pxの行を実装してモバイル互換の問題を解決する（推奨）

[コンテンツ]をクリックします。 <リンク <!--リンク 1. background-image gradient styleを使用する。 2. スケールの拡大縮小を使用することができます 3. 擬似要素にボーダーを設定する Insert the code snippet here<!DOCTYPE html> <html> <

2022-02-02 15:28:43
[css3]水平方向のプログレスバーの最後にテキストを表示するCSSコード

課題の説明作品では、次のような効果を得たいと考えています。ソリューションのアイデア divタグに相対位置を追加し、右端に絶対位置のabsoluteを使用します。 <div class="content"> <div class="bar first" style="width:100%"> <span>688&l

2022-02-02 14:08:12
[css3]CSS3アニメーションによるグラフィックドロップ効果

エフェクトの初見実装コード <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <di

2022-02-02 13:52:27
[CSSチュートリアル】CSS擬似クラス：empty makes my eyes shine（コード例）

最近、私がWeChatのアプレットプロジェクトを担当していることは、私の記事を読んでくださっている方ならご存知だと思いますが、その中でいろいろと面白いことや、"気まぐれ"に遭遇しています。この記事の背景は、ある朝、wxml ファイルを眺めていたら、大量の wx:if/else と hidden は、wx:ifによるパフォーマンスの問題はもちろんのこと、タグ上の冗長性もあり、急に煩わしくな

2022-02-02 13:42:49
[CSSチュートリアル]マウスをスライドさせてカードを浮かせるCSSの例

原理ホバーリング時に要素にシャドウ：box-shadowを設定し、通常とは異なる見え方をさせる。ボックスシャドウの表現については MDN : /* x-offset | y-offset | shadow-color */ box-shadow: 60px -16px teal; /* x-offset | y-offset | shadow-blur ra

2022-02-02 13:17:36
[CSSチュートリアル】画面全体に広がるアダプティブな高さを実現するCSS

自分でデモを書く過程で、display:flexを使って垂直方向の中央寄せを実現したいと思い、以下のコードを書きました。 <style> #login{ width:100%; height: 100%; display: flex; justify-content: center; al

2022-02-02 12:12:50
[CSSチュートリアル】CSS clear float clear:both サンプルコード

今日はクリアフロートについて説明します。クリアフロートについて説明する前に、フロートとは何かを理解する必要があります。フロートはまた、ドキュメントフローのうち、親の幅と高さがサブセットで支柱することはできませんので、我々はフロートをクリアする必要があること、ドキュメントフローのうち、として知られている、これ以上説明せずに、我々はコードに。 <!DOCTYPE html>

2022-02-02 11:12:31
[CSSチュートリアル】ホバードロップダウンメニュー方式を実現するCSS

いつものように今日は、マウスがボタンに移動すると自動的にドロップダウンメニューを表示する、とても便利なcss効果についてお話します。その効果は以下の通りです。非常にシンプルで小さなデモで、以下の手順で実装されています。まず、ボタンを包む大きな div と、その下にある 2 つの要素のスタイルを設定するリンクグループを定義します。リンクグループは、各パーツのホバー効

2022-02-02 09:30:11
[css3]CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実装する。

最近、あるプロジェクトを進めていて、CSS3のアニメーション技術をほとんど使っていないことに気がつきました。  表示  その  なし  と  ブロックまたは  視認性  の  隠された  と  可視  を使って制御します。そこで、最近のプ

2022-02-02 09:22:07
[CSSチュートリアル]overflow:autoの使い方解説

本文に入る前に、オーバーフローとフレックスレイアウトの使い方を紹介します。 overflow: auto; コンテンツが切り取られている場合、ブラウザは残りのコンテンツを見るためにスクロールバーを表示します。フレックスでのプロパティ display: フレックス。 flex-direction: column; スピンドルは上端を起点に垂直方向です。オーバーフローとフレ

2022-02-02 08:50:14
[css3]CSS3ベジェ曲線サンプル：リンクホバーアニメーション効果の作成

CSS3アニメーショントランジションを使って、リンクにマウスを乗せると小さなポップアップボックスが現れるという、シンプルながら説得力のあるリンクホバー効果を作ってみましょう。また、CSS3 Cubic-Bezier曲線も見ていきます。これは、硬い機械的な動きではなく、ポップアップボックスに滑らかな動きを提供するCSSトランジションです。これが最終的な結果です。さあ

2022-02-02 07:57:47
[CSSレイアウト例】等間隔の四角形で完璧なページレイアウトを実現する方法

代表的なレイアウト例上図のレイアウトでは、四角の間に隙間があり、その隙間は固定されています。レイアウトが完成したときに、素早く要素を追加してもレイアウトが維持されるようにするには、例えばどのようにすれば完璧でしょうか。そして、2行目が表示されても、レイアウトに影響を与えないようにすることができます。中身はあまり変えなくていいのです。幅を100%に設定し、ブロッ

2022-02-02 06:47:29
[CSSチュートリアル】BlazorでCSSを分離する

1. 環境について VS 2019 16.9.0 プレビュー 1.0 net sdk 5.0.100 2. 前書き CSSは一度有効になると、グローバルに適用されるため、コンフリクトが発生しやすくなります。この問題を解決するためにCSSアイソレーションが生まれました。blazorは2018年に生まれ、もう2年以上経っていますが、CSSアイソレーションは.NET 5

2022-02-02 06:42:39
[css3]CSS3の画像ボーダーを学ぶための記事

CSS3のborder-imageプロパティを使用すると、要素の周囲に画像の枠線を設定することができます。 I. ブラウザのサポート表中の数字は、その属性を完全にサポートする最初のブラウザのバージョンを指定します。数字の後に-webkit-または-moz-を付けると、使用時に接頭辞を指定する必要があります。 II. CSS3 border-imag

2022-02-02 06:36:39
[CSSチュートリアル】テーブルの最大幅と最小幅の相性問題と解決策を解説

テーブルのmin-widthとmax-widthのプロパティを設定する <table> <tr><td>1</td><td>2</td></tr> </table> table{min-width:60%;min-width:100%;} しかし、クロームはmax-widthに

2022-02-02 06:14:13
[CSSチュートリアル]アダプティブスクエアを実現するCSSの例

従来の正方形の書き方は、以下のように長さ＝幅を直接固定値で書いていました。 .box{ width: 200px; height: 200px; background: pink; color: #666; } しかし、モバイルデザインではモバイル端末によって画像の幅が変わるケースが多いため、アダプティブスクエアの実装が必要です。ここでは、よりシン

2022-02-02 06:09:11
[CSSチュートリアル】CSSを使ってボックスの水平・垂直方向の中央寄せを実現（全8種）

オリジナルのコードです。 center.html : <!DOCTYPE html> <html lang="Zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

2022-02-02 04:55:26
[css3]css3 elastic box flexによる3カラムレイアウトの実装。

タイトル通り：高さ既知、左右カラム幅300px、真ん中適応型。エラスティックボックス自体は横並びになっているので、幅を設定します。 3列をコンテナコンテナで包み、コンテナコンテナのdisplayプロパティをflexに設定し、左右の列の幅を300pxに設定し、中列にflex:1を設定します、1は幅の比率を意味し、正確な値は他のボックスのflex値に依存し、ここでは他のボックスの幅は固

2022-02-02 04:39:12

最新

おすすめ