HTML&CSS - SKILL.NULL

iframe在ios上不能滚动问题解决方法

同这篇文章一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。

例如：

1

2

3

</div>

[c[……]

2019-08-20by SKILLNULL Browser Compatibility, HTML&CSS 阅读(9883)评论(0)

文本行的斑马条纹

周知，表格的斑马条纹只需简单的运用伪类 :nth-child()/:nth-of-type()来处理就好了：

1

2

3

4

5

tr:nth-child(even){

　　background-color: rgba(0,0,0,.2);

}

但是把这种效果运用在文本行的时候就有点力不从心了，尽管js可以实现这种功能，但是这在理论上有违纯粹原则（javascri[……]

2017-07-20by SKILLNULL HTML&CSS 阅读(6356)评论(0)

自定义优雅的文本下划线

废话不多说：

1

2

3

4

5

.underline {

background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;

background-size: .2em 2px;

background-position: 0 1.4em;

}

1	<div class="underline">原来你是这样的毛玻璃</div>

效果：

2017-07-20by SKILLNULL HTML&CSS 阅读(6219)评论(0)

原来你是这样的毛玻璃

以前写毛玻璃用的都是图层覆盖，看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<!DOCTYPE html>

<html>

<head>

<title>原来你是这样的毛玻璃</title>

</head>

<style>

@keyframes ants {

to {

background-position: 100%;

}

body, main:before {

background: url("demoImages/1.jpg") 0 /cover fixed;

}

main {

position: relative;

background: hsla(0, 0%, 100%, .3);

overflow: hidden;

display: block;

margin: 200px auto;

width: 1000px;

height: 500px;

}

main:before {

content: '';

position: absolute;

top: 0%;

right: 0%;

left: 0%;

bottom: 0%;

filter: blur(10px);

margin: -30px;

}

.demoBox {

border: .5em solid transparent;

background: linear-gradient(white, white) padding-box,

repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

animation: ants 12s linear infinite;

}

.demo {

position: relative;

z-index: 999;

font-size: 5em;

text-align: center;

line-height: 5;

font-weight: 100;

}

</style>

<body>

<div class="demo">原来你是这样的毛玻璃</div>

</main>

</body>

</html>

效果图：

2018-12-03by SKILLNULL HTML&CSS 阅读(7263)评论(0)

CSS3边框会动的信封

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<html>

<head>

<title>酷炫的CSS3</title>

</head>

<style>

@keyframes ants {

to {

background-position: 100%;

}

.demo {

display: block;

margin: 200px auto;

width: 300px;

height: 200px;

border: 1em solid transparent;

background: linear-gradient(white, white) padding-box,

repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

animation: ants 12s linear infinite;

}

</style>

<body>

</body>

</html>

静态效果图：

2017-07-20by SKILLNULL HTML&CSS 阅读(7363)评论(0)

解决css3毛玻璃效果(blur)有白边问题

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

做一个登录页，全屏背景图毛玻璃效果，实现方法如下：

HTML：

<body>

　　</div>

　　　　var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

　　　　var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

　　　　$('.login-mask').css("height", h);

　　　　$('.login-mask').css("width", w);

　　</script>

</body>

CSS：

.login-wrap {

　　overflow: hidden;

}

.login-mask {

　　/* IE6~IE9 */

　　filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=100, MakeShadow=false);

　　-webkit-filter: blur(100px);

　　-moz-filter: blur(100px);

　　-ms-filter: blur(100px);

　　filter: blur(100px);

　　background-image: url(../../../img/background/home-bg-3.jpg);

　　background-repeat: no-repeat;

　　background-size: cover;

　　background-attachment: fixed;

　　background-position: center;

　　position: absolute;

　　z-index: 1;

}

.login-box {

　　width: 300px;

　　height: 400px;

　　background-color: rgba(255, 255, 255, 0.5);

　　display: block;

　　border: 1px solid rgba(183, 183, 183, 0.47);

　　border-radius: 6px;

　　position: absolute;

　　left: 50%;

　　margin-right: auto;

　　margin-left: -150px;

　　margin-top: 10%;

　　z-index: 2;

}

效果如下：

可以发现边上是有白边的，这是一种blur的值很大的情况下。此时的解决方法是直接将background-size:cover;改成background-size:150% 150%;就行了。

效果图如下：

仔[……]

2018-12-03by SKILLNULL HTML&CSS 阅读(11705)评论(0)

让textarea完全显示文章并且不滚动、不可拖拽、不可编辑

1

2

3

4

5

6

7

8

9

10

11

textarea {

　　width: 100%;

　　border: none;

　　outline: none;

　　resize: none;

　　overflow: hidden;

　　padding-bottom: 100%;

　　background-color: inherit;

}

2018-12-03by SKILLNULL HTML&CSS 阅读(6322)评论(0)

浏览器滚动条样式更改

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

::-webkit-scrollbar { // 滚动条整体部分

width: 6px;

height: 8px;

}

::-webkit-scrollbar-track { // 外层轨道

background-color: #eee;

border-radius: 4px;

}

::-webkit-scrollbar-track-piece { // 内层滚动槽

background-color: #eee;

border-radius: 4px;

}

::-webkit-scrollbar-thumb { // 滚动的滑块

background: rgba(32, 33, 36, 0.3);

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: rgba(32, 33, 36, 0.4);

width: 10px;

}

::-webkit-scrollbar-corner { // 边角

display: none;

}

::-webkit-scrollbar-button { // 滚动条两端的按钮

display: none;

}

注：目前仅Chrome下生效

2021-07-06by SKILLNULL HTML&CSS 阅读(6824)评论(0)

图片加载失败显示默认图片占位符

为网站的图片加上加载失败的默认占位符会让网站看起来更专业、更严谨。

<img src=”__PUBLIC__/img/simple/simplelove.png” onerror=”onerror=null;src=’__PUBLIC__/img/defaultpic.jpg'”&gt[……]

2017-08-14by SKILLNULL HTML&CSS 阅读(6850)评论(0)

为 placeholder 自定义样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

textarea::-webkit-input-placeholder{

　　padding: 1em;

}

textarea::-moz-placeholder{

　　padding: 1em;

}

<span style="color: #339966;">同理，input的定义方法为：</span>

input::-webkit-input-placeholder{

　　padding: .2em;

}

input::-moz-placeholder{

　　padding: .2em;

}

2017-08-14by SKILLNULL HTML&CSS 阅读(6035)评论(0)

2024年四月
一	二	三	四	五	六	日
« 8月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30