よく使用される 20 の CSS テクニック

1. 白黒画像

このコードを使用すると、カラー写真が白黒写真として表示されます。素敵だと思いませんか?

img.desaturate {
フィルター: グレースケール(100%);
-webkit-filter: グレースケール(100%);
-moz-filter: グレースケール(100%);
-ms-filter: グレースケール(100%) ;
-o-filter: greyscale(100%);
}

2. メニューに境界線を適用/非適用するには not() を使用します

まず各メニュー項目に境界線を追加します

/* add border */
.nav li {
border-right: 1px Solid #666;
}

...そして最後の要素を削除します...

// border を削除 /

.nav li:last- child {
border-right: none;
}

... :not() 疑似クラスを直接使用して要素を適用できます:

.nav li:not(:last-child) {
border-右: 1px ソリッド #666 ;
}

こうすることで、コードがきれいになり、読みやすく、理解しやすくなります。

もちろん、新しい要素に兄弟要素がある場合は、ユニバーサル兄弟セレクター (~) を使用することもできます:

..nav li:first-child ~ li {

border-left: 1px Solid #666;页

3. ページ上部のシャドウ

以下の単純な CSS3 コード フラグメントにより、Web ページに美しい上部シャドウ効果を追加できます。

左: 0;

幅: 100%;

高さ: 10px;

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0 ,.8);
-moz-box -shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);

4. 本文に行の高さを追加します


p、h マークなどに個別に行の高さを追加する必要があります。本文に追加するだけです:

body {
line-height: 1;
}

この方法で、テキスト要素は body から簡単に継承できます。

5. すべてを垂直方向に中央揃えにする

すべての要素を垂直方向に中央揃えにするのはとても簡単です:

html, body {
height: 100%;

margin: 0;

}

body { -webkit -align-アイテム: センター; -ms-flex-align: センター;

align-items: センター;

ディスプレイ: -webkit-flex;

ディスプレイ: flex;

}


とてもシンプルですね?

注: IE11 のフレックスボックスには注意してください。


6. カンマ区切りリスト


は、HTML リスト項目を実際のカンマ区切りリストのように見せます:

ul > li:not(:last-child)::after {

content: " ," ;

}

最後のリスト項目には :not() 疑似クラスを使用します。

7. 負の nth-child を使用して項目を選択します

CSS で負の nth-child を使用して項目 1 から項目 n を選択します。

li {
display: none;

}

/* 項目 1 ～ 3 を選択して表示します */

li:nth-child(-n+3) { display: block;}

8アイコンには SVG を使用します


アイコンに SVG を使用しない理由はありません:

.logo {
background: url("logo.svg");
}

SVG は、すべての解像度タイプの互換性に対して適切に調整されます。また、IE9 に戻ったすべてのブラウザをサポートします。こうすることで、.png、.jpg、または .gif ファイルを回避できます。

9. 表示テキストを最適化する

すべてのデバイスでフォントが最適に表示されない場合があるため、デバイスのブラウザを使用してください:

html {
-moz-osx-font-smoothing : greyscale;

-webkit- font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

注: optimizeLegibility は責任を持って使用してください。また、IE/Edge はテキスト レンダリングをサポートしていません。

10. 純粋な CSS スライダーには max-height を使用します

CSS のみのスライダーを実装するには、max-height とオーバーフロー非表示を使用します:

.slider ul {
max-height: 0;

overlow: hidden; }

.slider:hover ul {

max-height: 1000px;transition: .3s easy;}

11. box-sizing を継承する


box-sizing に html を継承させます:

html {
box-sizing: border-box;
}

*, *:before, *:after {

box-sizing: respect;

}

これにより、他の動作を活用するプラグインや他のコンポーネントでの処理が容易になります。サイズが変更されました。

12. 表のセルは同じ幅です


表を扱うのは非常に面倒なので、必ず table-layout:fixed を使用してセルの幅を等しく保ちます:

.calendar {
table-layout:修正済み;
}

13. Flexbox を使用して、さまざまなマージンハックを排除します

列区切り文字を使用する必要がある場合は、フレックスボックスの space-between プロパティを使用して、n 番目、最初、最後の子のハックを取り除くことができます:

.list {
display: flex;
justify-content : space-between;
}

.list .person {
flex-basis: 23%;
}

これで、リスト区切り文字が等間隔の位置に表示されます。

14. 空のリンクには属性セレクターを使用します

a 要素にテキスト値がなく、href 属性にリンクがある場合にリンクを表示します:

a[href^="http"]:empty::before {
content: attr(href);
}

とても便利です。

15. マウスのダブルクリックを検出します

HTML:

ダブルクリックしてください

CSS:

.test3 spain {
位置: 相対;
}
.test3スパン a {
位置: 相対;
z-インデックス: 2;
}
.test3 スパン a:hover, .test3 スパン a:active {
z-index: 4;
}
.test3 スパン入力 {
背景:透明;
ボーダー: 0;
カーソル: ポインタ;
位置: 絶対;
上: -1px;
左: 0;
幅: 101%; /* ハッキー */
高さ: 301%;
z-index: 3;
}
.test3 span input:focus {
background: traditional;
border: 0;
z-index: 1;
}

16.

を使用して三角形を記述するCSS三角形のコードを記述するためのボーダーであり、IE6 と互換性があります。

/* 上向きの矢印を作成します */
div.arrow-up {
width:0px;
height:0px;
border-left:5px plain traditional / * 左矢印の傾き */
border-right:5px ソリッド透明; /* 右矢印の傾き */
border-bottom:5px ソリッド #2f2f2f; /* ここに背景色を追加します */
font-size:0px;
line- height:0px;
}

/* 下向きの矢印を作成します */
div.arrow-down {
width:0px;
height:0px;
border-left:5px 実線透明;
border-right :5px 固体透明;
border-top:5px 固体 #2f2f2f;
font-size:0px;
line-height:0px;
}

/* 左向きの矢印を作成します */
div.arrow-left { # 2f2f2f; /* ここに背景色を追加します */
font-size:0px;
line-height:0px;
}

/* 右向きの矢印を作成します */
div.arrow-right {
width: 0px;
height:0px;
border-bottom:5px ソリッド透明; /* 左矢印スラント */
ボーダートップ: 5px ソリッド透明; /* 右矢印スラント */
ボーダー左:5px ソリッド #2f2f2f; * 下部、ここに背景色を追加します */
font-size:0px;
line-height:0px;
}



17 CSS3 calc()

calc() の使用法は関数と似ています。要素を設定できます 動的値:

/* Basic calc */.simpleBlock {

width: calc(100% - 100px);

}

/* calc in calc */
.complexBlock {
width: calc(100 % - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}



18. テキストのグラデーション効果非常に人気があり、CSS3 を使用して簡単に実装できます:

h2[data-text] {

position:relative;

}h2[data-text]::after { content: attr(data-text);

z インデックス: 10;

カラー: #e3e3e3;

位置: 絶対;

上: 0;
左: 0;
-webkit-mask-image: -webkit-gradient(linear, 左上, 左下, from( rgba(0, 0,0,0))、カラーストップ(50%、rgba(0,0,0,1))、to(rgba(0,0,0,0)));}



19. マウスイベントの無効化


CSS3 の新しいポインターイベントを使用すると、たとえば、次のスタイルが設定されている場合、リンクをクリックできなくなります。

.disabled { pointer-events: none;

20. テキストをぼかします

シンプルで美しいテキストぼかし効果です。

.blur {

color: 透明; text-shadow: 0 0 5px rgba(0,0,0,0.5);

}