8個有用的 CSS 技巧:視差圖像，sticky footer 等等

時間 2019-11-08

標籤有用 css 技巧視差圖像 sticky footer 等等欄目 CSS 简体版

原文原文鏈接

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

爲了保證的可讀性，本文采用意譯而非直譯。css

CSS是一種獨特的語言。乍一看，這彷佛很簡單,可是，某些在理論上看起來很簡單的效果在實踐中每每不那麼明顯。html

在本文中，我將分享一些有用的技巧和技巧，它們表明了我在學習CSS過程當中的關鍵進展。本文並非要演示CSS能夠變得多麼複雜。相反，它分享了一些在大多數CSS教程中不太可能找到的有用技巧。前端

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！ios

1. Sticky Footer

這個很是常見的需求,但對於初學者來講多是個難題。git

對於大多數項目，無論內容的大小，都但願頁腳停留在屏幕的底部—若是頁面的內容通過了視圖端口，頁腳應該進行調整。github

在CSS3以前，若是不知道腳的確切高度，就很難達到這種效果。雖然咱們稱它爲粘性頁腳，但你不能簡單地用 position: sticky 來解決這個問題，由於它會阻塞內容。web

今天，最兼容的解決方案是使用 Flexbox。主要的作法是在包含頁面主要內容的
div 上使用不太知名的 flex-grow 屬性，在下面的示例中，我使用的是 main 標籤。segmentfault

flex-grow 控制 flex 項相對於其餘 flex 元素填充其容器的數量。當值爲 0 時，它不會增加，因此咱們須要將它設置爲 1 或更多。在下面的示例中，我使用了簡寫屬性 flex: auto，它將 flex-grow 默認設置爲 1。api

爲了防止任何沒必要要的行爲，咱們還能夠在 footer 標籤中添加 flex-shrink: 0。flex-shrink 實際上與 flex-growth 屬性相反，控制 flex 元素收縮到適合其容器的大小，將它設置爲 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;
}

查看演示

2. Zoom-on-Hover

zoom-on-hover 效果是將注意力吸引到可點擊圖像上的好方法。當用戶將鼠標懸停在上面時，圖像會稍微放大，但其尺寸保持不變。

爲了達到這個效果，須要用 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 標籤上，能夠快速試用網站的夜間模式（注意，爲了影響背景，你必須給它一個顏色。）

使用這些設置，咱們能夠給谷歌的主頁一個即時改造:

4.自定義的要點

要爲無序列表建立自定義項目符號，可使用 content 屬性和 ::before 僞元素。

在下面的 CSS 中，我使用 .complete 和 .incomplete 兩個類來區分兩種不一樣類型的項目符號。

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

查看演示

額外用途:麪包屑導航

利用 content 屬性有許多更有用的方法，這裏忍不住又多介紹一種。

因爲用於分隔麪包屑的斜槓和其餘符號具備樣式性，因此在CSS中定義它們頗有意義。和本文中的許多例子同樣，這種效果依賴於CSS3中提供的僞類——last-child——:

.breadcrumb a:first-child::before {
  content: " » ";
}
.breadcrumb a::after {
  content: " /";
}
.breadcrumb a:last-child::after {
  content: "";
}

查看演示

5. 視差圖像 (Parallax Images)

這種引人注目的效果愈來愈受歡迎，當用戶滾動頁面時，它能夠給頁面帶來生氣。

當一個頁面的正常圖像隨着用戶滾動而移動時，視差圖像看起來是固定的——只有經過它可見的窗口才會移動。

僅 CSS 示例

// html
<div class="wrapper">
  <h1>Scroll Down</h1>  
  <div class="parallax-img"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>
<div class="wrapper">
</div>

// css
.wrapper {
  height: 100vh;
}

.parallax-img {
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

    body {
      margin: 0;
      background: #000;
    }
    
    * {
      font-family: Candara;
      color: white;
    }
    
    h1 {
      margin: 15px;
      text-align: center;
    }
    
    p {
      margin: 15px;
      font-size: 1.1rem;
    }
    
    .parallax-img {
      background-image: url('https://source.unsplash.com/random/1920x1080');
    }

查看演示

CSS + JavaScript 示例

要得到更高級的效果，可使用 JavaScript 在用戶滾動時向圖像添加移動。

// html
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
  <h2>Parallax Speed -1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
  <h2>Parallax Speed 1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
  <h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
  <h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
  <h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
  <h2>Parallax Speed 0.75</h2>
</div>

// css
@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Amatic SC', cursive;
}
.block{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.block h2{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vw;
  color: white;
  font-weight: 400;
}
.img-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  pointer-events: none
}

// js

// I know that the code could be better.
// If you have some tips or improvement, please let me know.

$('.img-parallax').each(function(){
  var img = $(this);
  var imgParent = $(this).parent();
  function parallaxImg () {
    var speed = img.data('speed');
    var imgY = imgParent.offset().top;
    var winY = $(this).scrollTop();
    var winH = $(this).height();
    var parentH = imgParent.innerHeight();


    // The next pixel to show on screen      
    var winBottom = winY + winH;

    // If block is shown on screen
    if (winBottom > imgY && winY < imgY + parentH) {
      // Number of pixels shown after block appear
      var imgBottom = ((winBottom - imgY) * speed);
      // Max number of pixels until block disappear
      var imgTop = winH + parentH;
      // Porcentage between start showing until disappearing
      var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
    }
    img.css({
      top: imgPercent + '%',
      transform: 'translate(-50%, -' + imgPercent + '%)'
    });
  }
  $(document).on({
    scroll: function () {
      parallaxImg();
    }, ready: function () {
      parallaxImg();
    }
  });
});

查看演示

6. 裁剪圖像動畫

與粘性頁腳同樣，在 CSS3 以前裁剪圖像也很是棘手。如今，咱們有兩個屬性使裁剪變得簡單，object-fit 和 object-position，它們一塊兒容許你更改圖像的尺寸而不影響它的長寬比。

之前，老是能夠在照片編輯器中裁剪圖像，可是在瀏覽器中裁剪圖像的一個很大的優點是能夠將圖像大小調整爲動畫的一部分。

爲了儘量簡單地演示這種效果，下面的示例使用 <input type="checkbox"> 標記觸發這種效果。這樣，咱們能夠利用CSS的 :checked 僞類，咱們不須要使用任何JavaScript:

// html
<input type="checkbox" />
<br />
<img src="https://source.unsplash.com/random/1920x1080" alt="Random" />


input {
  transform: scale(1.5)
  margin:10px 5px;
}

img {
  width: 1920px;
  height: 1080px;
  transition: 0s;
}

input:checked +br + img{
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: left-top;
   transition: width 2s, height 4s;
}

查看演示

7. 混合模式(Blend Modes)

若是你有使用 Photoshop 的經驗，你可能知道它不一樣的混合模式是多麼強大，能夠建立有趣的效果。可是你知道 Photoshop 的大部分混合模式也能夠在 CSS 中使用嗎?

當圖像的被設置爲 background-color:lightblue; blend-mode:difference ; ，這就是Medium 的主頁的樣子：

此外，背景並非利用混合模式的惟一方法。mix-blend-mode 屬性容許你將元素與其現有背景進行混合。例如，使用以下樣式建立這樣的效果：

// html
<h1>This is an example title</h1>

// css
h1 {
    mix-blend-mode: color-dodge;
    font-family: Candara;
    font-size: 5rem;
    text-align: center;
    margin: 0; 
    padding: 20vh 200px;
    color: lightsalmon;
  }

  html,
  body {
    margin: 0;
    background-color: white;
  }

  body {

    background-image: url(https://images.unsplash.com/photo-1550589348-67046352c5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    overflow: hidden;

}

查看演示

8. Pinterest-style 圖像

CSS Grid和Flexbox使得實現多種不一樣類型的響應式佈局變得更加容易，而且容許咱們在頁面上很容易地將元素垂直居中——這在之前是很是困難的。

然而，它們不太適合的一種佈局風格是 Pinterest 使用的佈局風格，即每一個元素的垂直位置都根據其上方元素的高度而變化。

實現此目的的最佳方法是使用 CSS 的列屬性套件。這些最經常使用於建立多個報紙樣式的文本列，但這是另外一個很好的用例。

要實現這一點，須要將元素包裝在 div 中，併爲該包裝器提供一個 column-width 和 column-gap 屬性。

而後，爲了防止任何元素被分割到兩個列中，使用 column-break-inside:avoid 將其添加到單個元素中。

// html
<div id="columns">
  <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
    <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
    </figure>
    
    <figure>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
    <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
    </figure>
    
  <figure>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
    <figcaption>Belle, based on 1770’s French court fashion</figcaption>
    </figure>
  
    <figure>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
    <figcaption>Mulan, based on the Ming Dynasty period</figcaption>
    </figure>
    
   <figure>
     <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
    <figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
    </figure>
    
   <figure>
     <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
    <figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
    </figure>
  
    <figure>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
    <figcaption>Snow White, based on 16th century German fashion</figcaption>
    </figure>   
  
   <figure>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
    <figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
    </figure>
  
    <figure>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
    <figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
    </figure>   
  <small>Art &copy; <a href="//clairehummel.com">Claire Hummel</a></small>
    </div>

// css
@font-face{font-family:'Calluna';
 src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
}
body {
    background: url(//subtlepatterns.com/patterns/scribble_light.png);
  font-family: Calluna, Arial, sans-serif;
  min-height: 1000px;
}
#columns {
    column-width: 320px;
    column-gap: 15px;
  width: 90%;
    max-width: 1100px;
    margin: 50px auto;
}

div#columns figure {
    background: #fefefe;
    border: 2px solid #fcfcfc;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    padding: 15px;
    padding-bottom: 10px;
    transition: opacity .4s ease-in-out;
  display: inline-block;
  column-break-inside: avoid;
}

div#columns figure img {
    width: 100%; height: auto;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: .9rem;
    color: #444;
  line-height: 1.5;
}

div#columns small { 
  font-size: 1rem;
  float: right; 
  text-transform: uppercase;
  color: #aaa;
} 

div#columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}

div#columns:hover figure:not(:hover) {
    opacity: 0.4;
}

@media screen and (max-width: 750px) { 
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}

查看演示

上面的例子也是 CSS:not() 僞類的一個很好的例子。他將它與 :hover 一塊兒使用，這樣除了盤旋的元素外，其餘元素都將淡出。