CSS - BinaryDevelop

[CSSチュートリアル]適応的な幅と高さの矩形の16:9の例を達成するためのCSS

先ほど、適応的な幅：高さが1：1の正方形を作る方法についてお話しました https://www.jb51.net/css/753385.html それでは、アダプティブな16:9の矩形を作るために必要なことを説明します。まず最初に高さを計算します。横幅を100％とすると、高さはh=9/16=56.25%になります。第二段階は、先ほどの set-padding-bo

2022-02-02 04:22:28
[CSSチュートリアル】オーバーフロースクロールでスクロールの詰まりを解消する

プリアンブル divやモジュールにoverflow: scroll属性を使用すると、iOSの携帯電話で表示したときに、大きな吃音が発生することがあります。しかし、アンドロイドスマホでは、この問題は発生しません。ワークアラウンドこのコードの行はハードウェアアクセラレーション機能を有効にするため、スワイプがスムーズに行われます。この方法は、ios5.0 と an

2022-02-02 03:51:47
[CSSチュートリアル】ピュアCSS3による水平無限スクロールのサンプルコード

この記事の例はアプレットで書かれていますが、実現する機能には影響ありません。 wxml 画像の入ったボックスをもう一回コピーして、ループしている画像の最初と最後をつなげます。 <view class="scrollbox dis-flex"> <view class="imgItem dis-flex" style="animation: {{comp

2022-02-02 02:29:45
原理を説明するためにいくつかの方法の虫眼鏡効果の模倣で[css3]css3

なぜ、記事のタイトルが「偽物の虫眼鏡」なのですか？なぜなら、私が今日言おうとしていることは、一般的にそうであるように、大きな部分画像のポップアップの隣にマウスが移動したとき、それは書きやすく、あまり技術がない（親要素（または言う：元の画像）の相対位置決めと、大きな部分画像（目的：それは元の画像の隣の位置にあるように）の絶対位置決めと、CSSコントロールスタイルとマウスイベントリスナーの横に

2022-02-02 02:04:35
[CSSチュートリアル]css transform ページめくりアニメーションの記録

ページめくり問題シナリオ BとCが同じページ（表と裏）にある Aをページオーバーしようとすると、BとCはAを上書きしてDを表示するために両方をページオーバーする必要があります。 BとCは同じボックスには書けませんエラーの例 <div class="pagesBox A"></div> <div class="pages

2022-02-01 11:54:50
[CSSチュートリアル]CSSのボーダーの半分または部分的に見えるコードは、ボーダーを達成するために

1. 擬似クラスを使ってボーダーを半分見えるようにする Concepts String buffers, buffers are used to store data, so they are also called containers. The principle of string composition is implemented by this class. (Used fo

2022-02-01 11:14:57
[CSSチュートリアル】大きな画像や情報を小さなドロップダウンで実現するCSS

今日はタオバオや京東などのショッピングモールでよく使われている、小さな写真にカーソルを合わせると大きな写真や情報が表示されるcssの効果についてお話します。できれば、シャドウやディレイ効果なども設定できると思うので、よかったら過去のcssエフェクトの例もチェックしてみてくださいデザインのアイデアも非常にシンプルで、最初に下の大きな絵を隠しておいて、小さな絵がホバー

2022-02-01 06:53:34
[CSSチュートリアル]実装ステップの吸引上部と下部のH5レイアウトのための純粋なCSSソリューション

の製品について何を言及すべきかを考える。私は最近、正確には反復的な要件を作りました。ユーザーがマーケティングの変化をよりよく観察できるように、ヘッダーの概要（以下のようなもの）を追加し、物語の冒頭を静かにレイアウトしたのです。以前は、このページはレビューの一覧（読み込み可能）だけで、一覧のヘッダーはデータを見やすくするために固定レイアウトになっていました。しかし、この概要を追加し

2022-01-27 20:47:18
[Web標準チュートリアル】html5+CSS3コーディング規約

黄金律何人が同じプロジェクトに参加しても、すべてのコードが同じ人によって書かれたように見えるようにすること。シンタックス 1. タブを空白2文字に置き換える - これが、すべての環境で一貫した表示を確保する唯一の方法です。 2. ネストされた要素は1回インデントする（つまり空白2つ）。 3. 3. 属性の定義には、必ず二重引用符を使用し、一重引用符は使用しないでくだ

2022-01-27 19:56:27
cssにおけるpx, em, rem, ptの特徴や違い、変換の詳細について

コンセプトの紹介 : 1. px（ピクセル、画素）。は、仮想の長さの単位であり、デジタル画像の長さの単位のコンピュータシステムであり、もしpxは物理的な長さに変換するには、精度DPI（インチあたりのドット、インチあたりのピクセル数）、スキャンや印刷で指定する必要があります一般的にDPIオプションを持っています。96dpiは、Windowsシステムのデフォルトであり、App

2022-01-27 06:45:25
[CSSチュートリアル】CSS複合セレクタの具体的な使用方法

交差点セレクタ交差点セレクタは、2つのセレクタを直接つなげたもので、最初のセレクタは要素セレクタ、2番目のセレクタはクラスセレクタまたはIDセレクタでなければならず、2つのセレクタはスペースなしで連続的に記述しなければなりません。交差セレクタで選択される要素は、第一セレクタで指定された要素タイプであり、その要素に第二セレクタに対応するID名またはクラス名が含まれていなければならない

2022-01-27 06:40:23
[CSSチュートリアル]ドラッグ＆ドロップ効果を実現するピュアCSSコード

想像力を働かせて、CSSでもドラッグ＆ドロップ効果を実現することができます。 I. ドラッグ＆ドロップ効果の例これは、以下のStarting.com [1]のタッチスクリーン版のように、長押しでドラッグできるモバイルでは非常に一般的なエフェクトです。このような効果は、JSでも簡単に実現できます。ただ、計算が少し多くなり、重要なシナリオを考慮する必要があり、さらにコー

2022-01-27 04:06:15
[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて

I. 何であるか Cssは比較的シンプルな構文で、ユーザーからの要求も少ないマークアップ言語ですが、以下のような問題点もあります。一見非論理的なコードをたくさん書く必要がある、保守・拡張が容易ではない、再利用に向かない、特にフロントエンド以外の開発エンジニアにとっては、CSSの記述経験がないため、整理された保守しやすいCSSコードを書くことが難しい場合が多い。 Css

2022-01-26 22:21:56
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css

さっそく、コードを見てみましょう。 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>navigation bar</title>

2022-01-26 20:44:17
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する（コード例）

マウスの位置をマッピングしたり、ドラッグアンドドロップ効果を実現するために JavaScript をJavaScriptの/codeで作成します。しかし、実はこれをCSSで行うにはもっとすっきりした方法があり、それを使うことなく JavaScript で、同じ機能を実現することができます。 CSS だけでマウスの "click and drag" 効果を模倣するには、

2022-01-26 13:36:29
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード

CSS3ってこんなにいいものだったのか...」と、今更ながら知りました。  CSS3ボックスモデル CSS3 では、ボックスモデルを box-sizing で指定することができる。box-sizing には 2 つの値、すなわち content-box と border-box があり、ボックスサイズの計算方法を変更することができる。 box-sizing: con

2022-01-26 13:13:22
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方

PCでは、ビューポートとはブラウザの表示領域のことで、ブラウザのウィンドウと同じ幅のことを指します。CSSの標準文書では、ビューポートは初期包含ブロックとも呼ばれ、CSSレイアウトを最大幅に制限する、すべてのCSSパーセント幅予測の元となるものである。モバイルはより複雑で、レイアウトビューポート、ビジュアルビューポート、理想的なビューポートの3つのビューポートが関係します。今回は

2022-01-26 12:58:18
[CSSチュートリアル】SVGを使ったCSSアニメーションでエネルギーフローを表現する

最終的な効果は次のようになります。アニメーションは2つのステップに分かれています軌跡を描く DOMを作成し、軌跡に合わせてアニメートするランタイムの軌跡を開発するまず、エネルギーの流れの導管として、下部に水色の半透明のパスを描きます。これは、SVGパス（実際にはここで背景画像を使うだけでよい）を使って、以下のコードで行います。

2022-01-26 12:46:26
[css3]本のページをめくるような効果を実現するcss3サンプルコード

キーポイント 1.css3 3dアニメーションマスター 2. 反転後にページ内容が変わる場合の対処法 3. 常に本の中心を保つ方法コードの概要 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

2022-01-26 05:23:09
[css3]CSS3は本当にSCSSに取って代わるのだろうか？

ウェブページをスタイリングするとき、私たちはプロジェクトでプレーンなCSSかSCSS（他の処理系も含む）のどちらかを選択することができます。SCSSは高度な機能と明確な構文のおかげで、CSSよりも使いやすいというのが多くの開発者の意見です。今回は、SCSSの機能とCSSの機能向上について紹介したいと思います。また、実際のプロジェクトにおいて、CSSがSCSSの代替となり得るかどうかを評価

2022-01-26 02:01:08

最新

おすすめ