コーディング - ページ 14

画像処理において, マスキング あなたがすることができますテクニックです 画像を隠す 他のと。マスクは画像の一部を作るのに使われます シースルー. マスキングプロパティを使用してCSSを使用してマスキングを実行できます。. 今日の記事では、2つのPNG画像とCSSマスキング技術を使用してマスクされた画像を作成し、ユーザーが画像の2つの状態を処理できるようにします（日 そして 夜）スイッチUIを使用して. 一部のブラウザ互換性の問題のため、すべてのブラウザですべてのマスキングプロパティがサポートされているわけではありません（2016年6月現在）。 マスクを追加するための2つの手法, 1つはWebkitベースのブラウザ用、もう1つはFirefox用です。この3ステップのチュートリアルの最初の2つのステップはすべてのブラウザで同じですが、3番目のステップには違いがあります。. ステップ1。基本的なスイッチを作成して下さい 典型的なスイッチには2つの状態があります。 唯一 有効 一度に、あなたは使用することができます 2つのラジオボタングループ スイッチの動作コンポーネントを作成します。各ラジオボタンをそれぞれの親要素の左右の端に配置します。. ラジオボタングループは、各ラジオボタンに同じ名前を付けて作成します。 名 属性。ラジオボタングループ内, ラジオボタンが1つだけ 一度に確認できます. 次のHTMLとCSSから始めます。 HTML CSS 以下のCSSでは、絶対位置指定を使用して、画面上のラジオボタンを目的の場所に正確に配置しました。. #outerWrapper...

RSS（Really Simple Syndication） オンライン出版社によって使用される標準化されたフォーマットです。 コンテンツを配信する 他のウェブサイトやサービスへ。あ RSSドキュメント, としても知られている フィード, です XML文書 出版社が配信したいコンテンツを運ぶ. RSSフィードは、ほとんどすべてのオンラインニュースWebサイトおよびブログで読者に公開されています。 内容を最新の状態に保つ. 彼らはまたで見つけることができます 非テキストベースのWebサイト YouTubeなど、YouTubeチャンネルのフィードを使用できます。 最新のビデオを知らされる. これらのフィードにアクセスし、その内容を読んで表示するプログラムは、 RSSリーダー. JavaScriptで簡単なRSSリーダープログラムを作成することができます。このチュートリアルでは、次の方法について説明します。. RSSフィードの構造 RSSフィード ルート要素を持つ 呼ばれる , に似ています HTML文書にタグが見つかりました。の中 タグ、あります 要素、種類のような...

するのが最も難しい部分の1つ 責任がある ウェブサイト上です “ナビゲーション”, これは訪問者がWebページを飛び越える方法の1つであるため、この部分はWebサイトのアクセシビリティにとって本当に重要です。. レスポンシブWebサイトナビゲーションを作成するには実際には多くの方法がありますが、jQueryプラグインの中にはそれをすぐに実行できるものもあります。. しかし、この記事では、即時の解決策を適用するのではなく、順を追って説明します。 地上から単純なナビゲーションを構築する方法 CSS3メディアクエリと小さなjQueryを使用して、スマートフォンのように小さい画面サイズで表示する. それでは始めましょう. デモ ソースをダウンロード HTML まず、内部にメタビューポートを追加しましょう。 頭 タグ。この メタビューポート タグは、特にモバイルビューポートで、任意の画面サイズ内で適切に拡大縮小するために必要です。. …そして、ナビゲーションマークアップとして次のスニペットを 体 タグ. ホーム の仕方 アイコン 設計 Web 2.0 道具 メニュー あなたが上で見ることができるように、我々は6つの主要なメニューリンクを持っていて、それらの後にもう一つのリンクを加えました。この追加リンクは、...

ドロップダウンリストは オプションを提供する 特に利用可能なオプションのリストが長い場合、入力フィールドに対して。ユーザーは必要なオプションを選択できます。 フィールドに入力する, または オプションを見てください それは彼らが探しているもののための一致かもしれません. オプションを検索できること, しかし、理想的なソリューションです. この動作は、 HTML要素 入力候補を表示します などのさまざまなコントロール用 タグ。しかしながら ユーザーが持っている場合にのみ利用可能なオプションを表示します 入力したもの 入力フィールドに. ユーザーを有効にすれば、入力フィールドをより使いやすくすることができます。 オプションの全リストにアクセスする 入力取得プロセス中のいつでも. この記事では、作成方法を説明します。 いつでも検索できるドロップダウンリスト を使用して そして HTML要素と小さなJavaScript. 1.オプションでデータリストを作成する まず、さまざまなテキストエディタ用のデータリストを作成します。の値が リスト の属性 タグ...

とともに カットアウトボーダーデザイン 何が見つかるかをユーザーに示すことができます HTML要素の境界領域の下. このタスクは一般的に解決されます 2つ以上のブロック要素を積み重ねる （ほとんどの場合div） 異なるサイズの 互いの上に。最初はこれは簡単な解決方法のようですが、レイアウトを複数回再利用したり、要素を移動したり、モバイル用にデザインを最適化したり、コードを維持したりする場合は、さらにイライラすることになります。. この記事では、これを使用したエレガントなCSSのみのソリューションを紹介します。 HTML要素は1つだけ 同じ効果を達成するために。このテクニックはアクセシビリティにも優れています。 背景画像をCSSにロードします, HTMLから分離された. この記事の終わりまでに、あなたはする方法を知っているよ 境界領域に背景画像を表示する を作成するために カットアウトボーダーデザイン あなたは以下を見ることができます。デザインをレスポンシブにする方法についても説明します ビューポートユニットを使う. CodePenのHONGKIAT（@hkdc）によるPen CSSカットアウトボーダーを参照してください。. 初期コード HTMLに関する唯一の要件は、 ブロック要素： する必要があります 再利用 の寸法（幅と高さ）とボーダー幅の値 div, 私はそれらを紹介しています...

話し合います CSSリボン ウェブデザインでは 箱のストリップ （リボンと呼ばれる） 別の箱を包む. これはかなりよく使用される設計手法です。 テキストを飾る, 特に見出し。 W3CのWebサイトでは、適切に使用されているCSSリボンがどれほど役立つかを確認できます。 構造コンテンツ 微妙に. だから、この記事では見ていくつもりです 単純なCSSリボンを作成する方法 あなたがすることができること 見出しを強化する あなたのウェブサイトで。ありがとう CSS変換, 以前よりもはるかに単純なコードベースでこのデザインを作成できます。. 下記の最後のデモで覗いてみることができます. CodePenのHONGKIAT（@hkdc）によるPen CSSリボンを参照してください。. HTMLと基本スタイル まず、 後で説明するHTML要素 リボンのデザインを追加する. 私たちはそれを でマークするタグ .カード を表すセレクタ...

フリップアニメーション 表示される人気のあるCSS効果は 前面と背面の両方 HTML要素を上から下へ、または左から右へ（およびその逆に）回転させて2次元ではradですが、3Dで実行するとさらに涼しくなります。. この記事では、私はあなたにする方法を紹介します 単純な3Dボタンを作成する, そして フリップアニメーションを追加する 彼らへ. あなたは下のデモで結果を見ることができます、あなたがボタンをクリックするならば、彼らはラベルされたフリップアニメーションを実行するでしょう. 1. 3Dボタン用のHTMLを作成する 3Dボタンを作成するには（上→下を反転）、まず3つ重ねます 2つはボタンの前面と背面用、もう1つは中央の奥行きを埋めるためのものです。 3つのボタンの面を .flipBtn 3Dボタンとして機能するコンテナ。3Dボタンを .flipBtnWrapper ラッパー. 2. CSSを使って基本的なスタイルを追加する 設定します 幅 そして 高さ ラッパー、ボタン、ボタン面のプロパティを設定し、相対/絶対配置手法を使用して配置します。. .flipBtnWrapper 幅：200ピクセル。高さ：200ピクセル。位置：相対; .flipBtn、.flipBtn_face 幅：100％;身長：100％。位置：絶対...

これまでの記事で、LESSの基本の大部分を取り上げました。あなたが私たちのLESSシリーズに従っているならば、私たちはこの時点であなたがすでにどのように使用するかについて良い考えを持っていると信じます 変数, ミックスイン そして 操作 以下で. また、アプリやコンパイラを使用して、LESSを通常のCSSに変換する方法についても説明しました。しかし、どうすれば反対のことができますか。 CSSをLESSに変換する方法さて、このヒントはあなたのためです. ツールを使う の人気の高まりとともに CSSプリプロセッサ, このツールのように、Webデザイナーや開発者の生活をより快適にすることを主な目的とした新しいツールやアプリがいくつかあります。CSS2Less. このツールを使用すると、通常のCSSをLESSに変換できます。それでは、試してみましょう。変換する古いファイルから次のCSS規則があります。. ナビ身長：40px;幅：100％。背景：＃000;ボーダーボトム：2px solid #fff; nav ul パディング：0;マージン：0自動。 nav li display：inline;;フロート：左。 nav a color：#fff;表示：インラインブロック。幅：100ピクセル。テキストシャドウ：1px 1px 0px＃000。 nav li a...