20 の高度な CSS ヒントのまとめ_html/css_WEB-ITnose

1. 白黒画像

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

img.desaturate {    filter: grayscale(100%);    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);}

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

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

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

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

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

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

.nav li:not(:last-child) {  border-right: 1px solid #666;}

この方法コードはきれいで、読みやすく、理解しやすいものになります。

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

..nav li:first-child ~ li {  border-left: 1px solid #666;}

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

次の単純な CSS3 コード スニペットは、Web ページに美しいトップ シャドウ効果を追加できます。

body:before {          content: "";          position: fixed;          top: -10px;          left: 0;          width: 100%;          height: 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);           z-index: 100;}

4. 本文に line-height を追加します

を追加する必要はありません。各ページに行の高さを個別に設定 p、h マークなど。本文に追加するだけです:

body {  line-height: 1;}

このようにして、テキスト要素を本文から簡単に継承できます。

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

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

html, body {  height: 100%;  margin: 0;}body {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  display: -webkit-flex;  display: flex;}

簡単ですよね。

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

6. カンマ区切りリスト

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

ul > li:not(:last-child)::after {  content: ",";}

最後のリスト項目には :not( ) 疑似クラス。

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

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

li {  display: none;}/* select items 1 through 3 and display them */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: grayscale;  -webkit-font-smoothing: antialiased;  text-rendering: 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 ease;}

11. sizing

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

html {  box-sizing: border-box;}*, *:before, *:after {  box-sizing: inherit;}

これにより、他の動作を利用するプラグインや他のコンポーネントでの box-sizing の変更が簡単になります。

12. 表のセルの幅は同じにする

表を扱うのは非常に面倒なので、必ず table-layout:fixed を使用してセルの幅を同じにしてください:

.calendar {  table-layout: fixed;}

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

列区切り文字を使用する必要がある場合は、次の方法で nth-child、first-child、last-child を削除できます。フレックスボックスハックの space-between プロパティ:

.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:

<div class="test3">  <span><input type="text" value=" " readonly="true" />  <a href="http://renpingjun.com">Double click me</a></span></div>

CSS は三角形を書き込みます

.test3 span {  position: relative;}.test3 span a {  position: relative;  z-index: 2;}.test3 span a:hover, .test3 span a:active {  z-index: 4;}.test3 span input {  background: transparent;  border: 0;  cursor: pointer;  position: absolute;  top: -1px;  left: 0;  width: 101%;  /* Hacky */  height: 301%; /* Hacky */  z-index: 3;}.test3 span input:focus {  background: transparent;  border: 0;  z-index: 1;}

17. CSS3 calc() の使用法

/* create an arrow that points up */div.arrow-up {  width:0px;  height:0px;  border-left:5px solid transparent;  /* left arrow slant */  border-right:5px solid transparent; /* right arrow slant */  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */  font-size:0px;  line-height:0px;} /* create an arrow that points down */div.arrow-down {  width:0px;  height:0px;  border-left:5px solid transparent;  border-right:5px solid transparent;  border-top:5px solid #2f2f2f;  font-size:0px;  line-height:0px;} /* create an arrow that points left */div.arrow-left {  width:0px;  height:0px;  border-bottom:5px solid transparent;  /* left arrow slant */  border-top:5px solid transparent; /* right arrow slant */  border-right:5px solid #2f2f2f; /* bottom, add background color here */  font-size:0px;  line-height:0px;} /* create an arrow that points right */div.arrow-right {  width:0px;  height:0px;  border-bottom:5px solid transparent;  /* left arrow slant */  border-top:5px solid transparent; /* right arrow slant */  border-left:5px solid #2f2f2f; /* bottom, add background color here */  font-size:0px;  line-height:0px;}

calc() の使用法は関数に似ており、要素に動的な値を設定できます:

18. テキストのグラデーション

/* 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);}

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

19. マウス イベントを無効にする

h2[data-text] {  position: relative;}h2[data-text]::after {  content: attr(data-text);  z-index: 10;  color: #e3e3e3;  position: absolute;  top: 0;  left: 0;  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

CSS3 の新しいポインター イベント要素のマウス イベントを無効にできます。たとえば、次のスタイルが設定されている場合、リンクをクリックできません。

20. テキストをぼかし

.disabled { pointer-events: none; }

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

.blur {   color: transparent;   text-shadow: 0 0 5px rgba(0,0,0,0.5);}