CSS奇妙な変態のヒント：視差画像、スティッキーフッター混合モード、など

CSSは、ユニークな言語です。一見すると、それは簡単なようだが、いくつかは、理論的には簡単なようで、実際には、効果は、多くの場合、それほど明白ではありません。

この記事では、私はほとんどのCSSチュートリアルで見つけにくいいくつかの有用なヒントを共有しましょう。

1.スティッキーフッター

これは非常に一般的な要件は、しかし、初心者にとっては挑戦することができます。

ビューポートを介してページのコンテンツは、フッターを調整する必要がある場合 - ほとんどのプロジェクトでは、関係なく、コンテンツのサイズの、私たちは、フッタは、画面の一番下に滞在したいです。

あなたは足の正確な高さがわからない場合CSS3する前に、この効果を達成することは困難です。我々はそれを呼び出すがスティッキーフッター、しかし、あなたは、単に使用することはできません position: sticky 、それはコンテンツをブロックしますので、この問題を解決すること。

今日では、最も互換性の解決策を使用することです フレキシボックスを。主な練習は含まれているページのメインコンテンツである
div あまりによく知られているの使用 flex-grow 次の例では、私が使用して、プロパティ main のラベルを。

flex-grow 他の制御要素にアイテムフレックスに対しては、その容器の充填量を曲げます。値がある場合は 0 、それが成長しないので、我々はそれを設定する必要があります 1以上。次の例では、私は速記プロパティを使用し flex: auto、それは次のようになります flex-grow デフォルト設定 1。

不要な動作を防止するために、我々はまた、可能 footer タグを追加します flex-shrink: 0。flex-shrink 確かに flex-growthコントロールがコンテナのサイズ適切なたわみ要素に収縮特性コントラストは、するように設定されている 0 だけ防ぐ footer 、そのサイズを保持することを保証するために、ラベルを収縮します。

// html
<div id="document">
  <main>
    <h1>Everything apart from the footer goes here</h1>
    <p>Add more text here, to see how the footer responds!</p>
  </main>
  <footer>
    <h1>The footer goes here</h1>
  </footer>
</div>

// css
#document { 
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
  flex: auto;
}

footer {
    flex-shrink: 0;
}

/* Other styling elements, that are not necessary for the example */

* {
  margin: 0;
  font-family: Candara;
}

h1, p {
  padding: 20px;
}

footer {
  color: white;
  background: url(https://images.unsplash.com/photo-1550795598-717619d32900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80);
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
}

footer > h1 {
  text-shadow: 1px 1px 4px #00000080;
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

2.ズーム・オン・ホバー

ズーム・オン・ホバー 効果がクリック可能な画像に注意を引くための良い方法です。ユーザが上記置くと、画像がわずかに大きく、そのサイズは変更されないままです。

この効果を実現するには、次のものが必要 div ラベル包まれた img ラベルを。

この効果を有効にするには、あなたは親要素を設定する必要がある width と height し、確認して overflow して hidden、それから、あなたはアニメーション効果のいずれかのタイプが内部の画像に適用される変換することができます。


// html
<div class="img-wrapper">
    <img class="inner-img" src="https://source.unsplash.com/random/400x400" />
</div>

<!-- Additional examples -->

<div class="img-wrapper">
    <img class="inner-img" src="https://source.unsplash.com/random/401x401" width="400px" height="400px" />
</div>

<div class="img-wrapper">
    <img class="inner-img" src="https://source.unsplash.com/random/402x402" width="400px" height="400px" />
</div>

// css
.img-wrapper {  
  width: 400px;
  height: 400px;
  overflow: hidden; 
}

.inner-img {
  transition: 0.3s;
}

.inner-img:hover {
  transform: scale(1.1);
}

3.インスタントナイトモード

あなたのサイトに「ナイトモード」スキンを適用する簡単な方法を探している場合は、使用することができます invert し、 hue-rotate フィルター。

filter: invert() これは、請求、0から1の範囲で 1 白から黒へ。

filter: hue-rotate() それらは分離の多かれ少なかれ同じレベル、範囲内の値のままとなるよう、色内容要素を変更 0deg すると 360deg。

これらの効果の組み合わせによって body ラベルにナイトモード、あなたはすぐに（バックグラウンドに影響を与えるために、あなたはそれに色を与えるために持っていることに注意してください。）サイトを試すことができます

これらの設定を使用して、我々は、Googleのホームページに瞬時に変換することができます。

4.カスタムポイント

あなたが使用できるようにカスタム順不同リストの弾丸を作成するには content 、属性と ::before 擬似要素を。

以下のCSSでは、私が使用 .complete して .incomplete 弾丸の二つの異なるタイプを区別するために2つのクラスを。


ul {
  list-style: none;
}
ul.complete li::before {
  content: '