JSDM

HTML

6
 
1
<ul>
2
  <li><a href="#0">One</a></li>
3
  <li><a href="#0">Two</a></li>
4
  <li><a href="#0">Three</a></li>
5
  <li><a href="#0">Four</a></li>
6
</ul>
!

CSS

x
 
1
//
2
// Experimenting with background-blend and mix-blend modes
3
// Note: browser support is spotty and chrome requires experimental flag.
4
// chrome://flags/#enable-experimental-web-platform-features
5
// http://caniuse.com/#feat=css-backgroundblendmode
6
// http://caniuse.com/#feat=css-mixblendmode
7
//
8
9
ul {
10
  display: flex;
11
  flex-wrap: wrap;
12
  width: 100vw;
13
  height: 100vh;
14
  margin: 0;
15
  padding: 0;
16
  list-style: none;
17
  background: #eee;
18
  
19
  > li {
20
    position: relative;
21
    width: 50vw;
22
    height: 50vh;
23
    text-align: center;
24
    background-image: url(http://cdn.jsdm.com/2/detroit_skyline.jpg);
25
    background-position: center;
26
    background-size: cover;
27
    
28
    &:after {
29
      content: "Detroit by Jon DeBoer • jondeboer.com";
30
      position: absolute;
31
      bottom: 1rem;
32
      left: 1rem;
33
      color: #fff;
34
      font-size: 0.8rem;
35
      font-weight: 400;
36
      mix-blend-mode: soft-light;
37
    }
38
    
39
    a {
40
      position: relative;
41
      top: 50%;
42
      transform: translateY(-50%);
43
      display: block;
44
      margin: auto;
45
      color: #fff;
46
      font-size: 8vw;
47
      font-weight: 700;
48
      text-decoration: none;
49
      text-transform: uppercase;
50
    }
51
    
52
    &:nth-child(1) {
53
      background-color: #bada55;
54
      background-blend-mode: luminosity;
55
      a { mix-blend-mode: overlay; }
56
    }
57
    
58
    &:nth-child(2) {
59
      background-color: #f02311;
60
      background-blend-mode: color-burn;
61
      a { mix-blend-mode: color-dodge; }
62
    }
63
    
64
    &:nth-child(3) {
65
      background-color: #2a8fbd;
66
      background-blend-mode: hard-light;
67
      a { mix-blend-mode: soft-light; }
68
    }
69
    
70
    &:nth-child(4) {
71
      background-color: white;
72
      background-blend-mode: difference;
73
      a { mix-blend-mode: exclusion; }
74
    }
75
    
76
  }
77
  
78
}
79
80
*, *:before, *:after {
81
  box-sizing: border-box;
82
}
83
84
html {
85
  font-family: Montserrat, sans-serif;
86
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

1
 
1
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................