CSS - BinaryDevelop

[CSSチュートリアル】よく使われるnth-childセレクタをまとめる

前文フロントエンドのプログラミングでは、奇数、偶数などの数値も受け付けるnth-childセレクタをよく利用します。4n+1、-2n+1などの式も受け取れることを、CSS Masteryの本に目を通して思い出したのは今日になってからだ。では、それぞれ具体的にどのような使い方があるのでしょうか。適用できるシナリオは？あまりはっきりしないかもしれないので、以下の例にしたがって理解していこう。

2022-01-15 03:33:33
[CSSチュートリアル】背景画像画面の適応的な実装を実現するCSS

ランディングページなどのホームページをやっていると、大きな背景画像を置く必要があり、様々な画面の大きさに合わせて画像を拡大縮小する必要がある場面によく遭遇します。 htmlコードは以下の通りです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

2022-01-15 02:44:50
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について

前置き最近、クライアントのネイティブページを預かった。クライアントは、そのページがIE9以上に対応していること、また、360ブラウザの互換モードが正常にアクセスできることを要求していました。360ブラウザはコードで強制的にエクストリームモードにすることができるので、この問題は比較的簡単に解決することができます。しかし、IE9に対応するためには、多くのCSS3プロパティやH5の新しいAPI

2022-01-14 22:57:11
[css3]CSS3アニメーションによる光のボタンの流れの効果

css3を学んでいく過程で、css3のプロパティを使って簡単に実現できる格好いい効果をたくさん見つけました。animationはcss3のアニメーション効果でよく使われるプロパティです。このプロパティを使って、次のようなマウスオーバーボタンをストリームボタン効果で作る方法を学んでいきましょう〜。その前に、animationプロパティの使い方を簡単に紹介します。アニメーション

2022-01-14 20:01:19
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト

0. 前置き 2016年8月18日今日、Appleのスマホのスワイプでロック解除すると、プロンプトの単語の上に白い光が点滅してカッコよく感じることに気づいたので、急にテンションが上がって、フォントの上にマウスを置くと（指を模して）、白い光が点滅してフォントを照らすエフェクトを作ってみました。 1. 想いまず、斜めの白い光を作る必要があります。これは、"lightin

2022-01-13 18:16:51
[CSSレイアウト例】CSSで中央揃えを実現する方法N種

プリアンブル入社して間もない頃、面接官からセンターリングの質問を連発され、罵倒されたことがあります。"テキストのセンタリングはどうやるんですか？" "複数行のテキストならどうする？" "ブロックレベルの要素を水平にセンタリングするにはどうすればいいのか？" "ブロックレベル要素を垂直方向にセンタリングするには？ブロックレベル要素の垂直方向のセンタリングを実現する方法". 質問は、泥沼の脳の後ろ

2022-01-13 18:04:06
[css3] CSS3を使ってヘッダーアニメーション効果を作成する

NetEaseは、ゲームの公式サイト（http://kanyouxi.163.com/）を見て（取り下げられました）、私が行うために使用するプロジェクトです（2014）、また、私たちの最初の放棄Flashは、アニメーションサイトの生産とHTML5を使用して、ときに業界のいくつかの使用CSS3アクティブ絵画ウェブサイトの実際の生産は、もちろん、現在非常に広く使用されて、特にモバイル側にある、CSS3

2022-01-13 16:51:53
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の

この質問はナゲッツのメッセージから来たもので、友人から以下の私のコードの高さ遷移アニメーションがなぜ機能しないのかと尋ねられたものです。その疑似コードは以下のようなものです。 { height: unset; transition: all 0.3s linear; will-change: height; &.up { hei

2022-01-13 16:44:15
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード（固定位置編）

DIVのホバー効果（固定位置）を実現するためのPure CSSです。IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, Windows of the World, etc. 効果は以下の通りです。実装コードです。 <!DOCTYPE html> <html> <head> <meta c

2022-01-13 16:30:56
[CSSチュートリアル】ピュアCSSで作るスクロールシャドウ効果

さっそくですが、スクロール可能な要素には、非常によくあるケースがあります。通常、要素が現在スクロールされていることを示すために、スクロールに垂直な側面に影を追加して、そのスクロールを可視領域外に与える、このようなものです。ご覧のように、スクロール中に影が表示されます。左右の列が静止しており、スクロールするとボーダーに吸着するような場合、CSSでは一般的に pos

2022-01-13 14:03:12
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS

背景前景の要素から特定の色を継承したシャドウ効果を作成する方法をご存知ですか？この記事を読んで、その方法を見つけてください。先日、ホームセンターの前を通りかかりました( {コードホームデポ、住宅建築用品の世界的な小売業者）が、販売しているスマートライトを大々的に展示していたんです。 {{コードそのうちのひとつは、テレビの背後に設置された一連の電球で、下の画像に示すように、テレビの前

2022-01-13 13:19:30
[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る

まず、興味深いプロパティから見てみましょう。 conic-gradient 円錐形グラデーション ! に使えることを発見し、興味を持ちました。円グラフ円グラフ例えば、こんな感じ。そんな原理も非常にシンプルで、始点を中心とし、その周りを時計回りに回ってグラデーション効果を得るというものです。これは複数の色パラメータを取る必要があり、それぞれのパラメータには、現在の色値の開始

2022-01-13 12:01:43
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決

問題の説明本日、ページスタイルの修正中に、子要素の設定で問題が発生しました margin-top が、子要素を親要素から離すのではなく、親要素に作用して、親要素が margin-top の効果が得られます。今日は、全体の問題の原因と、解決策についてお話ししましょう。問題分析 MDNの上に、こんな文章があります。ブロックの上部外側の余白( margin-top )

2022-01-13 11:49:10
[CSSチュートリアル】background-positionプロパティのパーセンテージ値の使い方を探る

background-positionが背景画像の表示に与える影響についてホームページの画像を交換するプロジェクトで、これらの2日間は、問題を発見し、以前のスタイルは、ページが縮小または拡大されたときに背景画像の表示領域も変更され、現在は左上、どのようにページの画像位置のサイズが移動されていない変更に設定されている背景-位置：センター、。この思考だけでなく、ああ、背景-位置：センターは、背景画

2022-01-13 11:46:56
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例

フロントエンドのデザインで、「X」型のクローズボタンや「>」などの3方向の中空矢印アイコンをよく見かけます。 cssにはこれを実現する方法がいろいろありますが、試してみて、あまり覚えやすくないなと思ったので、今日はそれについて書きますね。after疑似要素を使って簡単に実現する方法。 1. アイコンを閉じる htmlセクション General Compiler a

2022-01-13 11:33:33
[CSSチュートリアル】インタビュー必見！聖杯レイアウトとダブルウィングレイアウトの違いとは？

前文今日、私たちはあなたと聖杯レイアウトとダブルフライヤーレイアウトとそれらの違いを共有し、これらの2つの3行レイアウトは、大きな工場の面接の質問にあなたを取って、大規模な工場のフロントエンドのインタビューで高周波試験点のいくつかされている、言っていないライブ、急いで急いで〜を。レイアウト効果この2種類の3行レイアウトの効果は同じで、上図のように実現され、

2022-01-13 08:12:33
[css3]スクロールバー美化効果を実現するcss3サンプルコード

そのコードを以下に示します。 /*width of scrollbar*/ ::-webkit-scrollbar { width:9px; height:9px; } /* Outer track. You can use display:none to make it not show, or you can add a backgr

2022-01-13 08:09:18
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果

今日のショップブログサイト -- shoptalkshow と、このとても興味深いインターフェイスを目にしました。画像特にボーダーが独特なスタイルだと思いました。ねえ、じゃあ、CSSを使ってボーダーで何ができるのか、ボーダー特集の記事を紹介するよ。そのボーダーのプロパティボーダーというと、まず思い浮かぶのは border よりも頻繁に使用します。 {コードと {

2022-01-13 07:01:29
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果

効果表示アドレス：ツアープラン( アップラノックドットコム ) 画像コード dynamic_cast <> img の外部タグ要素では、overflow: hidden を設定する必要があります。そうしないと、拡大したときに画像がオーバーフローして、他のコンテンツを覆ってしまうからです。画像上のCSS3アニメーションマウスが徐々に大きくなる画像オフマウス徐々に縮小記事に関

2022-01-13 05:21:06
[CSSチュートリアル】空間均等性の問題を解決する2つの方法

2009年の登場以来、フレックスはほぼすべてのブラウザでサポートされています。簡単でレスポンシブなレイアウトソリューションとして、フレックスは私たちのレイアウト開発に多くの利便性をもたらしてくれています。その justify-content属性は、フレックスレイアウトで非常によく使われるプロパティで、主軸上の子要素の配置を定義します。これには flex-start | flex-end |

2022-01-13 04:36:34

最新

おすすめ