すべての記事 - ページ 1686

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. ボタンを使用することは、これまでのところ、電子的なものと対話するための好ましい方法です。ラジオ、テレビ、音楽プレーヤー、さらには音声コマンド機能を備えたスマートフォンでさえも、少なくとも1つまたは2つの物理ボタンが必要です。. さらに、このデジタル時代では、 ボタン デジタル形式でも進化しているため、物理的なボタンと比較して、よりインタラクティブでダイナミック、そして作りやすくなっています。. そのため、今回は、この優れたデザインを基にした滑らかでインタラクティブなボタンをDribbbleでCSSのみを使用して作成します。. それでは始めましょう. HTML HTMLドキュメントに次のマークアップを配置して、ボタンから始めます。それは本当に簡単です、ボタンはアンカータグに基づいているでしょう、私たちも持っています スパン その隣にインジケータライトを作成してから、それらをHTML 5内にまとめて表示します。 セクション タグ. ＆＃xF011; これが私たちのボタンが最初にどのように見えるかです。. 基本スタイリング このセクションでは、 スタイル. 私たちは最初に微妙なパターンからのこの暗い背景をボディのドキュメントに適用して、中央に配置します。 セクション....

私たちがウェブサイトを飾る方法を変える多くのCSS3機能があります、そのうちの1つはCSS3グラデーションです。 CSS3より前のバージョンでは、グラデーション効果を作成するために必ず画像が必要です。今、私たちはCSSを使うだけで同じ（そしてより良い）効果を届けることができます これまでの記事では、CSS3で実現できる2種類のグラデーションについて説明しました。 ラジアル 線形グラデーション. 今回は彼らの兄弟を調べます。 繰り返しグラデーション. 基本的な繰り返し 繰り返しグラデーション 本質的には拡張子です。構文は、放射状グラデーションと線形グラデーションの定義方法と似ていますが、名前が示すとおり、指定された方向に色が繰り返されるだけです。線形グラデーションを繰り返すには、この関数を使います。 繰り返し線形勾配, 放射状または楕円形のグラデーションを繰り返す場合は、この関数を使用します。 繰り返し放射状グラデーション. / *線形* / .gradient 背景：繰り返し線形グラデーション（0deg、＃f9f9f9、＃cccccc 20px）; / * Radial * / .gradient 背景：繰り返し放射状グラデーション（50％50％、円、＃f9f9f9、＃cccccc 20px）; コードを除いて、コードの残りの部分に大きな違いはありません。 色の繰り返し. 以下は、この色の繰り返しがどのように機能するかを説明する簡単な図です。....

勾配 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公式仕様に現在含まれていない他のいくつかの特性があります。 ボックス反映 によって開始されるプロパティ ウェブキット. このプロパティは指定されたオブジェクトに反映できます. 基本的な反射 基本的な実装は非常に直感的です。たとえば、実際のオブジェクトの下に反射を置きたいとしましょう。我々は書ける： img -webkit-box-reflect：below; クレジット：ブルースの8週間この例は、画像をどのように反射するかを示しています。 以下 （位置）オブジェクトしかし、この場合、私たちはまた、 右, 左, そして 上に. 反射オフセット オフセット 反射と実際の反射の間のギャップを定義するために使用されます。以下のコードスニペットを見てみましょう。 img -webkit-box-reflect：10ピクセル以下; 上記のコードでは、実際のオブジェクトからの反射を次のように分離しました。 10px; クレジット：ブルースの8週間デモを見る グラデーションでマスキングする よく見られる反射効果は、下部がフェードアウトし、実際のオブジェクトの半分以下しか表示されないことです。この種の効果を再現するために、我々は適用することができます CSS3グラデーション そのようにオブジェクトをマスクする。...

今日私達は私達の議論を続けるつもりです 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ファンアウト回転を参照してください。....