デザイナーと開発者を助ける9種類の実用的なCSSテクニック

あるウェブデザイナーの頭の中には、彼の仕事に関する多くの知識が満たされているに違いない.CSSといえば、Webサイトの設計を支援し、設計により多くの可能性を持たせ、より簡単な方法でWebサイトをより魅力的にすることができますが、伝統的な技術を使用することは容易ではありません.
フロントエンド、ページにとって、CSSは確かに第一選択のスキルです.
以下に9種類の非常に実用的なCSS 3属性と使用テクニックを示します.

1.フィレット効果

フィレット編集者については、さまざまな議論で頻繁に耳にしたことがあります.実現が面倒で、互換性が困難で、性能が悪いなどの欠点があります.現在のWebデザインに必要なのは様々な新しい開発技術であるため、ますます多くのフロントエンドとページがHTML 5を使用し始めている.
HTML 5では、昔は画像を使って実現しなければならなかったニーズが、今ではコードで実現できるようになった.CSS 3に組み込まれた「border-radius」は、HTML要素のフィレットを直接定義し、すべてのブラウザの最新バージョンをサポートするために使用できます.
次のコードで実現できます.

1
2
3
4

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

次のような組み合わせバージョンを使用したり、上のコードを速記したりすることもできます.

1

-moz-border-radius: 10px 20px 30px 0;

IEブラウザはCSS 3属性をサポートしており、この英語の文章からさらに理解することができます.

2.シャドウ効果

もう1つのCSS 3で実現可能な興味深い機能はシャドウエフェクト(box-shadow)であり、「box-shadow」により非常に簡単に実現できる.一般的な主流ブラウザではこのプロパティがサポートされていますが、Safariブラウザではオプションの接頭辞付き-webkit-box-shadowプロパティがサポートされています.
コードは次のとおりです.

1
2
3
4
5

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

次のJavaScriptコードも同様のシャドウ効果を実現します.

1

object.style.boxShadow="20px 10px 7px #ccc"

3.@Media属性

@Mediaは、アプリケーションスタイルを直接指定してメディア属性を導入することができ、同じスタイルで異なる画面サイズのページスタイルの変化に使用することができ、応答型のページ設計における造形の変化にも役立ちます.以下のコードを簡単に修正することで実現できます.

1
2
3

@media screen and (max-width: 480px) {

}

次の@media printを使用すると、CSSの印刷プレビューを指定することもできます.

1
2
3
4

@media print
{
p.content { color: #ccc }
}

4.グラデーション塗りを追加

CSS 3でのグラデーション効果はもう一つの驚くべき属性である.現在、すべてのブラウザでサポートされていないため、レイアウトを設定するのに完全に依存しないほうがいいです.ここではCSSベースの勾配ナビゲーションバーを参考にしてみましょう.
以下は実現の方式である.

1

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

5.背景寸法

バックグラウンドサイズ(Background size)はCSS 3で最も実用的な効果の一つであり、現在多くのブラウザでサポートされている.Background sizeプロパティを使用すると、背景図のサイズを自由に制御できます.
昔から背景に使われていた画像の大きさはスタイルの中では調整できませんが、それがどんなに悪いか想像できない場合は、自分のパソコンのデスクトップで壁紙を作るときに、心に合っているのにデスクトップのサイズに合わない画像に出会ったことを思い出してみてください.
そのようなデスクトップは醜いので、審美観に合格した人はスクリーンを壊す衝動があります.コードを変更することで、背景画像を自分のページに適応することができます.

1
2
3
4
5
6

div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

6  @font face

属性はCSS 3を用いて種々のフォントを変換する際にその実用性を十分に証明している.以前は様々なフォントライセンスの問題で、設計過程でいくつかの特定のフォントしか選択できなかった.@font faceでフォントの名前をカスタマイズできます.

1
2
3
4
5
6
7

@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */

}

その後、簡単なコードで、いつでもどこでもカスタムmyskasingFontフォントシリーズを使用することができます.

1
2
3
4

div
{
font-family:mySmashingFont;
}

7.clearfixプロパティ

Overflow:hiddenフローティングをクリアする効果が本当にあなたの第一選択ではない場合は、clearfixはあなたのより良い選択であり、異なるHTML要素を個別に処理することができます.

1
2
3

.clearfix {
display: inline-block;
}

1
2
3
4
5
6
7
8

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

8.  Margin: 0 auto

Margin:0 autoはCSSの最も基礎的な機能を実現し、最も簡単で最もよく使われる機能である中央を実現するためにもよく使われています.CSS自体には中央を指定する機能はありませんが、auto marginでエッジを指定することで、中央を指定する機能は非常に簡単に実現できます.
このプロパティにより、簡単なコードで要素の中央を実現できます.ただし、以下のコードのようにdivに幅を設定しなければならないことに注意してください.

1
2
3
4
5

.myDiv {
margin: 0 auto;
width:600px;

}

9.  Overflow: hidden

Overflow:Hiddenは、主にオーバーフローを隠す役割を果たしていますが、上記のように、フローティングをクリアする別の機能はあまり使われていません.

1
2
3
4

div
{
overflow:hidden;
}

Via:Smashing HUB
(Warlialは雷鋒網の原稿を提供し、転載は雷鋒網と作者から明記し、本ページにチェーンバックしてください)