非常に優れた CSS スキル 10 選のコレクションと共有

ここでは、CSS テクニックを巧みに使用することで、HTML を変更せずにブログやテンプレートの外観を良くすることができます。ブログのデザインをより魅力的でクールなものにするための非常に役立つ CSS のヒントをいくつか集めました。
テンプレートやブログのテーマをデザインするとき、私はよく「CSS を試行錯誤」して、どの配色とどの CSS プロパティの組み合わせでページの要素をより完璧にできるかを確認します。あ、私が「CSS を試行錯誤」と言うのは、満足のいく効果が得られるまであらゆることを試してみるからです。これらのさまざまな CSS プロパティの中で、私が最もよく使用するものは、ここにリストされているものです。

ブログを書き始めてからずっと、CSS に触れてきました。私はデザインも CSS も大好きです。ブログを通じて、PHP、CSS、さらには HTML も学びました。ここでは、ブログや個人の Web サイトで使用できる 10 個の優れた CSS のヒントを集めました。ブログの要素をうまく整理し、見栄えを良くするのに役立ちます。では、以下のコンテンツから始めましょう。気に入っていただければ幸いです。
1. ブログの写真のサイズを調整する簡単な方法

コードをコピー

コードは次のとおりです。

コンテンツ画像 {
高さ:自動;
幅:500ピクセル;
}

これは、ブログ上の画像のサイズを変更する最も簡単で効果的な方法です。コンテンツ内のすべての画像の幅を 500 ピクセルに設定し、高さは幅に合わせて調整されます。現在、この方法を使用して、このブログコンテンツの画像サイズを再定義しています。
2. IE HTML ハック

コードをコピー

コードは次のとおりです。

div#コンテンツ {幅: 580px}
* html 本体 div#content {幅: 600px}

IE の特別なスタイルをカスタマイズできるように、div の前に * を追加します。
3. CSS シャドウ

コードをコピー

コードは次のとおりです。

影
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
ボックスの影: 3px 3px 5px 6px #ccc;
}

上記のスタイルは、ブロックレベルの要素、または div でラップされた任意のクラスやタグに適用できます。水平オフセットと垂直オフセット、ぼかし半径、影の塗りつぶし色を設定する必要があります。この記事に掲載されている写真でその例を見ることができます。
4. CSSの最初の単語の拡大

コードをコピー

コードは次のとおりです。

p:最初の文字 {
表示: ブロック;
フロート: 左;
マージン: 5px 5px 0 0;
色: 赤;
フォントサイズ: 1.4em;
背景: #ddd;
フォントファミリー: Helvetica;
}

最初の文字の拡大を定義するのは簡単です。CSS の first-letter プロパティを使用して、ブログの最初の文字を自動的に選択します。その後、CSS をカスタマイズして、最初の文字のスタイル (フォントサイズを大きくする、斜体にするなど) を設定できます。
5. CSSで画像を反転する

コードをコピー

コードは次のとおりです。

#コンテンツ画像{
-moz-transform: スケールX(-1);
-o-変換: スケールX(-1);
-webkit-transform: スケールX(-1);
変換: スケールX(-1);
フィルター: FlipH;
-ms-filter: "FlipH";
}

上記のCSSプロパティを使用して任意の画像を反転できます
6. クリックしたリンクボックスを削除する

コードをコピー

コードは次のとおりです。

{アウトライン: なし}
または
{アウトライン: 0}

一部のブログでリンクをクリックすると、リンクの周囲に点線の枠が表示されることに気づいたことがあるでしょう。上記の小さな CSS スニペットを使用して、これらの境界線を削除できます。
7. CSS で特殊フォントを使用する<br />CSS を使用して特殊フォントを読み込むことができます。フォントを TTF 形式でサーバーにアップロードし、フォントルールを使用して CSS にインポートするだけです。
8. 要素の透明度

コードをコピー

コードは次のとおりです。

要素 {
フィルター:アルファ(不透明度=50);
-moz-不透明度:0.5;
-khtml-不透明度: 0.5;
不透明度: 0.5;
}

透明度プロパティを使用すると、どのブラウザでも要素を透明にすることができます。これらのプロパティは、IE を含むすべての主要ブラウザで機能します (PS: IE6 はスキップされますか?...)
9. CSSを使用してリンクの背後にURLを表示する

コードをコピー

コードは次のとおりです。

a:after{コンテンツ:" (" attr(href) ") ";}

これにより、リンクアンカーの後に URL が表示されます。フォントやその他のスタイルで定義することもできます。
10. ハンドヘルドデバイス用の特別なスタイルをカスタマイズする

コードをコピー

コードは次のとおりです。

ブログがレスポンシブでない場合、またはモバイルフォンで表示するときに特別なスタイルが必要な場合は、ブログのモバイルバージョンの CSS をカスタマイズできます。

<<: nginx の 2 つのモジュールの proxy_pass の違い