コーディング - ページ 12

コンテンツオーバーレイ 現代のWebデザインの重要な部分です。彼らはあなたを助けます 要素を隠す Webページ上、およびそれ以降 - ユーザーの承認を得て - それを明らかに, 背後のボタンなど、追加の情報やコントロールを表示する. 典型的なオーバーレイは 半透明, とともに 無地の背景色 （通常は黒）、ユーザーが表示したり操作したりするためのテキストやボタンがあります。相互作用（クリックまたはホバー）が発生した後、オーバーレイ 削除されてコンテンツが表示されます その下に. この記事では、次のことを見ていきます。 色付きのオーバーレイを画像に追加する 純粋なCSSを使用して。下記のデモで最終結果を見ることができます。画像を重ねるとポケモンが見えます。この記事では画像について説明しますが、ここで紹介する技法は他のコンテンツタイプ（テキストブロックなど）にも安全に適用できます。. CodePenでPreethi（@rpsthecoder）によるBox-Shadowを使用したペンの色付きオーバーレイを参照してください。. 余分なHTML要素を追加しないでください オーバーレイは頻繁にによって作成されます 余分なHTML要素を配置する と 不透明度 1未満の値 カバーする要素の真上. 問題は、このテクニックには 追加の オーバーレイの要素（または擬似要素）....

SVGのアニメーション化は、次のようなネイティブ要素を介して実行できます。 そして . しかし、CSSアニメーションに慣れている人のために、心配する必要はありませんが、CSS AnimationプロパティをアニメーションSVGにも使用できます。. CSSアニメーションは、SnapSVGのようなJavaScriptライブラリを使用する代替方法にもなります。この記事では、SVGでCSSアニメーションを使用して実現できる可能性があることを確認します。. 1.図形を作成する まず最初に、アニメーション化したいシェイプとオブジェクトを描画する必要があります。あなたはのようなアプリケーションを使用することができます スケッチ, アドビイラストレーター, または インクスケープ 作成する. この例では、背景として曇り空を描き、ロケット船を上向きに撃ちました。 描画が完了したら、作成した各オブジェクトをSVGにエクスポートする必要があります。. このステップの例としてSketchを使用します。 SVG形式に変換したいオブジェクトを選択してください。ウィンドウの右下にあるをクリックします 輸出可能にする. SVGフォーマットを選択して、エクスポートオブジェクト名をクリックします。一度に1つのオブジェクトを実行する必要があります. 2. SVGをHTMLに挿入します SVGファイルをコードエディタで開くと、SVGコードは非常に面倒です。そのため、SVGファイルをデプロイする前に、コードを整理してSVGOというこのコマンドラインツールで最適化しましょう。. 起動する ターミナル または コマンド・プロンプト, そしてこのコマンドラインでSVGOをインストールします。 [sudo] npm install...

この記事では、Webページ上で（水平方向に）角度のあるエッジ効果を作成する方法について説明します。基本的には、このようになります。 わずかに角度のある端を持つことは、私たちのWebレイアウトをそれほど堅くなくて鈍いように見せるでしょう。このトリックをするために、私達は使用します 疑似要素 ：：前 そして ::後 そして CSS3変換. 擬似要素を使う このテクニックは擬似要素を使います ：：前 そして ::後 要素のエッジに角度を付けます。この例では、下端を調整します. .ブロック高さ：400ピクセル;幅：100％。位置：相対;背景：線形勾配（右へ、ｒｇｂａ（２４１，２３１，１０３，１）０％、ｒｇｂａ（２５４，１８２，６９，１）１００％）。 block :: after content： "; width：100％; height：100％; position：absolute; background：継承; z-index：-1; bottom：0; transform-origin：left bottom; transform：skewY （3度）;...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. RSSフィードロゴは、Webデザインで最もよく使用されるロゴの1つです。あなたはPhotoshopのようなグラフィックソフトウェアを使ってRSSフィードロゴを描くことについて多くのチュートリアルを見ました、しかしどうですか？ 純粋にCSS3を使ってそれを描く? ええ、あなたは私を聞いた:-) この機会に、CSS3だけで標準のRSSフィードロゴを作成する簡単な方法をお見せしたいので、最初のCSS3フィードロゴを取得するには、包括的な手順とグラフィックを使用してチュートリアルに従ってください。! これは、すぐに作成できるもののプレビューです。チュートリアルの最後にソースファイルをダウンロードすることもできます。. ステップ1 HTMLファイルを作成します。完全に空の場合は、ファイルに次のコードを挿入します。. 私の最初のCSS3 RSSフィードロゴ - ここにあなたのHTMLを挿入 - ステップ2 以下のコードをHTMLファイルに挿入してフィードボックスを作成します。. フィードボックスのHTML フィードボックスのCSS span.feed-box display：block;幅：200ピクセル。高さ：200ピクセル。マージン：0自動。背景：＃F9A004。ボックスシャドウ：1px 1px 0＃C27C03、2px...

CSSには擬似クラスがありません クリックイベントのターゲティング, そしてこれは 最大の問題点 フロントエンド開発者最も近い疑似クラスは ：アクティブ これは、ユーザーがマウスをその上に置いている間の要素のスタイルを設定します。. ただし、この効果は短命です。ユーザーがマウスを放すと, ：アクティブ もう動作しません。他の方法を見つける必要があります。 CSSでクリックイベントをエミュレートする. この記事は読者の要望に応えて執筆されたものです。 純粋なCSSでクリックイベントをターゲットにする 特定のユースケースでは, 画像ズーム. あなたは以下の最終結果を見ることができます - のためのCSSだけの解決策 クリックで画像拡大. CodePenのPreethi（@rpsthecoder）によるPen Image Zoom（Pure CSS）を参照してください。. CSSのみのソリューションを使用する場合 先に進む前に、イメージズームにはCSSのみの方法（イメージの寸法を変更する方法）をお勧めします。 シングル または いくつかの画像のグループ ズーム機能を使う. のために...

の人気 フローティングアクションメニュー 特にMedium.comがその機能を流行させて以来、その数は増え続けています。簡単に言うと、フローティングアクションメニュー 浮き出る あなたがいるとき テキストを選択してください Webページに。選択範囲の近くにメニューが表示されます。, さまざまなアクションを表示 選択したテキストをすばやくフォーマット、強調表示、または共有できます。. このチュートリアルでは、表示方法について説明します。 選択したテキストスニペットのアクションメニュー Webページに。私達の行動メニューはユーザーを可能にします 選択したテキストをツイートする フォロワーに. 1. HTMLを作成する の スターターHTMLは簡単です, 必要なだけ いくつかのテキスト ユーザーが選択できます。デモには、私が使用します “ハートとハンター” 就寝時の話 サンプルテキストとして. ハートとハンター ハートはかつて… … 2.アクションメニューテンプレートを作成する 私は HTMLコードを追加する...

CSS3は、HTMLとCSSだけを使ってWebサイト上に構築できるものの実現可能性を高めます。あなたは私たちが以前に特集した素晴らしい例を見つけることができます。しかし、私たち自身に先んじすぎないようにしましょう。複雑な設計には頭痛の種となるコードが必要になります。. 代わりに、私たちはあなたを助けるために簡単なものを作成しようとしています 最初にCSSで形と位置を理解する, より高度なデザインに挑戦する前に。バレンタインデーはもうすぐ出るので、HTMLとCSSを使ってハートの形を作りましょう。. 基礎 基本的には、長方形や円のような1つ以上の基本的な形状を結合することによって新しい形状を作成できます。ハートの形を調べると、それが構成されていることがわかります。 二つの円と四角形の組み合わせ. HTML要素は基本的に正方形または長方形です。 CSS3のボーダー半径のおかげで、長方形を円に簡単に変換できます。. を追加することから始めます 私たちの心臓の形の基礎としての要素. 次に、幅と高さを等しく指定して正方形にします。好きな背景色を選択してください. .ハート形位置：相対;幅：200ピクセル。高さ：200ピクセル。背景色：rgba（250、184、66、0.8）。 次は、円を作ります. 新しい要素を追加するのではなく、擬似要素を利用します。, ：前 そして ：後. 最初に設定します ：前 最初の円としての擬似要素divと同じように、幅と高さが同じ大きさの正方形にします。それから、それを50％のborder-radiusを与えることによってそれを円に変換し、それを正方形の左側に置く. .ハート型：の前：絶対位置;下：0px。左：-100ピクセル。幅：200ピクセル。高さ：200ピクセル。 content： "; -webkit-border-radius：50％; -moz-border-radius：50％; -o-border-radius：50％; border-radius：50％;背景色：rgba（250,184,66） 、0.8）; 正方形と一緒に我々はこのような結果を得るでしょう：...

数ヶ月前、CSS3を使ってRSSフィードロゴを作成する方法を紹介しました。もう少し複雑なものを作成するのは楽しいことだと思いました。本日の記事では、CSS3だけを使ってGmailロゴの1つではなく2つのバリエーションを作成する方法を紹介します. へのショートカット： GmailロゴCSSチュートリアル＃1 |プレビュー GmailロゴCSSチュートリアル＃2 |プレビュー Gmailロゴ＃1 この最初のロゴはシンプルで、作成もかなり簡単です。さらに苦労せずに、ここにステップがあります。お気に入りのコードエディタを起動して次のHTMLコードを入力し、名前を付けて保存しましょう。 logo-gmail.html. Gmail CSSロゴ 次のCSSスタイルを デフォルトのCSS値をリセットする. .gmail-logo、.gmail-logo *、.gmail-logo *：前、.gmail-logo *：後マージン：0;パディング：０。背景：透明です。ボーダー：0。アウトライン：0;表示ブロック;フォント：通常通常0/0セリフ。 次のCSSコードは、Gmailロゴの赤い背景と丸みを帯びた側面を示しています。. .gmail-logo margin：110px auto;背景：rgb（201、44、25）。幅：600ピクセル。高さ：400ピクセル。ボーダートップ：4ピクセルソリッドRGB（201、44、25）。ボーダーボトム：4pxソリッドrgb（201、44、25）。 border-radius：10ピクセル。 -moz-border-radius：10ピクセル。 -webkit-border-radius：10ピクセル。 それから、赤い背景の中に白いボックスを作ります。. .gmail-logo .gmail-box オーバーフロー：非表示。フロート：左。幅：440ピクセル。高さ：400ピクセル。マージン：0 0 0...