CSS line-height 属性的有个别技巧

2015/08/18 · CSS ·
line-height

本文由 伯乐在线 –
吴鹏煜
翻译,JustinWu
校稿。未经许可,禁止转发!
英文出处:css-tricks。欢迎插手翻译组。

CSS中的line-height属性控制着两行文本之间的空域多少,经常是会设置成一个无单位数值(比如line-height:1.4),讲明其与font-size属性所构成的百分比。line-height在排版上是拾分关键的2性情能,太低的话,文字的行与行之间会难堪地挤在同步,太高的话它们又会狼狈地分的太开,无论哪种都对读书不利。不过你恐怕已经通晓这点了。

那篇文章中大家会重点介绍一些技艺,倘诺您明白(恐怕能搞驾驭)line-height的贴切值,你可以做得更有趣 。

金沙注册送58 1

看到二个必要,如下图,新浪手机网页版的贰个视觉效果,对故事情节相当短的有个别有多个渐变的藏匿的功能,个人觉得这一个企划照旧很好的,符合手机大小的施用场景,没有一下子显得完全,可以疾速的滑倒页面尾部,一定水平上压缩了滑动时间,用户体验很好,对全部页面有3个光景的预览,性障碍会深感很爽。

惊艳的HTML5动画特效及源码,

后天大家要来分享部分很酷的HTML5卡通演示,HTML5的强劲之处在于它可以行使canvas的特征来绘制很多普通网页不或者做到的图纸和卡通片,canvas如同一块一级画板,在上边不仅可以兑现平面图形,而且有的3D动画也格外不难。很多HTML5动画片也都基于canvas,一起来探望吧。

为每一行文本钦定不一致颜色

不幸的是,我们并不曾::nth-line这么些采取器。大家也不能够仰望“会靠得住,数不清的原委或者导致文本在某处被断开。

有八个办法,固然不专业,就是使用成分的背景来担任文字的背景。

CSS

.text { -webkit-background-clip: text; -webkit-text-fill-color:
transparent; }

1
2
3
4
.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

也有另一个技艺,你可以用linear-gradient()充裕色彩点来支配颜色之间不会相互渐变,让二个颜料为止以往突然开始另二个颜色。大家假如line-height的值为22px,那我们就足以让渐变每逢22px断开五遍。

Sass

.text { background-image: linear-gradient( to bottom, #9588DD, #9588DD
22px, #DD88C8 22px, #DD88C8 44px, #D3DD88 44px, #D3DD88 66px,
#88B0DD 66px, #88B0DD) }

1
2
3
4
5
6
7
8
9
10
11
12
.text {
  background-image: linear-gradient(
    to bottom,
    #9588DD,
    #9588DD 22px,
    #DD88C8 22px,
    #DD88C8 44px,
    #D3DD88 44px,
    #D3DD88 66px,
    #88B0DD 66px,
    #88B0DD)
}

金沙注册送58 2

三个技术结合之后:

金沙注册送58 3

假定您的浏览器不支持text的background-clip,比如Firefox,那你就会看到位于文字背后的色彩长条,或者你会以为这么看起来很酷甚至会很欣赏,但或然你宁可回到设置文字颜色的覆辙上来。假如是后者的话,你可以用@support来设置成:假若浏览器协助,css才生效。

别的,既然你频仍的在采纳line-height的值,说不定把他成为变量相比较好。在此处本身用SCSS,不过什么日期可以应用真正的CSS变量那就真正太棒了,这样在页面渲染完还足以一连修改,并且望着它生效。

Sass

$lh: 1.4em; body { font-size: 1em; line-height: $lh; } @supports
(-webkit-background-clip: text) { p { -webkit-background-clip: text;
-webkit-text-fill-color: transparent; background-image: linear-gradient(
to bottom, #9588DD, #9588DD $lh, #DD88C8 $lh, #DD88C8 $lh*2,
#D3DD88 $lh*2, #D3DD88 $lh*3, #88B0DD $lh*3, #88B0DD); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$lh: 1.4em;
 
body {
  font-size: 1em;
  line-height: $lh;
}
 
@supports (-webkit-background-clip: text) {
  p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      to bottom,
      #9588DD,
      #9588DD $lh,
      #DD88C8 $lh,
      #DD88C8 $lh*2,
      #D3DD88 $lh*2,
      #D3DD88 $lh*3,
      #88B0DD $lh*3,
      #88B0DD);
  }
}

最简易的法门是在最上层的要素中应用那些属性,那里有个样例,它的最初几行是第三。

Sass

.text { -webkit-background-clip: text; -webkit-text-fill-color:
transparent; background-image: linear-gradient( to bottom, rgba(white,
0.8), rgba(white, 0.8) $lh, rgba(white, 0.6) $lh, rgba(white, 0.6)
$lh*2, rgba(white, 0.4) $lh*2, rgba(white, 0.4) $lh*3, rgba(white,
0.2) $lh*3, rgba(white, 0.2)); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
    rgba(white, 0.8) $lh,
    rgba(white, 0.6) $lh,
    rgba(white, 0.6) $lh*2,
    rgba(white, 0.4) $lh*2,
    rgba(white, 0.4) $lh*3,
    rgba(white, 0.2) $lh*3,
    rgba(white, 0.2));
}

金沙注册送58 4

一经大家要操控到最末任意行,那将会更难。那样的话,大家就需求色带从头开端一路往下,直到尾数的几行,幸运的是大家可以用calc()来实现。

Sass

.text { -webkit-background-clip: text; -webkit-text-fill-color:
transparent; background-image: linear-gradient( to bottom, rgba(white,
0.8), rgba(white, 0.8) calc(100% – 66px), rgba(white, 0.6) calc(100% –
66px), rgba(white, 0.6) calc(100% – 44px), rgba(white, 0.4) calc(100% –
44px), rgba(white, 0.4) calc(100% – 22px), rgba(white, 0.2) calc(100% –
22px), rgba(white, 0.2)); background-position: bottom center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
    rgba(white, 0.8) calc(100% – 66px),
    rgba(white, 0.6) calc(100% – 66px),
    rgba(white, 0.6) calc(100% – 44px),
    rgba(white, 0.4) calc(100% – 44px),
    rgba(white, 0.4) calc(100% – 22px),
    rgba(white, 0.2) calc(100% – 22px),
    rgba(white, 0.2));
  background-position: bottom center;
}

金沙注册送58 5

也有其余艺术能够兑现这种功能,比如叠加一层伪成分渐变,并安装pointer-events:none,避防形成烦扰。

金沙注册送58 6

金沙注册送58 7

HTML5/CSS3贯彻大风车旋转动画

用作明天首款HTML5动画,这款大风车旋转效果实在十分棒,它是用纯CSS3落到实处。

个性的一对技巧,惊艳的HTML5动画特效及源码。核心CSS代码:

金沙注册送58 8.wmd1{
-webkit-transform: scale(.6); position:absolute; top:180px; left:200px;
perspective: 1000px; } .base{ } .blades{ width: 350px; height: 350px;
left: 10%; top: 10%; z-index:2; border-radius: 50%; position: absolute;
margin-top: -30px; margin-left: 50px; animation: spin 6s linear
infinite; } .blade1 { background: white; position:absolute; width:41px;
height:139px; top:-10px; left:150.5px; transform:rotate(0deg);
display:inline-block; background: linear-gradient(135deg, transparent
20px, white 0), linear-gradient(225deg, transparent 20px, white 0),
linear-gradient(315deg, transparent 20px, white 0),
linear-gradient(45deg, transparent 20px, white 0); background-position:
top left, top right, bottom right, bottom left; background-size: 50%
50%; background-repeat: no-repeat; } .blade2 { background:white;
position:absolute; width:41px; height:139px; top:105.5px; left:41px;
transform:rotate(-90deg); display:inline-block; background:
linear-gradient(135deg, transparent 20px, white 0),
linear-gradient(225deg, transparent 20px, white 0),
linear-gradient(315deg, transparent 20px, white 0),
linear-gradient(45deg, transparent 20px, white 0); background-position:
top left, top right, bottom right, bottom left; background-size: 50%
50%; background-repeat: no-repeat; } .blade3 { background:white;
position:absolute; width:41px; height:139px; top:105.5px; right:41px;
transform:rotate(-270deg); display:inline-block; background:
linear-gradient(135deg, transparent 20px, white 0),
linear-gradient(225deg, transparent 20px, white 0),
linear-gradient(315deg, transparent 20px, white 0),
linear-gradient(45deg, transparent 20px, white 0); background-position:
top left, top right, bottom right, bottom left; background-size: 50%
50%; background-repeat: no-repeat; } .blade4 { background:white;
position:absolute; width:41px; height:139px; bottom:-10px; left:150.5px;
transform:rotate(180deg); display:inline-block; background:
linear-gradient(135deg, transparent 20px, white 0),
linear-gradient(225deg, transparent 20px, white 0),
linear-gradient(315deg, transparent 20px, white 0),
linear-gradient(45deg, transparent 20px, white 0); background-position:
top left, top right, bottom right, bottom left; background-size: 50%
50%; background-repeat: no-repeat; } .vane1{ width:1px; height:350px;
left:175px; background:white; position:absolute;
transform:rotate(90deg); } .vane2{ width:1px; height:350px;
left:171.5px; background:white; position:absolute;
transform:rotate(180deg); } .base .bottom_base{ position:absolute;
width:90px; height:100px; left:162px; border-right: 16px solid
transparent; border-left: 16px solid transparent; border-bottom: 380px
solid white; opacity:.8; z-index:-1; top:42.5px; } ul{
position:absolute; top:180px; left:-30px; } li{ width:10px; height:10px;
background:white; padding:2px; display:block; margin: 30px; box-shadow:
inset 0px -2px 0px lightgray; } li:nth-child(2){ position:absolute;
top:-45px; left:20px; } li:nth-child(1){ position:absolute; top:35px;
left:50px; } li:nth-child(3){ position:absolute; top:75px; left:50px; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% {
transform:rotate(-360deg); } } View
Code

金沙注册送58 9

在线演示        源码下载

文字间的线

咱俩地点介绍了什么样支配渐变色彩点,如若用一般的不二法门,大家得以创设以1px为单位的渐变,相提并论新直到达到line-height。最不难易行的方法是选拔

repeating-linear-gradient来落成,同时也要力保其余因素乖乖就位(比如padding也是基于line-height)。

Sass

.parent { padding: $lh*金沙注册送58,2; background: #082838; background-image:
repeating-linear-gradient( to bottom, rgba(white, 0) 0, rgba(white, 0)
$lh/1em*16px-1, rgba(white, 0.1) $lh/1em*16px-1, rgba(white, 0.1)
$lh/1em*16px ); }

1
2
3
4
5
6
7
8
9
10
11
.parent {
  padding: $lh*2;
  background: #082838;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(white, 0)   0,
    rgba(white, 0)   $lh/1em*16px-1,
    rgba(white, 0.1) $lh/1em*16px-1,
    rgba(white, 0.1) $lh/1em*16px
  );
}

为了创设1px的线,我们需求精通line-height以像素为单位的值,然后减1。减1是为了让渐变会准确的以已知的line-height来重复,并留出最后1px用作线。由于大家让body的font-size为1em,也等于16px,所以line-height的单位被装置为em,你可以通过除去1em来移除单位,然后乘以16px再减1来获取大家必要的数值。

金沙注册送58 10

html代码:

切实怎么落到实处那么些成效,分析一下:

纯CSS3 3D图片翻转显示

那是一款基于CSS3的3D图片显示,在图纸切换时将会有扭动的卡通片效果。

核心CSS代码:

金沙注册送58 11.coverflow-list
{ width: 100%; } .coverflow-list .coverflow-item { display:
inline-block; background: #414141; margin: 0 -50px; position: relative;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); } .coverflow-list
.coverflow-item .album-cover { display: block; height: 150px; margin: 0;
} .coverflow-list .coverflow-item .album-cover img { height: 150px;
width: 150px; opacity: 0.5; } .coverflow-list .coverflow-item
.album-name { text-align: center; display: block; color: #444; }
.coverflow-list .coverflow-item label { padding: 0; border: none;
display: block; text-shadow: none; } /* Now apply 3D transforms (never
done this before!) */ .coverflow-list { -webkit-transform:
perspective(900px); -webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 100% 30%; } .coverflow-list .coverflow-item
{ -webkit-transition: all 0.4s ease; background: #212121;
-webkit-transform: rotateY(45deg); } input[type=”radio”] { display:
none; } input[type=”radio”]:checked + .coverflow-item {
-webkit-transform: rotateY(0deg); margin: 0 auto; background: #313131;
transition: all 0.4s ease; } input[type=”radio”]:checked +
.coverflow-item img { opacity: 1; } input[type=”radio”]:checked +
.coverflow-item figcaption { color: #FFFFFF; }
input[type=”radio”]:checked + .coverflow-item ~ .coverflow-item {
-webkit-transform: rotateY(-45deg); background: #515151; } View Code

金沙注册送58 12

在线演示        源码下载

Position images one-per-line

还有一件知道line-height你可以做的事就是,让bakcground-size与其合作,至少在笔直方向上要合营。然后您就可以让背景垂直重复,最终效果就是:一行二个图形。

Sass

.text background-image: url(image.svg); background-size: $lh $lh;
background-repeat: repeat-y; padding-left: $lh*2; }

1
2
3
4
5
6
.text
  background-image: url(image.svg);
  background-size: $lh $lh;
  background-repeat: repeat-y;
  padding-left: $lh*2;
}

See the Pen One line of Text Dif
Color by Chris Coyier
(@chriscoyier) on
CodePen.

1 赞 1 收藏
评论

<button>Rabbit</button>

可以看出来是一个渐变的功效,从上往下颜色变白,大家精通在css3中有二种渐变:线性(linear-gradient)和通往(radial-gradient),很肯定那里属于线性渐变。

美好的CSS3动画进度条

那是一款闪闪发光的CSS3进度条,进度条在伊始化的时候还有滑动的卡通片特效。

核心jQuery代码:

金沙注册送58 13(function()
{ $(document).ready(function() { return $(“.bar”).each(function(i, elem)
{ return $(elem).addClass(‘active’); }); }); }).call(this); View Code

金沙注册送58 14

在线演示        源码下载

关于小编:吴鹏煜

金沙注册送58 15

真心、勇气、创意和神话。(腾讯网天涯论坛:@Nappp)
个人主页 ·
作者的篇章 ·
13

金沙注册送58 16

CSS代码:

 

CSS3垂直图标菜单

那是一款简单而舒适的CSS3垂直菜单,鼠标滑过菜单项还有Tooltip的卡通效果。

核心CSS代码:

金沙注册送58 17#nav-bar
{ margin: 50px 50px 50px 400px; max-width: 50px; border: 1px solid
#bed1df; border-radius: 4%; background-color: white;
-webkit-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
-moz-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11); box-shadow: -2px
3px 2px 0px rgba(5, 0, 0, 0.11); } li { color: #bed1df; margin: 0;
font-family: ‘Open Sans’, sans-serif; font-size: 0.75em; list-style:
none; } li.level-one { font-size: 1.5em; text-align: center; border-top:
1px solid #bed1df; cursor: pointer; } li.level-one:first-child {
border-top: none; } li.level-one:hover { background:
rgba(255,255,255,1); background: -moz-linear-gradient(top,
rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1)
100%); background: -webkit-gradient(left top, left bottom,
color-stop(0%, rgba(255,255,255,1)), color-stop(47%,
rgba(246,246,246,1)), color-stop(100%, rgba(233,238,242,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,
rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background:
-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%,
rgba(233,238,242,1) 100%); background: -ms-linear-gradient(top,
rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1)
100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,
rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’,
endColorstr=’#e9eef2′, GradientType=0 ); } #selected { background:
#3f8eb9; -webkit-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
-moz-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45); box-shadow:
inset 1px 1px 10px 1px rgba(0,0,0,0.45); } i { color: #bed1df; margin:
25%; } p { font-family: ‘Open Sans’, sans-serif; font-size: 0.8em;
color: #bed1df; margin: 50px; } a { color: #3f8eb9; text-decoration:
none; } .level-one { position: relative; } .level-two { display: none;
position: absolute; height: 50px; width: 100px; background: #FFFFFF;
border-radius: 4px; font-family: ‘Open Sans’, sans-serif; font-size:
0.65em; text-align: center; } .level-two:after { content: ”; position:
absolute; border-style: solid; border-width: 9px 9px 9px 0;
border-color: transparent #fff; display: block; width: 0; z-index: 1;
left: -9px; top: 15px; } .level-two li { margin: 15px; }
.level-one:hover > .level-two { display: block; } .level-two { left:
130%; top: 0; } View Code

金沙注册送58 18

在线演示        源码下载

padding: 6px 16px;

border: 1px solid #446d88;

background: #58a linear-gradient(#77a0bb, #58a);

/* 设置背景渐变。

第一个#58a用来定义三个背景象,效能是一旦不包容渐变背景的浏览器,会把背景观展现成#58a
*/

border-radius: 4px;

/* 圆角 */

box-shadow: 0 1px 5px gray;

/* 盒子阴影 */

color: white;

text-shadow: 0 -1px 1px #335166;

/* 字体阴影 */

font-size: 20px;

line-height: 30px;

潜移默化那种效用实在是3个图形的典范,大家得以设置一张左右透明的背景图,定位在文字上,没有渐变在此之前可以用那种形式。css3有了渐变,大家可以直接行使,渐变可以行使于任何利用背景图片的地点。那象征在CSS样式中,渐变相当于背景图片。

纯CSS3背景渐变按钮 按钮图标淡入淡出动画

那是一组带有动画效果的HTML5按钮,鼠标滑过按钮时将应运而生背景渐变的动画片特效。

核心CSS代码:

金沙注册送58 19.test{
width:320px; height:90px; margin:30px auto;
background:-webkit-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
background:-moz-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
background:-ms-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
background:-o-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
background:#A9DB80; box-shadow:0 0 3px #999; border-radius:3px;
transition:1s all ease; -webkit-transition:0.5s all ease;
-moz-transition:0.5s all ease; -ms-transition:0.5s all ease;
-o-transition:0.5s all ease; overflow:hidden; } .test .aLink{
display:block; width:318px; height:88px;
background:-webkit-linear-gradient(center top , #FFF 2%);
background:-moz-linear-gradient(center top , #FFF 2%);
background:-ms-linear-gradient(center top , #FFF 2%);
background:-o-linear-gradient(center top , #FFF 2%); box-shadow:0 1px
1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px;
position:relative; text-decoration:none; border:#484848 solid 1px;
overflow:hidden; } .test .aLink .txt{ position:absolute; font-size:28px;
color:#6D954E; left:18px; top:26px; opacity:0; -webkit-transition:0.2s
all ease; -moz-transition:0.2s all ease; -ms-transition:0.2s all ease;
-o-transition:0.2s all ease; transition:0.2s all ease; } .test .aLink
.img{ position:absolute; width:70px; height:70px; display:block;
z-index:2; top:12px; left:10px; -webkit-transition:0.2s all ease;
-moz-transition:0.2s all ease; -ms-transition:0.2s all ease;
-o-transition:0.2s all ease; transition:0.2s all ease; } .test .aLink
.txt2{ font-size:32px; color:#FFF; width:140px; overflow:hidden;
display:block; text-shadow:0 0 2px #999999; position:absolute;
left:80px; text-align:center; top:10px; font-family:”Comic Sans MS”,
cursive; } .test .aLink .txt2 span{ font-size:14px; color:#FFF;
display:block; } .test .aLink .btn{ width:80px; display:block;
height:88px; position:absolute; right:0; top:0; border-left:#484848
solid 1px; box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
-webkit-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
-ms-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
-moz-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
-o-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); } .test
.aLink .btn span{ display:block; width:40px; height:40px;
background:url(img/arrow_down.png) center center no-repeat #333;
margin:24px auto; border-radius:50%; -webkit-transition:0.3s all ease;
-moz-transition:0.3s all ease; -ms-transition:0.3s all ease;
-o-transition:0.3s all ease; } /*动画*/ .test:hover{ box-shadow:0 0
10px #666; box-shadow:0 0 10px #666; } .test:hover .img{ width:150px;
height:150px; left:-26px; top:-30px; opacity:0; } .test:hover .txt{
opacity:1; } .test:active{ box-shadow:0 0 0px #999;
background:-webkit-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
background:-moz-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
background:-ms-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
background:-o-linear-gradient(top , #80ab5d 0%, #80ab5d 100%); }
.test:active .aLink{ box-shadow:inset 2px 2px 3px #666666; }
.test:active .btn{ box-shadow:inset 1px 1px 1px #666666;
box-shadow:inset 1px 1px 1px #666666); } .test:active .txt{
color:#A9DB80; } .test:active .btn span{ width:60px; height:60px;
margin-top:15px; background-size:60%; } View Code

金沙注册送58 20

在线演示        源码下载


 

龙精虎猛的CSS3 Loading文字特效

金沙注册送58 21

在线演示        源码下载

比例篇

background-image: linear-gradient(str1,str2,str3);

纯CSS3兑现滑杆开关怀换按钮动画

很正确的自定义radiobox效果,极度有创意

金沙注册送58 22.switch {
display: inline-block; margin: 10em 2em; position: relative;
border-radius: 3.5em; -webkit-box-shadow: 0 0 0.5em
rgba(255,255,255,0.2); -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
box-shadow: 0 0 0.5em rgba(255,255,255,0.2); } .switch label { width:
100%; height: 100%; margin: 0; padding: 0; display: block; position:
absolute; top: 0; left: 0; z-index: 10; } .switch input { display: none;
} .switch span { display: block; -webkit-transition: top 0.2s;
-moz-transition: top 0.2s; -ms-transition: top 0.2s; -o-transition: top
0.2s; transition: top 0.2s; } .switch-border1 { border: 0.1em solid
#000; border-radius: 3.5em; -webkit-box-shadow: 0 0.2em rgba(255, 255,
255, 0.2); -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
box-shadow: 0 0.2em rgba(255, 255, 255, 0.2); } .switch-border2 { width:
6.6em; height: 12.6em; position: relative; border: 0.1em solid #323232;
background-image: -webkit-gradient(linear, left top, right top,
from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B,
#2D2D2D); background-image: -moz-linear-gradient(left, #2D2D2D,
#4B4B4B, #2D2D2D); background-image: -ms-linear-gradient(left,
#2D2D2D, #4B4B4B, #2D2D2D); background-image:
-o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
background-image: linear-gradient(to right, #2D2D2D, #4B4B4B,
#2D2D2D); border-radius: 3.4em; } .switch-border2:before,
.switch-border2:after { content: ”; display: block; width: 100%;
height: 100%; position: absolute; top: 0; left: 0; z-index: 0; opacity:
.3; border-radius: 3.4em; } .switch-border2:before { background:
-webkit-gradient(linear, left top, left bottom, from(#000),
to(rgba(0,0,0,0))); background: -webkit-linear-gradient(#000,
rgba(0,0,0,0)); background: -moz-linear-gradient(#000, rgba(0,0,0,0));
background: -ms-linear-gradient(#000, rgba(0,0,0,0)); background:
-o-linear-gradient(#000, rgba(0,0,0,0)); background:
linear-gradient(#000, rgba(0,0,0,0)); } .switch-border2:after {
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,0)), to(#000)); background:
-webkit-linear-gradient(rgba(0,0,0,0), #000); background:
-moz-linear-gradient(rgba(0,0,0,0), #000); background:
-ms-linear-gradient(rgba(0,0,0,0), #000); background:
-o-linear-gradient(rgba(0,0,0,0), #000); background:
linear-gradient(rgba(0,0,0,0), #000); } .switch-top { width: 100%;
height: 84%; position: absolute; top: 8%; left: 0; z-index: 1;
background-image: -webkit-gradient(linear, left top, right top,
from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B,
#2D2D2D); background-image: -moz-linear-gradient(left, #2D2D2D,
#4B4B4B, #2D2D2D); background-image: -ms-linear-gradient(left,
#2D2D2D, #4B4B4B, #2D2D2D); background-image:
-o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
background-image: linear-gradient(to right, #2D2D2D, #4B4B4B,
#2D2D2D); border-radius: 3.4em; } .switch-shadow { width: 100%; height:
100%; position: absolute; top: 0; left: 0; z-index: 2; border-radius:
3.4em; -webkit-box-shadow: 0 0 2em black inset; -moz-box-shadow: 0 0 2em
black inset; box-shadow: 0 0 2em black inset; } .switch-handle-left,
.switch-handle-right { content: ”; display: block; width: 3.6em;
height: 0; position: absolute; top: 6.6em; z-index: 2; border-bottom:
4.5em solid #111; border-left: 0.7em solid transparent; border-right:
0.7em solid transparent; border-radius: 0; } .switch-handle-left { left:
0.8em; } .switch-handle-right { right: 0.8em; } .switch-handle { width:
3.6em; height: 4.5em; position: absolute; top: 6.6em; left: 1.5em;
z-index: 3; background: #333; background-image:
-webkit-gradient(linear, left top, right top, from(#111),
color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777),
to(#111)); background-image: -webkit-linear-gradient(left, #111, #777
40%, #888, #777 60%, #111); background-image:
-moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
background-image: -ms-linear-gradient(left, #111, #777 40%, #888,
#777 60%, #111); background-image: -o-linear-gradient(left, #111,
#777 40%, #888, #777 60%, #111); background-image:
linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
border-radius: 0; } .switch-handle-top { width: 5em; height: 5em;
position: absolute; top: 8.5em; left: 0.8em; z-index: 4;
background-color: #555; background-image: -webkit-gradient(linear, left
top, right top, from(#5F5F5F), to(#878787)); background-image:
-webkit-linear-gradient(left, #5F5F5F, #878787); background-image:
-moz-linear-gradient(left, #5F5F5F, #878787); background-image:
-ms-linear-gradient(left, #5F5F5F, #878787); background-image:
-o-linear-gradient(left, #5F5F5F, #878787); background-image:
linear-gradient(to right, #5F5F5F, #878787); border-top: 0.2em solid
#AEB2B3; border-radius: 2.5em; } .switch-handle-bottom { width: 3.6em;
height: 3.6em; position: absolute; top: 4.7em; left: 1.5em; z-index: 3;
background: #333; background-image: -webkit-gradient(linear, left top,
right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888),
color-stop(0.6, #777), to(#111)); background-image:
-webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%,
#111); background-image: -moz-linear-gradient(left, #111, #777 40%,
#888, #777 60%, #111); background-image: -ms-linear-gradient(left,
#111, #777 40%, #888, #777 60%, #111); background-image:
-o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
background-image: linear-gradient(to right, #111, #777 40%, #888,
#777 60%, #111); border-top: 0.2em solid #141414; border-radius:
1.8em; } .switch-handle-base { width: 4.2em; height: 4.2em; position:
absolute; top: 3.8em; left: 1.2em; z-index: 2; border-top: 0.2em solid
rgba(255,255,255,0.35); border-radius: 2.1em; -webkit-box-shadow: 0 0
0.5em rgba(0,0,0,0.8) inset; -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8)
inset; box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset; } .switch-led {
position: absolute; left: 2em; border-radius: 1.4em; }
.switch-led-border { border: 0.2em solid black; border-radius: 1.3em; }
.switch-led-light { border-radius: 1.1em; -webkit-box-shadow: 0 0 0.5em
rgba(255,255,255,0.5) inset; -moz-box-shadow: 0 0 0.5em
rgba(255,255,255,0.5) inset; box-shadow: 0 0 0.5em rgba(255,255,255,0.5)
inset; } .switch-led-glow { width: 2em; height: 2em; position: relative;
border-radius: 1em; } .switch-led-glow:before { content: ”; display:
block; width: 0.6em; height: 0.6em; position: absolute; top: 0.3em;
left: 0.7em; background: rgba(255,255,255,0.2); border-radius: 0.3em;
-webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75); -moz-box-shadow: 0 0
1em rgba(255,255,255,0.75); box-shadow: 0 0 1em rgba(255,255,255,0.75);
} .switch-led-glow:after { content: ”; display: block; width: 0;
height: 0; position: absolute; top: 0; left: 0; opacity: 0.2; filter:
alpha(opacity=20); border: 1em solid #fff; border-color: transparent
#fff transparent #fff; border-radius: 1em; -webkit-transform:
rotate(45deg); -moz-transform: rotate(45deg); -ms-transform:
rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.switch-led:after { display: block; width: 100%; position: absolute;
left: 0; color: #666; font-family: arial, verdana, sans-serif;
font-weight: bold; text-align: center; text-shadow: 0 0.1em
rgba(0,0,0,0.7); } .switch-led-green:after { content: ‘ON’; top: -1.8em;
} .switch-led-red:after { content: ‘OFF’; bottom: -1.8em; }
.switch-led-green { top: -5em; border-top: 0.1em solid
rgba(0,161,75,0.5); border-bottom: 0.1em solid rgba(255,255,255,0.25); }
.switch-led-green .switch-led-light { background: rgb(0,161,75); border:
0.1em solid rgb(0,104,56); } .switch-led-red { bottom: -5em; border-top:
0.1em solid rgba(237,28,36,0.2); border-bottom: 0.1em solid
rgba(255,255,255,0.25); -webkit-box-shadow: 0 0 3em rgb(237,28,36);
-moz-box-shadow: 0 0 3em rgb(237,28,36); box-shadow: 0 0 3em
rgb(237,28,36); } .switch-led-red .switch-led-light { background:
rgb(237,28,36); border: 0.1em solid rgb(161,30,45); } .switch-led-red
.switch-led-glow { background: #fff; background: rgba(255, 255, 255,
0.3); filter: alpha(opacity=30); } /* Switch on */ .switch
input:checked~.switch-handle-left, .switch
input:checked~.switch-handle-right { top: 1.5em; border-bottom: 0;
border-top: 4.5em solid #111; } .switch input:checked~.switch-handle {
top: 1.5em; } .switch input:checked~.switch-handle-top { top: -1em;
border-top: 0; border-bottom: 0.2em solid #AEB2B3; } .switch
input:checked~.switch-handle-bottom { top: 4.2em; border-top: 0;
border-bottom: 0.2em solid #141414; } .switch
input:checked~.switch-handle-base { top: 4.5em; border-top: 0;
border-bottom: 0.2em solid rgba(255,255,255,0.35); } .switch
input:checked~.switch-led-green { -webkit-box-shadow: 0 0 3em
rgb(0,161,75); -moz-box-shadow: 0 0 3em rgb(0,161,75); box-shadow: 0 0
3em rgb(0,161,75); } .switch input:checked~.switch-led-green
.switch-led-glow { background: #fff; background: rgba(255, 255, 255,
0.4); filter: alpha(opacity=40); } .switch input:checked~.switch-led-red
{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.switch input:checked~.switch-led-red .switch-led-glow { background:
rgba(255, 255, 255, 0); filter: alpha(opacity=0); } View Code

金沙注册送58 23

在线演示        源码下载

上述代码能已经能赢得图1的职能了。但维护性极差。借使要修改button大小,那么字体、阴影、边框的圆角都要随着修改,工作量会变大。在改动以前,要明白怎么要相对单位,哪些要用相对单位。

渐变中共有多少个参数,第1个数数表示线性渐变的样子,第3个和第七个参数分别是起源颜色和顶峰颜色。

HTML5/CSS3多颜料柱状图表 带基准数据线

那款是根据HTML5的水准柱形图,带有基准线。

核心jQuery代码:

金沙注册送58 24$(document).ready(function(){
$(‘.bar’).each(function(i, elem){ drawBar(elem); });
$(‘.measure’).each(function(i, elem){ drawMeasure(elem); });
$(‘a.redraw’).click(function(e){ e.preventDefault();
$(‘.bar’).each(function(i, elem){ randomiseBar(elem); });
$(‘.measure’).each(function(i, elem){ randomiseMeasure(elem); }); });
function drawBar(bar) { var percentage = $(bar).data(‘percentage’);
if(percentage > 100){ percentage = 100; } $(bar).animate({‘width’:
percentage + ‘%’}, ‘slow’); } function randomiseBar(bar) { var width =
Math.floor(Math.random() * (100 – 20 + 1)) + 20;
$(bar).animate({‘width’: width + ‘%’}, ‘slow’);
$(bar).attr(‘data-percentage’, width); } function drawMeasure(measure) {
var percentage = $(measure).data(‘percentage’); if(percentage > 100){
percentage = 100; } $(measure).animate({‘width’: percentage + ‘%’},
‘slow’); } function randomiseMeasure(measure) { var width =
Math.floor(Math.random() * (100 – 20 + 1)) + 20;
$(measure).animate({‘width’: width + ‘%’}, ‘slow’);
$(measure).attr(‘data-percentage’, width); } }); View Code

金沙注册送58 25

在线演示        源码下载

率先能一贯修改的是CSS部分说到底2行代码。假若要修改字号(字体大小),那么行高就要做出相应的变动。以往从行高和字号来看,行高是字号的1.5倍。可是从上边的代码中,行高并没有反映出它跟字号的涉嫌。当某个值相互依赖时,应该把它们的互相关系用代码表明出来。

 

可以一贯改动行高

方案一:

明天大家要来分享部分很酷的HTML5卡通演示,HTML5的有力之处在于它可以使用canvas的性状来绘制很多平淡无奇网页无…

font-size: 20px;

line-height: 1.5;

HTML:

对字体来说,用绝对单位值(px)来定义的确很好了然,也很不难掌控。但是即使要修改网页中其余岗位文字的字号,可能是修改button父元素的字号,那么button和网页中任啥地方方的字号就要相应作出修改了。所以在此处用em恐怕百分比做单位会比较适宜。

<div class=”show_text”>

假诺父元素的字号是16px(在很多浏览器里面,默许的字号是16px)

<p>看到三个须要,如图,今日头条手机网页版的一个视觉效果,对标题相当短的有的会有被潜移默化的覆盖的效应,个人认为这些安排依然很好的,符合手机大小的运用场……..</p>

font-size: 125%;

line-height: 1.5;

</div>

近年来,如若button父成分的字号改变了,那么button的尺码也会跟着变动(因为字体变大了,而button只设了padding,所以button会被字体撑大)。不过button的内边距、圆角大大小小、阴影都不会跟着变化,所以看起来相比较别扭。比如下图。

<div class=”mask”></div>

金沙注册送58 26

CSS:

此地本身把body的字号设成5em,与图1比起来,好像差了好多。所以大家相应也要把padding、border-radius、box-shadow和text-shadow的单位改成绝对单位。

                body{

padding:.3em.8em;

border-radius:.2em;

box-shadow: 0.05em.25emgray;

text-shadow: 0-.05em.05em#335166;

position: relative;

上述修改的地方,都以用原来的 相对值÷16 得出三个近似值。而
像“.3em”那类数值,后边的0都省略掉了,CSS3支撑那样的粗略。真实值是0.3em。

}

金沙注册送58 27

.show_text{

近期看起来比例就数见不鲜了。

width: 620px;

其一事例中,没展开边框粗细的安装。因为梦想button的边框粗细始终维持1px,不受button尺寸的震慑。

margin:0 auto;


}

色彩篇

.mask{

在几个网站中,颜色也是三个主要的变数。比如有“分明”按钮,也有“取消”按钮。它们长得一模一样,就是颜色各异。

width:620px;

因此我们只怕须求覆盖4条申明(border-color、background

position: absolute;

、box-shadow、text-shadow),而且还有2个大难点:要依照按钮的亮面和暗面相对于主色调亮色和暗色的档次来分别推导出任何颜料各自的亮色和暗色。

top:0;

解题思路是:这些事例中,主色调唯有一个,渐变唯有明暗变化,所以若是把半透明的高粱红或桔红叠加在主色调上,即可暴发主色调的亮色和暗色变体。学过PS的人都精通那种图层原理。

height: 71px;

border: 1px solidrgba(0, 0, 0, .1);

background: #58a linear-gradient(hsla(0, 0%, 100%, .2),transparent);

box-shadow: 0 .05em .25emrgba(0, 0, 0, .5);

text-shadow: 0 -.05em .05emrgba(0, 0, 0, .5);

background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0),
#fff);

金沙注册送58 28

background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);

至此,样式就核心修改形成了。

background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);


background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);

说到底代码

}

html代码:

效果图:

<button>Rabbit</button>

金沙注册送58 29

CSS代码:

金沙注册送58 30
hsla(0,0%,百分之百,0) 也足以运用 rgba(255,255,255,0)代替;

padding: .3em .8em;

border: 1px solid rgba(0, 0, 0, .1);

background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);

border-radius: .2em;

box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);

color: white;

text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);

font-size: 125%;

line-height: 1.5;

对hsal相比较面生可以点击【第贰69期】背景透明,文字不透明的缓解方案


参考有关rgba()和hsal()的行使介绍

如果我们要添加其余按钮,想利用同样的样式,只是颜色各异,可以平昔在这几个基础的button样式后边覆盖background-color属性即可。

 

html代码:

先是我们找个大汉,然后站在她的肩头上

<button>Rabbit</button>

<button class=”ok”>OK</button>

<button class=”cancel”>Cancel</button>

 

CSS代码:

方案二:

button {

padding: .3em .8em;

border: 1px solid rgba(0, 0, 0, .1);

background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);

border-radius: .2em;

box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);

color: white;

text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);

font-size: 125%;

line-height: 1.5;

}

button.ok {

background-color: #6b0;

}

button.cancel {

background-color: #c00;

}

在几年前张大神的博客中也有像样的效用,他写的成效是对文字自个儿举办潜移默化,也是一种思路,借鉴过来使用,字体颜色为蛋黄,可以安装卡其灰到白色的上下渐变。

金沙注册送58 31

p{

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(25,
27, 25)), to(rgb(245, 244, 244)));

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

}

后三种性格包容性不是很好。

chrome下效果图

金沙注册送58 32
视觉上差异不是特地大

引进应用方案一。

 

后记:

在这些大前端时期,相比较种种火热的前端框架,CSS虽简单,也是便于被忽略,想要对CSS有1个比较深的左右也是须求下大素养的。在追逐大潮趋势下,大家也要打好深厚的基础,js也是,万变不离其宗。

相关文章

网站地图xml地图