原鏈接：http://www.ido321.com/1665.html

Hey there! Today we are going to talk about some useful tricks in CSS. Let's begin with…

在這篇文章中我們會(huì)談?wù)撘恍┯杏玫?CSS 技巧…

Blend Modes

混合模式

Not so far Firefox and Safari started to support blend modes right as Photoshop does. It also works in Chrome and Opera but with flags. See an example:

到目前為止，Firefox 和 Safari 已經(jīng)能和 Photoshop 一樣支持混合模式了，Chrome 和 Opera 也通過(guò)帶私有標(biāo)志(-webkit- & -o-)支持，看一個(gè)示例：

You can create different styles. Here's a code of what is going above:

你可以創(chuàng)建不同的混合風(fēng)格。上述示例的代碼如下：

.blend {background: #fff; } .blend img {mix-blend-mode: darken; }

來(lái)試試混合模式和過(guò)濾

Gradient Borders

邊框漸變

Novadays you can use gradients even in borders.

在邊框中也能使用漸變效果了。

It is rather simple to use, just need to set pseudo-elements with lower z-index:

邊框漸變的效果實(shí)現(xiàn)很簡(jiǎn)單，僅僅只需為偽元素設(shè)置更低的?z-index?：

.box {margin: 80px 30px;width: 200px;height: 200px;position: relative;background: #fff;float: left; } .box:before {content: '';z-index: -1;position: absolute;width: 220px;height: 220px;top: -10px;left: -10px;background-image: linear-gradient(90deg, yellow, gold); }

All examples you can find?here. Also?there is approach?with?background-clip?and?background-origin. Someday in the bright future?border-image?property will be supported by all browsers and solution for this will look as follow:

在這里能找到更多示例，另一種方法是通過(guò)?background-clip?和?background-origin?來(lái)實(shí)現(xiàn)。在未來(lái)的某一天，border-image?會(huì)被所有瀏覽器支持，其提供的邊框漸變方式可能如下：

.box {border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%); border-image-slice: 1; /* set internal offset */ }

Transition for z-index

z-index 過(guò)渡

You may didn't know but?z-index?supports transitions too! It doesn't change it's value on each step so you think that it doesn't have a transition. But it does!

你可能不知道?z-index?也支持過(guò)渡效果！它沒(méi)有在每一步改變它的值，所以你認(rèn)為它沒(méi)有過(guò)渡效果，但實(shí)際上是有的！

這有一個(gè)很棒的示例

currentColor

We can use it to detect the current color so we don't have to define it lots of times.

我們可以使用?currentColor?來(lái)檢測(cè)元素當(dāng)前使用的顏色，因而不需要定義?color?很多次。

It can be useful when working with SVG icons which change their color depending on their parents. Usually we do it as follows:

結(jié)合 SVG 圖標(biāo)使用時(shí)，currentColor?是很有用的，因?yàn)閳D標(biāo)顏色的改變?nèi)Q于它們的父元素。通常我們是這么做的：

.button {color: black; } .button:hover {color: red; } .button:active {color: green; }.button svg {fill: black; } .button:hover svg {fill: red; } .button:active svg {fill: green; }

使用?currentColor?之后：

svg { fill: currentColor; }.button {color: black;border: 1px solid currentColor; } .button:hover {color: red; } .button:active {color: green; }

另一種方式是用于偽元素：

a { color: #000; } a:hover { color: #333; } a:active { color: #666; }a:after, a:hover:after, a:active:after { background: currentColor;... }

Object Fit

對(duì)象適配

Do you remember this moment when you wanted to set?background-size?for image because it will solve a lot of problems? Now you can use?object-fit?which is supported by webkit and will be added to Firefox soon.

你還記得通過(guò)設(shè)置圖片的?background-size?屬性可以解決很多問(wèn)題的時(shí)刻嗎？現(xiàn)在你可以使用?object-fit?了，它已經(jīng)被 webkit 內(nèi)核的瀏覽器支持，不久 Firefox 也會(huì)支持。

.image__contain {object-fit: contain; } .image__fill {object-fit: fill; } .image__cover {object-fit: cover; } .image__scale-down {object-fit: scale-down; }

示例

Checkbox and Radio Buttons Styles

復(fù)選框和單選按鈕的樣式

讓我們不使用圖片來(lái)改變復(fù)選框的樣式：

<input type="checkbox" id="check" name="check" /><label for="check">Checkbox</label> input[type=checkbox] {display: none;}input[type=checkbox] + label:before { content: "";border: 1px solid #000;font-size: 11px; line-height: 10px;margin: 0 5px 0 0;height: 10px;width: 10px;text-align: center;vertical-align: middle; }input[type=checkbox]:checked + label:before { content: "\2713"; }

As you can see, it works with pseudo-elements and pseudo-selector?:checked?(IE9+). In the code above we hide original checkbox and show ours instead. When checked, we show a Unicode character using the?content.

正如你看到的，需要結(jié)合使用偽元素和偽類選擇器?:checked（IE9+）。在上面的代碼中，隱藏了原始的復(fù)選框，顯示它的替代元素。當(dāng)復(fù)選框被選中時(shí)，通過(guò)使用?content?屬性顯示一個(gè) Unicode 字符。

Note that the Unicode character in CSS differs from that in HTML. In CSS the number is specified in hexadecimal notation with trailing slash at the beginning, while in HTML it's decimal and will look like ?.

需要注意的是 Unicode 字符在 CSS 和 HTML 中的表示是不同的。在 CSS 中，數(shù)字是被指定為以反斜杠開(kāi)頭的十六進(jìn)制方式，而在 HTML 中是形如 ? 的十進(jìn)制方式。

給復(fù)選框添加動(dòng)畫效果：

input[type=checkbox] + label:before { content: "\2713";color: transparent;transition: color ease .3s; } input[type=checkbox]:checked + label:before { color: #000;

給單選按鈕添加動(dòng)畫效果：

input[type=radio] + label:before { content: "\26AB";border: 1px solid #000;border-radius: 50%;font-size: 0; transition: font-size ease .3s; } input[type=radio]:checked + label:before { font-size: 10px;

這里?有完整的 Unicode 列表和示例?代碼。

譯者補(bǔ)充：

復(fù)選框的 CSS 魔法

利用checkbox實(shí)現(xiàn) jQuery 的6中基本動(dòng)畫效果

Counters in CSS

CSS 計(jì)數(shù)器

并不是所有人都知道 CSS 可以用于計(jì)數(shù)：

<ol class="list"> <li>a</li><li>b</li><li>c</li> </ol> .list {counter-reset: i; //reset conunter } .list > li {counter-increment: i; //counter ID } .list li:after {content: "[" counter(i) "]"; //print the result }

We define a random ID in counter-reset property and it's first value (0 by default). You can set another number in counter-increment. It will define the step of your counter.

For example counter-increment: i 2 will displays only even numbers.

在?counter-reset?屬性中，定義了一個(gè)隨機(jī) ID，其默認(rèn)值是0。你可以在?counter-increment?屬性中定義另外一個(gè)數(shù)字，作為計(jì)數(shù)的步長(zhǎng)。

例如：counter-increment: i 2?將值顯示偶數(shù)。

譯者補(bǔ)充：詳解content屬性

Advanced CSS Counters

CSS 計(jì)數(shù)器進(jìn)階

利用 CSS 計(jì)數(shù)器，能統(tǒng)計(jì)被用戶選擇的復(fù)選框個(gè)數(shù)：

<div class="languages"> <input id="c" type="checkbox"><label for="c">C</label><input id="C++" type="checkbox"><label for="C++">C++</label><input id="C#" type="checkbox"><label for="C#">C#</label><input id="Java" type="checkbox"><label for="Java">Java</label><input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label><input id="PHP" type="checkbox"><label for="PHP">PHP</label><input id="Python" type="checkbox"><label for="Python">Python</label><input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label> </div> <p class="total"> Total selected: </p> .languages {counter-reset: characters; } input:checked { counter-increment: characters; } .total:after {content: counter(characters); }

在這個(gè)示例中，我們會(huì)增加?input:checked?的數(shù)量并打印出來(lái)。

你還能創(chuàng)建一個(gè)小型計(jì)算器：

<div class="numbers"> <input id="one" type="checkbox"><label for="one">1</label><input id="two" type="checkbox"><label for="two">2</label><input id="three" type="checkbox"><label for="three">3</label><input id="four" type="checkbox"><label for="four">4</label><input id="five" type="checkbox"><label for="five">5</label><input id="one-hundred" type="checkbox"><label for="one-hundred">100</label> </div> <p class="sum"> Sum </p> .numbers {counter-reset: sum; }#one:checked { counter-increment: sum 1; } #two:checked { counter-increment: sum 2; } #three:checked { counter-increment: sum 3; } #four:checked { counter-increment: sum 4; } #five:checked { counter-increment: sum 5; } #one-hundred:checked { counter-increment: sum 100; }.sum::after {content: '= ' counter(sum); }

原理和上面的示例是一樣的，在線demo和相關(guān)文章

Menu Icon Without Images

沒(méi)有圖片的菜單圖標(biāo)

還記得你經(jīng)常使用的漢堡包圖標(biāo)嗎？

至少有三種關(guān)于怎么繪出這種圖標(biāo)的方法：

1、Shadows

.shadow-icon {position: relative;}.shadow-icon:after {content: "";position: absolute;left: 0;top: -50px;height: 100%;width: 100%;box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;}

2、Gradient

.gradient-icon {background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%); }

3、UTF-8

You can just paste this standard symbol: ? (Unicode: U+2630, HTML:?&#9776;). You can adjust it's color or size only so it's not as flexible as other methods.

只需要粘貼圖標(biāo)的標(biāo)準(zhǔn)符號(hào)：?(Unicode:?U+2630，HTML: ?)，你可以調(diào)整它的顏色或大小，但它不如其它方法靈活。

可以看示例

此外，你也可以使用 SVG，icon font 或 borders 集合偽元素的方式來(lái)實(shí)現(xiàn)。

@Supports

There's a new expression in CSS called?supports. As you can see, it can inspect whether browser?supports?needed option. Not all of browser support it, but you still can use it for simple checks:

CSS 中有一個(gè)被稱為?supports?的新的表達(dá)式。正如你看到的，它能檢測(cè)瀏覽器是否支持某屬性。雖然并不是所有瀏覽器支持?@support?表達(dá)式，但你仍然可以使用它作一些簡(jiǎn)單的檢測(cè)：

@supports (display: flex) {div { display: flex; } }/*You can check prefixes*/ @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {section {display: -webkit-flex;display: -moz-flex;display: flex;float: none;} }

譯者補(bǔ)充：An Introduction to CSS’s @supports Rule

visibility: visible

如果你將一個(gè)?visibility:visible?的塊元素放在另一個(gè)?visibility:hidden?的元素中，會(huì)產(chǎn)生什么效果呢？

.hidden {visibility: hidden; } .hidden .visible {visibility: visible; }

你可能會(huì)認(rèn)為所有元素會(huì)被隱藏，但父元素會(huì)隱藏除了自身子元素以外的所有元素。看看這個(gè)demo

position: sticky

We've discovered a new feature that now you can create?sticky?blocks. They will be working the same as fixed blocks but won't hide another blocks. You'd better?see?it.

我們發(fā)現(xiàn)了一個(gè)新功能，現(xiàn)在你可以創(chuàng)建sticky塊元素了。這和 fixed 塊元素一樣，但不同的是,?sticky?塊元素是不會(huì)遮擋另一個(gè)塊元素的，最好看看demo

現(xiàn)在只有 Mozilla 和 Safari 支持這個(gè)屬性，但你可以按照下面的方式使用這個(gè)屬性：

.sticky {position: static;position: sticky;top: 0px; }

We will get a sticky block in browsers which support it and a regular block in other programs. It is rather useful for mobile sites where you need to create a movable block which won't substitute others.

如果瀏覽器支持?sticky，則會(huì)得到一個(gè) sticky 塊元素，反之會(huì)得到一個(gè)普通的元素。當(dāng)你在手機(jī)站需要?jiǎng)?chuàng)建一個(gè)可以移動(dòng)的塊元素而不會(huì)遮擋其它元素時(shí)是非常有用的。

(sticky可以看作是relative和fixed的結(jié)合)

New Dimensions

新的尺寸

Not so far this world discovered some new ways to describe sizes of different objects. Here are them:

• vw (viewport width) – one percent of browser window's width.
• vh (viewport height) – the same but for height.
• vmin and vmax choose minimal and maximal value between vh and vw.

現(xiàn)在有一些新的方式來(lái)描述不同對(duì)象的大小了，如下：

• vw(視口寬度): 1vw表示瀏覽器窗口寬度的1%
• vh(視口高度): 1vh表示瀏覽器窗口高度的1%
• vmin 和 vmax 表示視口高度和寬度兩者中的最小值或最大值。

The interesting thing is that they all are great supported in most of modern browsers so you can freely use them.

有趣的是所有現(xiàn)代瀏覽器都支持它們，你可以自由使用。

Why do we need them? That's because they make all dimensions simpler. You don't have to specify percentage of parent's element size and any other stuff. Just have a look:

為什么需要它們？因?yàn)樗鼈兪沟盟械某叽缬?jì)算變得簡(jiǎn)單了。你不需要指定父元素大小的百分比和任何其它的stuff。看代碼：

.some-text {font-size: 100vh;line-height: 100vh; }

或許你可以在屏幕正中間放一個(gè)彈出效果了：

.blackSquare {background: black;position: fixed;height: 50vh;width: 50vw;left: 25vw;top: 25vh; }

看起來(lái)是一個(gè)很酷的方式，看看Codepen上的示例

在使用這個(gè)功能時(shí)，也有一些要主要的事項(xiàng)：

• IE9 會(huì)使用vm，而不是vmin
• IOS 7 在使用vh時(shí)有一些Bug
• 瀏覽器對(duì)vmax的支持并不完全

譯者補(bǔ)充：七個(gè)你可能不認(rèn)識(shí)的 CSS 單位

Text Decorations

文本裝飾

可以用下面幾行代碼改變被選中文本的顏色：

*::selection {color: #fff;background: #000; } *::-moz-selection { /*Only Firefox still needs a prefix*/color: #fff;background: #000; }

除了定義?color，還能定義?shadow?和?backgrounds。

Block Scroll on Touch Devices

觸摸設(shè)備上的塊元素滾動(dòng)

If you have some blocks with inner scroll in them then you have to add not only overflow: scroll / auto but this line also:

在觸摸設(shè)備上，如果你有一些塊元素在內(nèi)部有滾動(dòng)，則你不僅需要添加?overflow: scroll / auto，還要添加：

-webkit-overflow-scrolling: touch;

The thing is that mobile browser sometimes don't work with?overflow: scroll?property correctly and scroll all the page instead of the needed block.?-webkit-overflow-scrolling?fix this issue. You can see it by adding this to your own project.

這種情況是有時(shí)設(shè)置了?overflow: scroll，移動(dòng)端的瀏覽器會(huì)滾動(dòng)整個(gè)頁(yè)面而不是在需要的塊元素中滾動(dòng)。-webkit-overflow-scrolling?修復(fù)了這個(gè)問(wèn)題。你可以把它添加到你的項(xiàng)目中看看效果。

Using Hardware Acceleration

使用硬件加速

Sometimes your animation can to slow down client's computer. You can use acceleration for special block in order to prevent this event:

有時(shí)，你的動(dòng)畫效果在客戶端的計(jì)算機(jī)上會(huì)減慢，為了防止這種情況發(fā)生，你可以為特定的塊元素使用加速：

.block {transform: translateZ(0); }

In statics you won't notice any difference, but browsers will understands that the element should be treated as three-dimensional and will enable acceleration. Until there are no normal support of specifically designed for this property?will-change, this method is quite descend.

在靜態(tài)情況下你可以不會(huì)注意到差別，但瀏覽器會(huì)認(rèn)為這個(gè)元素應(yīng)該被視為 3D 元素并能夠加速。在屬性?will-change?沒(méi)有得到正常支持之前，這種方法是很有用的。

Unicode Classes

Unicode 類

現(xiàn)在可以用 Unicode 符號(hào)來(lái)設(shè)置類名：

.? {... } .? {... } .? {... } .★ {... } .? {... }

不要在大項(xiàng)目中使用，因?yàn)?UTF-8 可能并不被所有計(jì)算支持。

Vertical Margines in Percents

在垂直 Margins 上使用百分比

事實(shí)上，垂直縮進(jìn)是根據(jù)父元素的寬而不是高來(lái)計(jì)算的，我們創(chuàng)建兩個(gè)塊元素：

<div class="parent"> <div class="child"></div> </div> .parent {height: 400px;width: 200px; } .child {height: 50%;padding-top: 25%;padding-bottom: 25%;width: 100%; }

理論上，應(yīng)該按父元素的高來(lái)填充，但是我們得到的效果是相反的：

你應(yīng)該時(shí)刻記住百分比是按照父元素的寬計(jì)算的。

譯者補(bǔ)充：CSS 中的百分比

Margins in Firefox Buttons

Firefox的按鈕的Margins計(jì)算

對(duì)于按鈕的margins計(jì)算，Firefox有它自己的方式。

可以使用下面的方式修復(fù)：

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: none;padding:0; }

Color + Border = Border-Color

并不是所有人知道，通過(guò)定義任何對(duì)象的文本顏色，也能定義其邊框色：

input[type="text"] { color: red;border: 1px solid; }

Bonus for Oldies

如果你還要支持 IE7 或其他低版本瀏覽器，你可以用一個(gè)smile來(lái)定義它們的 Hacks，就像這樣：

body { :) background: pink; }

轉(zhuǎn)載于:https://www.cnblogs.com/morning0529/p/5162307.html

總結(jié)

以上是生活随笔為你收集整理的22个CSS黑魔法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。