20 の高度な CSS スキルの概要_html/css_WEB-ITnose

スキルを使うと人はどんどん怠け者になっていきます、そう、私はただあなたを怠け者にしたいだけなのです。以下に、私が集めた高度な CSS テクニックを紹介します。

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. body に line-height を追加します

p、h マークなどに個別に line-height を追加する必要はありません。本文に追加するだけです:

body {  line-height: 1;}

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

5. すべてを垂直方向の中央に配置します

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

うーん、

ほら、それほど単純ではありません。

注: 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: ",";}

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 スライダーには max-height を使用します

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

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

11. box-sizing を継承します

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

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

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

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

表は扱いが面倒なので、必ず table-layout を使用してください: セルの幅が同じになるように修正しました:

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

13. Flexbox を使用して余白のさまざまなハックを削除します

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

.calendar {  table-layout: fixed;}

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

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

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

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

非常に便利です。

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

HTML:

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

CSS:

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

16. 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() の使い方

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

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

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

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

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

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

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

20. テキストをぼかし

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

りー