コンピュータ ウィンドウズ インターネット
拡大する
家 ›

点滅する CSS アニメーション。 Safari での CSS 変換中のちらつきを解消します。 改ページを追加する

CSS 変換を使用すると、Safari のページ上の一部の要素のプロパティが不思議なことに変更されることに私が気づいたのはこれが初めてではありません。 他のブラウザではこのようなことはあまり発生しません。

このようなアーティファクトは、変換が :hover 擬似クラス上で行われる場合、つまりマウスが要素の上に移動したときにトリガーされる場合に特に目立ちます。 私の場合、.btn ボタンの上にマウスを置いたときに .btn ボタンを永続的に拡大すると、隣接するブロック内のテキストのスムージングのタイプが変更されました。

Btn (transition: all .2s easy-in-out; ) .btn:hover (transform:scale(1.1); )

この問題はレンダリング リソースの不足に関連しており、修正するのは非常に簡単です。

翻訳3D

この問題を解決する最も簡単な方法は、CSS の 2D アニメーションではデフォルトで無効になっているハードウェア アクセラレーションを有効にすることです。 これを行うには、空の 3D アニメーションを作成するだけです。

Webkit-transform：translate3d(0,0,0);

それはそれで、でも松葉杖なんです。

変更されます

CSS には、比較的新しく、まだあまり知られていない will-change というプロパティがあります。これは、要素に対する今後の変更の可能性に関する情報をブラウザーに事前に提供します。 たとえば、要素が変換される場合、エネルギーを節約するためにブラウザにこれについて警告することができます。 上記のボタンの場合、次のようになります。

Btn ( 遷移: すべての .2 のイーズインアウト; will-change: 変換; )

複数のパラメータを変更する場合は、カンマで区切って順番に指定できます。 たとえば、透明度を変更する変換の場合は次のようになります。

Will-change: 変換、不透明度。

このようにして、ブラウザーは負荷の高い処理を事前に準備し、リソースの使用を最適化できます。 これにより、ページ上にさまざまな副作用が現れるのを避けることができます。

私の電報を購読して、サイトに掲載されていないものも含め、新しい資料をいち早く受け取りましょう。

CSS は、間違いなく、私たちが使用する最も重要なマークアップ言語の 1 つです。 また、HTML はドキュメントの構造を記述しますが、ブラウザのバージョンによってはその動作が予測できない場合があります。 CSS は、ページの表示のすべての不一致を修正し、外観をデザインできるツールです。

段落を使用してテキストを非表示にする

このテクニックは会社のロゴに非常に役立ちます。 ロゴとして写真を使用することが多いですが、SEOを考えるとh1タグ内に社名を表示すると良いでしょう。 この例は、これを実装する最良の方法です。 実際、画面外のテキストを非表示にし、代わりに背景画像を割り当てているだけです。

H1 ( text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") リピートなしスクロール; )

ファイル形式に応じたリンクのスタイル設定

この例は、ユーザー エクスペリエンスを向上させることを目的としています。 インターネット上では、リンクがどこにつながっているのか知らずにリンクをたどることがよくあります。 次のコード スニペットは、リンクの横に小さなアイコンを表示するために使用されます。 このような画像は、これが外部リンク、電子メール アドレス、PDF ファイル、画像などであることをユーザーに伝えます。

/* 外部リンク */ a(padding-right: 20px; 背景: url(external.gif) no-repeat center right; ) /* メール */ a( padding-right: 20px; 背景: url(email.png ) no-repeat center right; ) /* pdfs */ a(padding-right: 20px; background: url(pdf.png) no-repeat center right; )

IE の複数行フィールドからスクロールバーを削除する

Internet Explorer には、コンテンツが指定されたサイズ内にある場合でも、複数行のフィールドにスクロール バーが追加される迷惑な習慣があります。 この欠陥は、次のコード行で簡単に修正できます。

Textarea( オーバーフロー:自動; )

頭文字

今日、これはブログやニュースサイトで非常に一般的な現象です。 実装がいかに簡単か、そして古いブラウザではどれほど性能が低下するかに驚かれるでしょう。

P:first-letter(display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; )

CSSの透明性

透明度は、ブラウザごとに異なる方法で割り当てられるプロパティです。 次のコード スニペットを使用すると、すべてのブラウザに一度に透明度を割り当てることができます。

透明 ( filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; )

CSS リセット by Eric Meyer

実際、Eric Meyer によって提案された css-reset は、すでに広く使用される標準となっています。 多くの有名な開発者が採用しているので品質も安心です。

Html、ボディ、div、span、アプレット、オブジェクト、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、abbr、頭字語、アドレス、big、cite、code、del、dfn、 em、フォント、img、ins、kbd、q、s、サンプ、小さい、ストライク、強い、サブ、sup、tt、var、b、u、i、センター、dl、dt、dd、ol、ul、li、フィールドセット、フォーム、ラベル、凡例、テーブル、キャプション、tbody、tfoot、thead、tr、th、td (マージン: 0; パディング: 0; ボーダー: 0; アウトライン: 0; フォント サイズ: 100%; 垂直配置: ベースライン; 背景: 透明; ) 本体 (行の高さ: 1; ) ol, ul (リストスタイル: なし; ) blockquote, q (引用符: なし; ) blockquote:before, blockquote:after, q:before, q :after ( content: ""; content: none; ) /* フォーカス スタイルを定義することを忘れないでください。 */ :focus (outline: 0; ) /* 何らかの方法で挿入部分を強調表示することを忘れないでください。 */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* テーブルのマークアップにはまだ「cellspacing="0"」が必要です */ table ( border-collapse: Collapse; border-spacing : 0; )

画像プリローダー

必要な要素にアクセスする際の遅延やちらつきを解消するために、画像を事前にロードすると便利な場合があります。

Div.loader( 背景:url(images/hover.gif) 繰り返しなし; 背景:url(images/hover2.gif) 繰り返しなし; 背景:url(images/hover3.gif) 繰り返しなし; margin-left: -10000ピクセル; )

ボタンの単純な CSS スプライト

ボタンやリンクに背景画像を付けるのが一般的であり、ユーザー エクスペリエンスを向上させるために、そのような要素に追加の効果が適用されることがよくあります。 これらの効果の 1 つは、マウス オーバー ボタン インジケーターです。 スプライトを使用すると、background-position プロパティを特定の値に変更することでこの効果を実装でき、マウスがボタンの上に移動したときに背景画像が表示されます。 シンプルですが効果的な解決策です。

A (表示: ブロック; 背景: url(sprite.png) 繰り返しなし; 高さ: 30px; 幅: 250px; ) a:hover (background-position: 0 -30px; )

Google フォント API

少し前に、Google は Web 開発者向けに、ページ上で新しい非標準フォントをダウンロードして使用できる素晴らしいリソースを実装しました。 太字、斜体など、ダウンロードできるさまざまなフォント オプションもあります。 Google のコレクションはまだ限られていますが、かなり多くのフォントが利用可能です。 まず、必要なフォントとバリエーションの名前を含む動的に生成された CSS ファイルを含め、その後は通常どおり CSS でフォ​​ント名を使用するだけです。 詳細については、Google Font API をご覧ください。

Inconsolata:italic|Droid+Sans"> body ( font-family: "Tangerine", "Inconsolata", "Droid Sans", serif; font-size: 48px; )

さまざまなブラウザ向けのハック

特定のブラウザのバグを修正すると便利な場合がありますが、条件付きコメントが常に最適な解決策であるとは限りません。 Chris Coyier によるブラウザ ハックのリストは、単純な CSS を使用して特定のブラウザにプロパティを割り当てるのに役立ちます。

/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass( ) /* IE 7 および最新のブラウザ */ html>body .yourclass ( ) /* 最新のブラウザ (IE 7 ではない) */ html>/**/body .yourclass ( ) /* Opera 9.27 以前 */ html:first-child .yourclass ( ) /* Safari */ html body:last-child .yourclass ( ) /* Safari 3+ , Chrome 1 以降、Opera 9 以降、Fx 3.5 以降 */ body:nth-of-type(1).yourclass ( ) /* Safari 3 以降、Chrome 1 以降、Opera 9 以降、Fx 3.5 以降 */ body:first -of-type .yourclass ( ) /* Safari 3 以降、Chrome 1 以降 */ @media 画面および (-webkit-min-device-pixel-ratio:0) ( .yourclass ( ) )

固定地下室

常に画面の下部に貼り付けられるフッターを作成するのは難しい作業だと思うかもしれません。 ただし、単純な地下室が必要な場合は、まったく難しいことではありません。 ここでは IE6 のちょっとしたハックを使用する必要がありますが、それ以外は非常に簡単です。

#footer ( 位置:固定; 左:0ピクセル; 底:0ピクセル; 高さ:30ピクセル; 幅:100%; 背景:#999; ) /* IE 6 */ * html #footer ( 位置:絶対; トップ:式(( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop)) +"ピクセル"); )

画像を回転する

画像の回転は、特に、事前に回転させた新しい画像をロードする代わりに使用できる場合には、非常に便利です。 矢印に 1 つの画像のみを使用したいが、ページ上に複数の画像があり、すべて異なる方向を向いているとします。 あなたの問題の解決策は次のとおりです。

Img.flip ( -moz-transform:scaleX(-1); -o-transform:scaleX(-1); -webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH; - ms-filter: "FlipH"; )

クリアフィックス

少し前に、誰かがドキュメントに追加のマークアップを追加せずにフロートのストリームを削除する時が来たと判断しました。 この解決策の結果、浮動要素を含むコンテナに適用して浮動要素をクリアできるクラスが作成されました。 これは現在非常に便利で広く普及している方法です。

Clearfix:after ( 表示: 非表示; 表示: ブロック; フォントサイズ: 0; コンテンツ: " "; クリア: 両方; 高さ: 0; ) .clearfix (表示: インラインブロック; ) /* コメント付きバックスラッシュ ハックを開始 */ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* コメント化されたバックスラッシュ ハックを閉じる */

丸い角

最新のブラウザでは CSS3 が段階的に採用されているため、丸い角を作成するのが非常に簡単になりました。 残念ながら、バージョン 8 を含め、IE では CSS3 はまだサポートされていませんが、IE9 では追加される予定です。

Round( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* 将来性のある機能 */ -khtml-border-radius: 10px; /* 古い Konqueror ブラウザ用 */ )

スタイルのオーバーライド

CSS の ! important を知らない人は、これが非常に強力で使いやすいツールであるため、私を驚かせ続けています。 非常に簡単に言うと、末尾に ! important が付いたルールは、CSS ファイルまたは線スタイルの任意の場所にあるその要素に適用されている同じルールをオーバーライドします。

P( font-size:20px !重要; )

フォントフェイス

Font-face は、IE6 が最新のブラウザーと考えられていた時代から存在していましたが、昨年まで広く使用されていませんでした。 このプロパティは最新のブラウザーで十分にサポートされるようになり、プロジェクトで安全でないフォントを使用するための優れた方法を提供します。 時間を節約するために、特別な Font Squirrel Font Face ジェネレーターを使用できます。

@font-face ( font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url ("GraublauWeb.ttf") format("truetype"); )

サイトを中央に配置する

一般的なデザイン手法は、サイトの水平方向の中央揃えです。 これは非常に簡単に実装できます。

IEの最小高さ

この例では、最小の高さを設定する際の IE の単純だが迷惑なバグを修正します。 一般に、IE は高さを最小の高さとして解釈するため、IE の高さが自動に設定されていない場合は、次のトリックでこのバグを修正できます。

ボックス ( min-height:500px; height:auto ! important; height:500px; )

写真をアップロードする

この画像読み込み効果は、すべてのコンテンツが読み込まれるまでプリローダーを表示することで、Ajax 読み込みをシミュレートします。 このソリューションは、大きくて読み込みに時間がかかる画像に最適です。

Img (背景: url(loader.gif) no-repeat 50% 50%; )

垂直センタリング

この小さなコードにより、追加のマークアップを使用せずに、コンテナーの内容を垂直方向の中央に配置することができます。 必要なのは、コンテナを表のセルとしてレンダリングし、vertical-align 属性を値に設定することだけです。

コンテナー (最小高さ: 10em; 表示: テーブルセル; 垂直方向の配置: 中央; )

カットの作成

まず、カットインとは何かを理解しましょう。 サイドバーは通常、ニュース リソースや雑誌サイトにあり、記事内にある小さなテキスト ブロックの形であり、場合によっては人々の意見や引用が含まれています。 インセットは非常に簡単に作成でき、正しく使用すると、記事のユーザー エクスペリエンスを大幅に向上させることができます。

Pullquote (幅: 300px; フロート: 右; マージン: 5px; フォントファミリー: Georgia、"Times New Roman"、Times、セリフ; フォント: イタリック太字 #ff0000 ; )

テキストの選択

ブラウザで選択したテキストの色を変更できることを誰もが知っているわけではありません。 これに必要なセレクターは 2 つだけです。

::選択 (色: #000000; 背景色: #FF0000; ) ::-moz-選択 (色: #000000; 背景: #FF0000; )

改ページを追加する

この例も、印刷時のユーザー インターフェイスを改善することを目的としています。 たとえば、記事を印刷する場合、コメントを記事のテキストから分離し、別のページに移動すると便利な場合があります。 コメント ブロックに class.page-break を追加すると、印刷時にすべてのコメントが別のページに表示されます。 通常、このクラスはサイト上のどこでも使用できます。

改ページ(改ページ前:常に; )

ボタンについて説明する前に、すべてのボタンに共通の設定を見てみましょう。

HTML

ボタンは非常に単純な HTML コードを使用します。

購読する

CSS

また、すべてのボタンには、キャプション テキストとリンクの選択解除に関する共通の設定があります。

ButtonText (フォント: 18px/1.5 Helvetica、Arial、サンセリフ; カラー: #fff; ) a (カラー: #fff; テキスト装飾: なし; )

通常、ユーザーはリンクまたはボタンの上にマウスを置くと、かなりソフトな効果を期待します。 そして私たちの場合、ボタンのサイズが変更され、追加のメッセージが表示されて大きくなります。

基本的なCSSコード

まず、ボタンに形と色を与えるだけで済みます。 高さ 28 ピクセル、幅 115 ピクセルを定義し、マージンとパディングを追加し、ボタンに明るい境界線を付けます。

#button1 (背景: #6292c2; ボーダー: 2px ソリッド #eee; 高さ: 28px; 幅: 115px; マージン: 50px 0 0 50px; パディング: 0 0 0 7px; オーバーフロー: 非表示; 表示: ブロック; )

CSS3 効果

シンプルなボタンに大量の CSS コードが伴うことを好む人もいます。 このセクションでは、ボタンの追加の CSS3 スタイルを提供します。 ボタンを使用しなくても問題ありませんが、ボタンを使用するとよりモダンな外観になります。

フレームの角を丸くしてグラデーションを加えます。 これは、任意の背景色と相互作用する暗いグラデーションを使用したちょっとしたトリックを使用します。

/*角丸*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; 境界半径: 15px; /*グラデーション*/ 背景画像: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: 線形グラデーション(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSSアニメーション

それではCSSトランジションを設定しましょう。 アニメーションはプロパティの変更に使用され、0.5 秒続きます。

マウスオーバー

残っているのは、ボタンの上にマウスを置いたときにボタンを展開するスタイルを追加することだけです。 メッセージ全体を表示するには、ボタンの幅が 230 ピクセルである必要があります。

#button1:ホバー (幅: 230px; )

簡単な色調変更

ボタン用の非常にシンプルで人気のある CSS 効果です。 マウスカーソルを乗せると背景色の色合いが滑らかに変化します。

基本的なCSSコード

CSS コードは前の例と非常によく似ています。 背景色を変えたり、形を少し変えたりしています。 また、テキストを中央揃えにし、垂直方向の中央揃えが行われるようにボタンの行の高さを設定します。

#button2 (背景: #d11717; ボーダー: 2px ソリッド #eee; 高さ: 38px; 幅: 125px; マージン: 50px 0 0 50px; オーバーフロー: 非表示; 表示: ブロック; テキスト配置: センター; 行の高さ: 38px; )

CSS3 効果

角の丸み、背景のグラデーション、追加の影を設定します。 rgbaを使用して影を黒く透明にします。

/*角丸*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; 境界半径: 10px; /*グラデーション*/ 背景画像: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: 線形グラデーション(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); ボックスシャドウ: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSSアニメーション

アニメーションは前の例とほとんど変わりません。

/*トランジション*/ -webkit-transition: すべて 0.5 秒で簡単になります。 -moz-transition: すべて 0.5 秒の緩和。 -o-transition: すべて 0.5 秒の緩和。 -ms-transition: すべて 0.5 秒の緩和。 トランジション: すべて 0.5 秒のイーズ。

マウスオーバー

マウスカーソルを置くと、別の背景色が設定されます。 素晴らしい効果を得るには、Photoshop で明るい色のオプションを選択してみてください。

#button2:hover (背景色: #ff3434; )

この効果は、背景画像の選択によっては非常に印象的なものになります。 デモでは平凡な背景が使用されており、エフェクトも平凡に見えます。 別の写真を使用してみると、素晴らしい効果が得られるかもしれません。

基本的なCSSコード

コードの主要部分は前の例と同じです。 背景画像を使用しておりますのでご了承ください。 背景の初期位置は「0 0」に設定されています。 カーソルを乗せると位置が上下に移動します。

#button3 (背景: #d11717 url("bkg-1.jpg"); 背景位置: 0 0; テキストシャドウ: 0px 2px 0px rgba(0, 0, 0, 0.3); フォントサイズ: 22px; 高さ: 58px; 幅: 155px; マージン: 50px 0 0 50px; オーバーフロー: 非表示; 表示: ブロック; text-align: center; line-height: 58px; )

CSS3 効果

この例では、丸い角と影など、特別なことは何もありません。

/*角丸*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; 境界半径: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); ボックスシャドウ: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSSアニメーション

この場合のアニメーションは、スムーズで興味深い効果を生み出すために長く続きます。

/*トランジション*/ -webkit-transition: すべて 0.8 秒で簡単になります。 -moz-transition: すべて 0.8 秒の緩和。 -o-transition: すべて 0.8 秒のイーズ。 -ms-transition: すべて 0.8 秒の緩和。 トランジション: すべて 0.8 秒のイーズ。

マウスオーバー

今度は背景画像を移動します。 開始位置は「0 0」でした。 2 番目のパラメータを 150px に設定します。 水平方向にシフトするには、最初のパラメータを変更する必要があります。

#button3:hover (背景位置: 0px 150px; )

3Dボタン押しシミュレーション

レッスンの最後の例は、マウス カーソルをボタンの上に置いたときにボタンの押下をシミュレートする一般的な 3D 方法についてです。 この場合のアニメーションは非常にシンプルなので、CSS トランジションも必要ありません。 しかし、最終結果は非常に印象的です。

基本的なCSSコード

ボタンの CSS コード。

#button4 (背景: #5c5c5c; テキストシャドウ: 0px 2px 0px rgba(0, 0, 0, 0.3); フォントサイズ: 22px; 高さ: 58px; 幅: 155px; マージン: 50px 0 0 50px; オーバーフロー: 非表示; 表示: ブロック; テキストの配置: 中央; 行の高さ: 58px; )

CSS3 効果

この場合、CSS3 は優れたオプションではなくなります。 この効果を実現するには、影とグラデーションが必要です。 シャープな影が 3D ボタンの外観を作成します。

/*角丸*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; 境界半径: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); ボックスシャドウ: 0px 6px 0px rgba(0, 0, 0, 0.8); /*グラデーション*/ 背景画像: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 背景画像: 線形グラデーション(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

マウスオーバー

この場合、ホバー セクションが最大になります。 影の長さが短くなり、マージンを使用して暗い領域のブレンドが作成されます。 これらすべてが合わさって、ボタンを押しているような錯覚を生み出します。 グラデーションを反転すると効果が高まります。

#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*グラデーション*/ 背景画像: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); 背景画像: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); 背景画像: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); 背景画像: -ms-linear-gradient(底部、rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); 背景画像: 線形グラデーション(底部, rgba(0, 0, 0, 0), rgba(0, 0、0、0.4)); )

全てにおいて良い日。 かなり前にブログとして記事を公開しました。 今日はさっそくデザインを始めてみたいと思いました。 著者自身に関するネイティブガジェットは完全に退屈で魅力的ではありません。

その結果、独自のデザインに非常に魅力的で有益な、個別のスタイルを作成することができました。おそらくウィジェットではなく、プロフィール カードです。 それをそう呼びます。 まあ、こんな感じ

最下部のサイドバーにあるテスト ブログの作業バージョン


何が載ってるの

1. あなたのプロフィール写真。
2. カスタマイズしやすいカード自体のデザインも美しい
3. あなたのニックネーム、姓または名
4 職業、趣味を記入できます
5.必要なページに2つのボタンを追加します。 これらは、著者に関する完全なページ、メイン ページ、地図、マスター クラス、ソーシャル ネットワーク上の公開ページへのリンクです。 何でも。
6. カードはブログのサイドバーにぴったりと収まります。

以下のコードをコピーすると、プロフィール カードをさらに彫刻します。



" alt="プロファイル" class="profile" />!}
ヴィカ・バラド ブロガー
VK の私のブロググループ


.snip1 (
フォントファミリー:「Roboto」、Arial、サンセリフ;
色: #fff;
位置: 相対的;
オーバーフロー: 非表示;
マージン: 10px;
最小幅: 230px;
最大幅: 315ピクセル;
幅: 100%;
色: #ffffff;
テキスト整列: 左;
行の高さ: 1.4em;
背景色: #141414;
}
.snip1 * (
-webkit-box-sizing: ボーダーボックス;
ボックスのサイズ設定: ボーダーボックス;
-webkit-transition: すべて 0.25 秒の緩和。
トランジション: すべて 0.25 秒のイーズ。
}
.snip1 img (
最大幅: 100%;
垂直配置: 上;
不透明度: 0.85;
}
.snip1 図キャプション (
幅: 100%;
背景色: #141414;
パディング: 25px;
位置: 相対的;
}
.snip1 図キャプション:前 (
位置: 絶対;
コンテンツ： "";
下: 100%。
左: 0;
幅: 0;
高さ: 0;
ボーダースタイル: ソリッド;
ボーダー幅: 55px 0 0 400px;
ボーダーカラー: 透明 透明 透明 #141414;
}
.snip1 図キャプション a (
パディング: 5px;
ボーダー: 1px ソリッド #ffffff;
色: #ffffff;
フォントサイズ: 0.7em;
テキスト変換: 大文字;
マージン: 10px 0;
表示: インラインブロック;
不透明度: 0.65;
幅: 47%;
テキスト整列: 中央;
フォントの太さ: 600;
文字間隔: 1px;
テキスト装飾: なし。
}
.snip1 figcaption a:hover (
不透明度: 1;
}
.snip1 .profile (
境界半径: 50%;
位置: 絶対;
下: 100%。
左: 25ピクセル;
z インデックス: 1;
最大幅: 90ピクセル;
不透明度: 1;
ボックスシャドウ: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .フォロー (
右マージン: 6%;
境界線の色: #2980b9;
色: #2980b9;
}
.snip1 h2 (
マージン: 0 0 5px;
フォントの太さ: 300;
}
.snip1 h2 スパン (
表示ブロック;
フォントサイズ: 0.5em;
色: #2980b9;
}
.snip1 p (
マージン: 0 0 10px;
フォントサイズ: 0.8em;
文字間隔: 1px;
不透明度: 0.8;
}
.snip1:hover:前、
.snip1.hover:前 (
下: 0;
ボックスシャドウ: 0 0 0px 白;
-webkit 遷移遅延: 0 秒;
遷移遅延: 0s;
}

$(".hover").mouseleave(
関数（）（
$(this).removeClass("hover");
}
);

https://w-dog.ru/wallpapers/10/19/380923269777589.jpg - これは写真のアドレスです - 上部の背景

https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - サムネイルのアドレス。 Google プロフィールにコピーしたり、別のアバターを設定したりできます。

ピンク色の枠内にニックネーム、名前、職業、説明文を記入します。

したがって、緑色で強調表示されているのは、ボタンをクリックしたときに遷移するページのアドレスです。

また、プロフィール カードのメインの背景のいくつかの場所に色を付けました #141414;

設定は非常に基本的なものなので、何も疑問は生じないと思います。 その場合は、コメントに書いてください。 それを理解しましょう。

完成したウィジェットコードをセクションにインストールします デザイン - HTML/JavaScript ガジェットブログのサイドバーにあります。 ちなみに、ユーザーが作者をすぐに知る機会がある場合、トップに表示されるのは悪くないと思います。 気分や季節に応じて、背景や画像を簡単に変更できます。 常に新しいものになります。 まあ、それはあなた次第です。

ご多幸をお祈り申し上げます。



質問に対する答えが見つかりませんでしたか? ここを見てください
純粋なCSSを使用してスライド式サイドメニューを作成する純粋なCSSを使用してスライド式サイドメニューを作成する
フレームワークを最新バージョンに更新するフレームワークを最新バージョンに更新する
ランダムメール。 電子メールアドレスジェネレータ。 一時的なメールアドレスを作成するための Gmail オプションランダムメール。 電子メールアドレスジェネレータ。 一時的なメールアドレスを作成するための Gmail オプション