让前端飞

【译】必备的22个CSS小技巧

2019-04-23  本文已影响2人  强哥科技兴

大家好,今天我们将会介绍一些非常实用的CSS小技巧,让我们开始吧!

混合模式

之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式,但是在Chrome和Opera浏览器中需要添加前缀。举个栗子:

1// 你也可以尝试不同的样式

2

3.blend {

4background: #fff;

5}

6.blend img {

7mix-blend-mode: darken;

8}

体验地址:http://ilyashubin.github.io/FilterBlend/

渐变边框

现在,你甚至可以在边框中使用渐变。 要使用渐变边框非常简单,只需要设置一个更低z-index的伪元素即可:

1.box {

2margin:80px30px;

3width:200px;

4height:200px;

5position: relative;

6background: #fff;

7float: left;

8}

9.box:before {

10content:'';

11z-index:-1;

12position: absolute;

13width:220px;

14height:220px;

15top:-10px;

16left:-10px;

17background-image: linear-gradient(90deg, yellow, gold);

18}

具体的例子可以看这里(https://jsfiddle.net/4qypuono/),或者看这里(https://codepen.io/anon/pen/jEOGJe)使用的是background-clip和background-origin属性。

在不久的将来,也许所有浏览器都将支持border-image属性,最终的代码会和下面一样:

1.box {

2border-image: linear-gradient(to bottom, #0000000%, #FFFFFF100%);

3border-image-slice:1;/* set internal offset */

4}

z-index的过渡

也许你不知道z-index同样支持过渡!在过渡的每一步中,它的值都不发生改变,所以你以为它不支持过渡——但其实它支持。

举个栗子→(http://zomigi.com/demo/z-index_transition.html)

currentColor

我们可以使用这个方法来侦测当前的颜色,以避免经常地重复定义它。

顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

 这个方法在使用SVG图标的时候非常有用,因为它们的颜色由其父元素决定。通常我们是这么做的:

1.button {

2color: black;

3}

4.button:hover {

5color: red;

6}

7.button:active {

8color: green;

9}

10

11.button svg {

12fill: black;

13}

14.button:hover svg {

15fill: red;

16}

17.button:active svg {

18fill: green;

19}

但我们可以使用currentColor这么做:

1svg {

2fill: currentColor;

3}

4

5.button {

6color: black;

7border:1px solid currentColor;

8}

9.button:hover {

10color: red;

11}

12.button:active {

13color: green;

14}

附上其它带有伪元素的例子:

1a {

2color: #000;

3}

4a:hover {

5color: #333;

6}

7a:active {

8color: #666;

9}

10

11a:after,

12a:hover:after,

13a:active:after {

14background: currentColor;

15...

16}

Object Fit

你是否还记得为了解决一些问题而给一幅背景图设置background-size属性的时刻呢?

现在你可以使用object-fit属性啦,webkit浏览器都支持它,Firefox也将在近期予以支持。

1.image__contain {

2object-fit: contain;

3}

4.image__fill {

5object-fit: fill;

6}

7.image__cover {

8object-fit: cover;

9}

10.image__scale-down {

11object-fit: scale-down;

12}

举个栗子→(https://codepen.io/CSSKing/pen/XJEZeG)

单选框和复选框的样式

让我们一起不使用图片来设置复选框的样式:

1

2

3Checkbox

1

2input[type=checkbox] {display: none;}

3

4input[type=checkbox] + label:before {

5content:"";

6border:1px solid #000;

7font-size:11px;

8line-height:10px;

9margin:05px00;

10height:10px;

11width:10px;

12text-align: center;

13vertical-align: middle;

14}

15

16input[type=checkbox]:checked + label:before {

17content:"\2713";

18}

正如你所看见的,我们隐藏了原有的复选框,改为使用伪元素和伪类:checked(IE9+)来表现它。

当它被选中时,一个设置在content里的Unicode编码的字符将会显示出来。

值得注意的是,Unicode编码在CSS和HTML中的写法是不一样的。在CSS中它是一个以反斜杠为开始的十六进制数,而在HTML中它是十进制的,比如✓。 接着为我们的复选框添加一些动画效果:

1

2input[type=checkbox] + label:before {

3content:"\2713";

4color: transparent;

5transition: color ease.3s;

6}

7input[type=checkbox]:checked + label:before {

8color: #000;

9}

10

11

12input[type=radio] + label:before {

13content:"\26AB";

14border:1px solid #000;

15border-radius:50%;

16font-size:0;

17transition: font-size ease.3s;

18}

19input[type=radio]:checked + label:before {

20font-size:10px;

21}

这里(https://unicode-table.com/en/)是所有的Unicode编码,以及可以在这里(https://codepen.io/anon/pen/CdzwB)进行体验。

CSS中的计数器

总所周知CSS中是可以使用计数器的:

1

2

3

  • a
  • 4

  • b
  • 5

  • c
  • 6

    1

    2.list {

    3counter-reset: i;//reset conunter

    4}

    5.list > li {

    6counter-increment: i;//counter ID

    7}

    8.list li:after {

    9content:"["counter(i)"]";//print the result

    10}

    我们定义了一个ID在counter-reset属性中作为初始值(默认为0)。你可以设置另一个值在counter-increment属性中作为每一步的递增值。

    顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

    高级CSS计数器

    你可以计算出有多少个复选框被用户勾选了:

    1

    2

    3C

    4C++

    5C#

    6Java

    7JavaScript

    8PHP

    9Python

    10Ruby

    11

    12

    13Total selected:

    14

    1

    2.languages {

    3counter-reset: characters;

    4}

    5input:checked {

    6counter-increment: characters;

    7}

    8.total:after {

    9content: counter(characters);

    10}

    你也可以制作一个简单的计算器:

    1

    2

    31

    42

    53

    64

    75

    8100

    9

    10

    11Sum

    12

    1

    2.numbers {

    3counter-reset: sum;

    4}

    5

    6#one:checked { counter-increment: sum1; }

    7#two:checked { counter-increment: sum2; }

    8#three:checked { counter-increment: sum3; }

    9#four:checked { counter-increment: sum4; }

    10#five:checked { counter-increment: sum5; }

    11#one-hundred:checked { counter-increment: sum100; }

    12

    13.sum::after {

    14content:'= 'counter(sum);

    15}

    它同样得以运行,请看具体的DEMO(https://codepen.io/CSSKing/pen/vEeMey)和文章(https://codersblock.com/blog/fun-times-with-css-counters/)。

    不使用图片的菜单图标

    你记得你有多么经常被迫需要一个“汉堡”图标吗?

    这里有至少3个方式去实现它:

    1、 Shadows

    1.shadow-icon {

    2position: relative;

    3}

    4.shadow-icon:after {

    5content:"";

    6position: absolute;

    7left:0;

    8top:-50px;

    9height:100%;

    10width:100%;

    11box-shadow:05px0#000,015px0#fff,025px0#000,035px0#fff,045px0#000;

    12}

    2、 Gradient

    1.gradient-icon {

    2background: linear-gradient(to bottom, #0000%, #00020%, transparent20%, transparent40%, #00040%, #00060%, transparent60%, transparent80%, #00080%, #000100%);

    3}

    3、 UTF-8 你可以直接使用标准符号:☰ (Unicode: U+2630, HTML: ☰)。你也可以像其他元素那样灵活设置它的颜色或大小。

    顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

     你也可以使用SVG,字体图标,或者通过伪元素设置的border边框。

    @Supports

    这是一个新的叫做supports的CSS表达式。顾名思义,它可以检测某些设定是否被浏览器所支持,并非所有的浏览器都支持它,但是你仍然可以使用它作为基本的检测手段:

    1@supports (display: flex) {

    2div {display: flex; }

    3}

    4

    5/*You can check prefixes*/

    6@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {

    7section {

    8display: -webkit-flex;

    9display: -moz-flex;

    10display: flex;

    11float: none;

    12}

    13}

    visibility: visible

    在你看来,把一个设置为visibility: visible的元素放在一个设置为visibility: hidden的元素里面,会发生什么?

    1.hidden {

    2visibility: hidden;

    3}

    4.hidden .visible {

    5visibility: visible;

    6}

    你可能会认为两个元素都不显示——然而事实上整个父元素都被隐藏了,而子元素不会。请看DEMO(https://codepen.io/CSSKing/pen/lxBfk)。

    position: sticky

    我们发现了一个新的特性,你可以新建一个sticky属性的元素。它的运行效果和fixed相同,但不会挡住任何元素。你最好看看例子 只有Mozilla和Safari浏览器支持这一属性,但你也可以像下面那样使用它:

    1.sticky {

    2position:static;

    3position: sticky;

    4top:0px;

    5}

    我们将会在支持的浏览器中得到一个sticky属性的元素,而在不支持的浏览器中它将会是一个普通的元素。这在你需要建立一个不可替代的,可以移动的元素的移动端页面的时候非常实用。

    新的尺寸单位

    不久之前,一些新的用以描述不同元素大小的尺寸单位问世了,它们是:

    vw (viewport width) - 浏览器窗口宽度的1%。

    vh (viewport height) - 同上,只不过用来描述高度。

    vmin and vmax 设置介于vh和vw之间的最大最小值。

    有趣的是,几乎所有的现代浏览器都能很好地支持它们,所以你可以放心地使用。 为什么我们需要这些新的单位?因为它们可以让不同的尺寸更容易被定义,你不要为父元素指定任何的百分比或者别的什么,请看例子:

    1.some-text {

    2font-size:100vh;

    3line-height:100vh;

    4}

    或者你可以设置一个漂亮的弹出框在屏幕中间:

    1.blackSquare {

    2background: black;

    3position: fixed;

    4height:50vh;

    5width:50vw;

    6left:25vw;

    7top:25vh;

    8}

    这看起来酷毙了,看看在codepen的例子(https://codepen.io/CrocoDillon/pen/fBJxu)

     但是目前仍然有一些关于这些新单位的不足之处:

    IE9应该用vm而不是vmin。

    iOS7在使用vh的时候可能会有bug。

    vmax至今并未得到全面的支持。

    文字修饰

    我们可以通过几行代码修改文字被选中时的效果:

    1*::selection {

    2color: #fff;

    3background: #000;

    4}

    5*::-moz-selection {

    6/*Only Firefox still needs a prefix*/

    7color: #fff;

    8background: #000;

    9}

    你不仅可以定义文字被选中时的颜色,还能定义阴影或者背景颜色。

    顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

    触摸屏当中的元素滚动

    如果你需要在触摸屏当中为一些元素设置内滚动,那么你不仅需要overflow: scroll / auto,还需要-webkit-overflow-scrolling: touch;实际上,移动端浏览器在某些时候并不能正确执行overflow: scroll / auto,它可能会滚动整个页面而不是你想要的那部分。-webkit-overflow-scrolling解决了这个问题,你可以在你的实际项目中体验一下。

    使用硬件加速

    有时候动画可能会导致用户的电脑卡顿,你可以在特定元素中使用硬件加速来避免这个问题:

    1.block {

    2transform: translateZ(0);

    3}

    你并不会察觉有什么不同,但浏览器会为这个元素进行3D硬件加速,在will-change这个特殊属性未被全面支持之前,这个方法还是很有用的。

    Unicode Classes

    你可以用Unicode符号明名class:

    1.❤ {

    2...

    3}

    4.☢ {

    5...

    6}

    7.☭ {

    8...

    9}

    10.★ {

    11...

    12}

    13.☯ {

    14...

    15}

    但这其实是用来搞笑的,千万不要在大型项目中使用,因为不是所有的电脑都支持Unicode符号。

    垂直方向的百分比边距

    实际上垂直方向的排列计算是基于父元素的宽度而不是高度。定义两个元素:

    1

    2

    3

    4

    5

    1

    2

    3.parent {

    4height:400px;

    5width:200px;

    6}

    7.child {

    8height:50%;

    9padding-top:25%;

    10padding-bottom:25%;

    11width:100%;

    12}

    理论上,子元素的高会是父元素高的一半,但是看看我们实际得到的情况:

    记住,子元素的百分比是相对于父元素的宽度。

    火狐浏览器的按钮边距

    Firefox用它自己的方式去计算按钮的边距。这听起来有点奇怪,但它会自动地添加一些边距进去:

    可以用以下方法来修复这个问题:

    1button::-moz-focus-inner,

    2input[type="reset"]::-moz-focus-inner,

    3input[type="button"]::-moz-focus-inner,

    4input[type="submit"]::-moz-focus-inner {

    5border: none;

    6padding:0;

    7}

    Color + Border =Border-Color

    很少人知道,定义了一个元素的文字颜色,意味着这个元素的边框颜色也被定义了:

    1input[type="text"] {

    2color: red;

    3border:1px solid;

    4}

    古老浏览器的彩蛋

    如果你仍需要适配IE7或者类似的古老浏览器,你可以在定义hack的时候使用笑脸符号,像这样:

    1body {

    2:) background: pink;

    3}

    是不是很有趣?

    以上就是你所必备的22个CSS小技巧,感谢阅读。

    上一篇下一篇

    猜你喜欢

    热点阅读