譯者：前端小智
CSS是一種獨特的語言。乍一看，這似乎很簡單,但是，某些在理論上看起來很簡單的效果在實踐中往往不那麼明顯。
在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學習CSS過程中的關鍵進展。本文並不是要演示CSS可以變得多麼複雜。相反，它分享了一些在大多數CSS教程中不太可能找到的有用技巧。
1. Sticky Footer
這個非常常見的需求,但對於初學者來說可能是個難題。
對於大多數專案，不管內容的大小，都希望頁尾停留在螢幕的底部—如果頁面的內容經過了檢視埠，頁尾應該進行調整。
在CSS3之前，如果不知道腳的確切高度，就很難達到這種效果。雖然我們稱它為粘性頁尾，但你不能簡單地用 position: sticky 來解決這個問題，因為它會阻塞內容。
今天，最相容的解決方案是使用 Flexbox。主要的做法是在包含頁面主要內容的
div 上使用不太知名的 flex-grow 屬性，在下面的示例中，我使用的是 main 標籤。
flex-grow 控制 flex 項相對於其他 flex 元素填充其容器的數量。當值為 0 時，它不會增長，所以我們需要將它設定為 1 或更多。在下面的示例中，我使用了簡寫屬性 flex: auto，它將 flex-grow 預設設定為 1。
為了防止任何不必要的行為，我們還可以在 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 © <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 一起使用，這樣除了盤旋的元素外，其他元素都將淡出。
其它的資源
總的來說，我希望下面的例子已經了說明了一些有用的 CSS 效果，甚至可能會讓你注意到一些你沒有見到過的特性。
像這樣的特性並不屬於“簡單技巧”的範疇，它們可以自己進行相當深入的探索。所以我不打算在這裡描述它們，下面介紹一些很好資源來了解它們:
Keyframe animation
Scroll-snapping
多級導航
3D 效果
CSS的列印
設計原則
你的點贊是我持續分享好東西的動力，歡迎點贊！
歡迎加入前端大家庭，裡面會經常分享一些技術資源。
