画像サイズが画面サイズを超えると、Firefoxはデフォルトで画像のサイズを自動的に変更します。 100％表示を見たいがスクロールを気にしないのであれば、ここで自動調整を無効にするための微調整を行います。. タイプ about：config Firefoxのアドレスバーに 検索する browser.enable_automatic_image_resizing に変更 偽
コーディング - ページ 18
この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. ボタンを使用することは、これまでのところ、電子的なものと対話するための好ましい方法です。ラジオ、テレビ、音楽プレーヤー、さらには音声コマンド機能を備えたスマートフォンでさえも、少なくとも1つまたは2つの物理ボタンが必要です。. さらに、このデジタル時代では、 ボタン デジタル形式でも進化しているため、物理的なボタンと比較して、よりインタラクティブでダイナミック、そして作りやすくなっています。. そのため、今回は、この優れたデザインを基にした滑らかでインタラクティブなボタンをDribbbleでCSSのみを使用して作成します。. それでは始めましょう. HTML HTMLドキュメントに次のマークアップを配置して、ボタンから始めます。それは本当に簡単です、ボタンはアンカータグに基づいているでしょう、私たちも持っています スパン その隣にインジケータライトを作成してから、それらをHTML 5内にまとめて表示します。 セクション タグ. ＆＃xF011; これが私たちのボタンが最初にどのように見えるかです。. 基本スタイリング このセクションでは、 スタイル. 私たちは最初に微妙なパターンからのこの暗い背景をボディのドキュメントに適用して、中央に配置します。 セクション....
勾配 CSS3のすばらしい色機能追加です。単色だけを追加するのではなく、画像に頼らずに1つの宣言ブロックに複数の色の組み合わせを追加できるようになりました。. CSS3でグラデーションを使ったことがあれば、おそらく放射状グラデーションと線形グラデーションの2つの方法に精通しているでしょう。今日の記事は後者についてです. グラデーションを作成する 仕様がCSS3のグラデーションは画像であると言っているように、それは他の新機能追加のような特別な性質を持たないので、それはを使用して宣言されます。 背景画像 代わりにプロパティ. グラデーションの完全な構文を見ると、ちょっとだけ見えます。 行き過ぎた, 一部の人にとって混乱を招く可能性があります. div background-image：-webkit-linear-gradient（top、＃FF5A00 0％、＃FFAE00 100％）;背景画像：−ｍｏｚ−線形勾配（上、＃ＦＦ５Ａ００ ０％、＃ＦＦＡＥ００ １００％）。背景画像：−ｍｓ−線形 - 勾配（上、＃ＦＦ５Ａ００ ０％、＃ＦＦＡＥ００ １００％）。背景画像：-o-linear-gradient（上、＃FF5A00 0％、＃FFAE00 100％）。背景画像：線形勾配（上、＃FF5A00 0％、＃FFAE00 100％）。 それで、物事をより明確にするために構文の各部分を一つずつ掘り下げましょう。. まず最初に、線形勾配は次のように宣言されます。 線形勾配（） 関数。この関数には3つの主要な値があります。最初の値はグラデーションの開始位置を定義します。以下のようなわかりやすいキーワードを使用できます。 上 からグラディエントフローを開始する...
今日私達は私達の議論を続けるつもりです CSS3グラデーション. 前回の記事では、作成方法を説明しました。 線形グラデーション. 今回は彼らの親戚をカバーします, 円形および楕円形のグラデーション. グラデーション構文 CSS3のグラデーションは、 背景画像 財産。追加する必要がある場合、これはより良い互換性のためです。 背景色 それらが互いに衝突しないように、単一のルールセット内で。それから、放射状グラデーションを作成するために、これを単純にこれと呼びます。 放射状グラデーション（） 関数。グラデーションを適切に設定するために関数に含まれるべき4つの値があります. 最初の値は グラデーション位置. top、bottom、center、leftなどのわかりやすいキーワードを使用することも、またはより具体的にすることもできます。, 50％50％ 中心にグラデーションを設定する 0％0％ 開始点のグラデーションを設定する 左上. 2番目の値は 形状とグラデーションサイズ, グラデーションを形成するための2つの引数があります。 楕円 これがデフォルトで、2番目は サークル. そしてのために グラデーションサイズ,...
この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. 境界線を作成することは新しいことではありません。 HTML ＆ CSS;初めから境界線を追加することができました。あなたは、実線、点線、破線などについてよく知っているかもしれません。. しかし、新しいCSS3のborder-imageプロパティでは、HTML要素にボーダーを作成することがより高度になっています。簡単に言うと、画像をソースとして使用して境界線を追加できるようになりました。これにより、より魅力的な境界線を追加できます。それでは、このプロパティがどのように機能するのかを見てみましょう。. 構文とブラウザのサポート CSS3の境界線画像は、次の短縮構文を使用して定義されています。 border-image：[画像ソース] [スライス] [幅] [アウトセット] [繰り返し]; 上記の構文は、ChromeでのみサポートされているW3Cの公式バージョンです。一方、Opera、Firefox、およびSafariでは、引き続きプレフィックスバージョンが必要です（-○-, -モズ-, -ウェブキット-そして、Internet Explorerは驚くことにこのプロパティをまったくサポートしていません。. さらに、 [幅] そしてその [最初]...
この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. の 属性セレクタ 余分なものを追加せずに要素を選択するための本当に便利な機能です。 id または クラス. ターゲット要素が次のような属性を持つ限り href, src そして タイプ そうする必要はない. 属性セレクタは実際には周りにありました CSS 2.1以降, そして今、CSS3仕様に追加されたいくつかのタイプの属性セレクターを使って、要素の属性をより具体的にターゲットにすることができます。. そして、この記事では、構文を選択するために構文の1つを使用します。 ファイルの種類 それは属性の値の一部として挿入されます. 構文とブラウザのサポート...
知ってた 幾何学的変換 HTML要素に追加する 変形するスケール、スキュー、回転などのCSSプロパティはアニメーション化できます? それらを使用してアニメ化することができます 遷移 財産と @keyframes アニメーションですが、もっとクールなのは、アニメーション変換を少し追加するだけで一目瞭然になることです。 バウンス効果, を使用して 立方ベジエ（） タイミング機能. 手短に, 立方ベジエ（） （CSSでは）は 遷移のためのタイミング関数. それは遷移のスピードを指定し、そしてとりわけ、それはまた、 アニメーションに跳ね返り効果を作成する. この記事では、まず始めに 単純な変換アニメーションを作成する 我々は後でそれ 追加する 立方ベジエ（） タイミング機能. このチュートリアルの最後で、あなたはアニメーションを作成する方法を理解するでしょう。 ファンアウトとバウンス効果の両方. これが最終結果です（効果を見るためにクリック）. CodePenのPreethi（@rpsthecoder）によるバウンス付きのPen CSSファンアウト回転を参照してください。....
ショートハンドとロングハンド - 一つは簡潔でもう一つは正確です。 1つは簡潔さへの欲求から生まれましたが、もう1つは明快さを保つためにしっかりしています。いずれにせよ、彼らは彼らの目的、長所と短所を持っています、いわば. この記事ではCSSの速記表記と速記表記の両方にいくつかの光を当てます。. 速記プロパティとは? 速記プロパティ CSSプロパティの他のセットの値をとるプロパティです。たとえば、次の値を割り当てることができます。 ボーダー幅, ボーダースタイル そして ボーダの色 を使用して 境界 財産だけ. 基本的に, ボーダー：1px純青色。 と同じです。 ボーダー幅：1px。ボーダースタイル：ソリッド。ボーダーカラー：青。 CodePenでPreethiによるPen zGNKex（@rpsthecoder）を参照してください。. これにより、個々のプロパティ値を別々に宣言する必要がなくなります（冗長で、時間とスペースがかかります）。また、宣言内で除外されているプロパティもリセットされます。. どのように動作しますか? 前述のように、他のプロパティ値のセットを速記で記述します。短縮形のすべてのプロパティ値がその順番に関係なくても問題ありません。 種類が違う のように 境界. のプロパティの 同種の値 余白のように,...
