CSS - BinaryDevelop

[CSSレイアウト例】float（フロート）、position（ポジション）プロパティの差分によるCSSレイアウト

CSSレイアウト - positionプロパティ position属性は、要素に適用される位置決め方法の種類を指定します（static、relative、fixed、absolute、sticky）。 position 属性 position 属性は、要素に適用される位置決め方法の種類を指定します。位置の値は5種類ある。スタティック相対固定絶

2022-01-21 23:04:18
[CSSチュートリアル】よくある2D変換を5つ実現するCSS

CSSの2次元変換では、移動、回転、拡大縮小、反りなどの基本的な変形を2次元で行うことができます。変換された要素は、周囲の要素に影響を与えず、重なり合うことができるという点で、絶対位置指定要素と似ていますが、変換された要素が変換前と同じページ上の空間をまだ占めていることを除けば、そのようなことはありません。 2次元の変形は、CSSのtransformプロパティと以下の変換関数で実現できる。

2022-01-21 22:43:58
[CSSチュートリアル】CSSのfloatとunfloatについて

フロートの定義要素を通常のドキュメントの流れから外し、親要素の左端または右端、あるいは float が設定されている他の要素の端に近づけることができます。フロートで解決する問題点 1. 画像を囲むテキストの問題を解決する 2. スペーシングの問題を解決する 3. 左側、右側へのレイアウトが可能画像の左側にテキストをレイアウトフロートを使用しない場合

2022-01-21 21:35:53
[CSSチュートリアル】CSS擬似要素::マーカー解説

この記事では、CSSの中でも特に興味深い擬似要素の一つである ::marker これを使えば、テキスト・シーケンスをより面白くすることができます。マーカーとは CSS擬似要素 ::marker は擬似要素で CSS擬似要素レベル3 から新たに CSS擬似要素レベル4 Chrome 86+で洗練された比較的新しい擬似要素で、Chrome 86+から

2022-01-21 20:24:37
[CSSチュートリアル】カットコーナー＋ボーダー＋プロジェクション＋コンテンツ背景色のグラデーション効果を実現するCSS

角切り＋ボーダー＋突起＋コンテンツ背景色グラデーションの効果を全てcssだけで実現したのは、UIで背景の切り出しができなかったので、これはcssで理論的に実現できるのではないかと思ったからです。最終的に達成される効果をご覧ください。まず、紫紺のグラデーションの中身を語らず、単純な四隅＋黒枠＋アウトラインの投影、実際には、コーナーカットを実現するためにbackground:

2022-01-21 20:02:25
[CSSチュートリアル】overflow:hiddenの役割を解説（overflow hidden、clear float、外周マージンの崩れを解決する）。

I. オーバーフロー:hidden オーバーフロー:hidden ある要素に overflow:hidden を設定すると、その要素の内容が与えられた width と height 属性を超えた場合、超えた部分は占拠されないようになります。 /*css styles*/ <style type="text/css"> div{ width: 150px; heig

2022-01-21 19:01:59
[CSSチュートリアル】CSSスコープ（スタイル分割）の使い方まとめ

I. CSS スコープ（スタイル分割）の利用について vueでは、cssのスタイルを現在のコンポーネントにのみ反映させるため。 scoped 属性は HTML5 の新機能で、使用すると、style 要素の親とその子にのみスタイルを適用するブール型属性です。 II. スコープ付き実装の原則 vueのscopedプロパティの効果は、主にPostCSSの翻訳によって実現

2022-01-21 18:40:30
[CSSチュートリアル]z-indexの違い。cssのz-index: 0とz-index: autoの違い。

最近、カスケードコンテキストの勉強をしていたのですが、その過程でz-indexが0とautoの違いは何だろうと思い、Baiduで調べてみたところ、以下のような情報がありました。いくつかの問題を発見し、自分たちの実践(実験？)と合わせて整理したのがこのノートです。正誤表情報を調べていると、z-indexを0にすると新しいカスケードコンテキストが作成され、0がautoより上になるとい

2022-01-21 16:52:51
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能

ナビゲーションバー実装、トップナビゲーションバー固定、セカンダリーメニュー実装 /{br レンダリングです。 2018/11/16に更新しました。最近、このナビゲーションバーを使用する際に、ズームインとズームアウトの場合のページが、ナビゲーションバーのレイアウトと表示に、いくつかの小さな問題があることがわかったので、コードのCSS部分を変更し、再投稿しました。新し

2022-01-21 16:18:55
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法

プリアンブル個人ブログを入力する際、ブログの詳細ページで内容によってコピーの仕方を変えたいと思いました。例えば、コードブロックについては、読者がローカルでデバッグしやすいように、ワンクリックでコピーできるようにしたかったし、テキストの説明部分については、読者がコピーできないようにしたかったのです。CSS never JSの確固たる過激派である私は、ついにCSS3でユーザーセレクトを発見し

2022-01-21 15:47:24
[CSSチュートリアル】CSSアニメーション途中で止める方法とポーズを維持する方法

プリアンブル私はかつて、ある悩みを抱えていました。タワークレーンからスイングする家を落下させる必要があったのだが、落下の途中で、家は落下の瞬間のスイングの角度を維持する必要があったのだ。最初は、家の現在の振り角度を取得して、落下の瞬間に家のtransform:rotate()に代入しようと思ったのですが、それは面倒で最適とは言えませんでした。しかし、それは一つのプロパティで解決で

2022-01-21 15:07:33
[CSSチュートリアル】 css border add four corners コード

1. html <div class="loginbody"> <div class="border_corner border_corner_left_top"></div> <div class="border_corner border_corner_right_top"></div

2022-01-21 14:55:44
[CSSチュートリアル】CSSを解析して、画像のテーマカラー機能を抽出する（コツ）

背景 WeChatの技術グループで学生が「画像のメインカラーを出すのに一番いい方法は何ですか」と質問したのが始まりです。画像があって、その主色を取得するためにコンテナ内に画像があり、背景色を画像の原色と同じにしたい場合、このカラーバリューを使用します。 Canvasをコンピューティングに使っているという人から、専門のオープンソースライブラリを勧めてくれる人

2022-01-21 14:02:31
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために

左側が固定幅、右側が適応の7つの方法で2カラムのレイアウトを実現するためのCSSは、コードは以下のとおりです。  1、Calcの使用は、メソッドのCSSコードの幅を計算する。 .box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;background: yellow;} .righ

2022-01-21 13:36:31
[css3]CSS3タブアニメーションの背景切り替えの動的効果例

CSS 3 アニメーション例 - タブの背景のトグル動的効果、コードは以下のとおりです。 <style type="text/css"> .slide-tabs { display:flex; position:relative; border:1px solid #3d3d3d; border-radius:10px; width:150px; overflow:hidden

2022-01-21 13:21:44
[CSSチュートリアル】CSS たった1行のコードでアバターと国旗の一体化を実現

今日は建国記念の日、誰もが祖国の誕生日を祝おうと意気込んでいます。毎年この時期になると、アバターに国旗を飾るのが流行っていますが、今年も流行っていますね。 emm、とても素敵です。では、私たちのアバターで国旗の写真を撮り、目的のアバターを素早く手に入れるには、CSSを使うと簡単でしょうか？片方の画像の透明度を変えればいいと思っている人がいますが、そうではあり

2022-01-21 12:57:47
cssで背景色の半透明化を実現する2つの方法

ページレイアウトにおいて、ユーザーに異なる視覚効果を与えるために、divの背景色を半透明の状態にする必要がありますが、その設定方法をご存知ですか？次に、divの背景色を半透明にする方法について、2つの方法と、そのメリット・デメリットを説明します。もし興味があれば、見に来てください、参考になれば幸いです。まず、おなじみのCSSプロパティopacityを使って、divの背景色を変更し

2022-01-21 11:04:28
[CSSチュートリアル】Pure CSSカスタム複数行抜け問題（原理から実装まで）

テキストのオーバーフローをどのように表示するか、またそのニーズは何ですか？一行か複数行か？切り捨て、省略、カスタムスタイル、適応的な高さ？ここに答えがあります。複数行の省略を明らかにするために、原理から実装まで順を追って説明します。まずは、最もシンプルな1行のはみ出し省略であるウォームアップ、一行抜けこれは、あまり魔法を使わない宇宙規模の統一解です /* Principle

2022-01-21 10:56:07
[CSSチュートリアル】resizeで画像のプレビューを切り替える方法

キーポイント CSSのresizeプロパティで、要素のリサイズを制御することができますリサイズと連動して、子要素の幅をダイナミックに変更することができます。 HTMLです。 <div class='picA'> <div class='picB'> <div readonly class='resizeEleme

2022-01-21 10:19:44
[CSSチュートリアル】波動効果を生み出すCSSのアイデア

前回、純粋なCSSを使って波動効果を実装する方法をいくつか紹介しましたが、それについて関連する記事が2つあります。ピュアCSSで波動効果を実現! CSSで作るクールな充電アニメーション今回は、CSSを使った波動効果の面白いアイデアをもう一つ取り上げます。曲がった三角形の面積の定積分から始める本題に入る前に、これを見てください。高等数学では、二次曲線グ

2022-01-21 10:09:41

最新

おすすめ