ホームページ > 記事 > ウェブフロントエンド > 20 の高度な CSS ヒントのコレクション

20 の高度な CSS ヒントのコレクション

小云云オリジナル: 2017-12-05 13:29:161850ブラウズ

開発プロセス中に高度な CSS テクニックの使用方法を学ぶことは、開発にとって非常に有益です。この記事では、20 の高度な CSS テクニックを紹介します。

1. 白黒画像

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

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

使い方2. メニューの枠線を適用/解除します

まず、各メニュー項目に枠線を追加します。 もちろん、新しい要素に兄弟要素がある場合は、ユニバーサル兄弟セレクター (~) を使用することもできます:

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

3 これは、ページの上部の影です。以下の CSS3 コードスニペットは、Web ページに美しいトップシャドウ効果を追加できます:

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

4. 本文に line-height を追加しますに line-height を追加する必要はありません。各 p、h を個別にタグなど本文に追加するだけです:

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;
}

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

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

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

body {
  line-height: 1;
}

ほら、簡単ですよね。

注: IE11 のフレックスボックスには注意してください。 6. カンマ区切りリスト

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

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

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

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

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

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

E 对8. アイコンに SVG

を使用する SVG を使用する理由はありません:

li {
  display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

svg には、すべての解像度タイプの互換性があり、サポートされています。すべてのブラウザが IE9 に戻ります。こうすることで、.png、.jpg、または .gif ファイルを回避できます。

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

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

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

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

10純粋なCSSスライダーに最大高さを使用し、Heightを使用してCSSのみのスライダーを実装します

ボックスサイズを HTML から継承させます:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

これにより、他の動作を利用するプラグインや他のコンポーネントでボックスサイズを変更することが簡単になります。

12. テーブルのセルは同じ幅です

テーブルを扱うのは面倒なので、セルの幅を同じにするために必ず table-layout:fixed を使用してください:

.slider ul {
  max-height: 0;
  overlow: hidden;
}
.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}

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

列区切り文字を使用する必要がある場合は、フレックスボックスの space-between プロパティを使用して、nth-、first-、およびlast-child ハック:

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

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

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

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

.calendar {
  table-layout: fixed;
}

は非常に便利です。

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

HTML:

.list {
  display: flex;
  justify-content: space-between;
}
.list .person {
  flex-basis: 23%;
}

CSS:

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

16. CSS 書き込みトライアングル

rree 317. CSS3 CALC () の使用法

Calc () は、要素に動的な値を設定できる関数に似ています:

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

18。

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

19.

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

20. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

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

以上内容就是20 个 CSS 高级技巧汇总，希望能帮助到大家。

20 の高度な CSS ヒントのコレクション

関連記事