Menu
Woocommerce Menu

19个你只怕不依赖是用CSS制作出来的东西,多少个CSS的黑科技(science and technology)

0 Comment


14. Animated checkmark button

Sascha Michael
Trinkaus制作了这个由渐变颜色包围的复选框按钮。请特别注意当你点击它的时候的效果。

图片 1

小问题,大麻烦

来看一个经常遇到的切换导航。在手机端经常的设计中经常可以遇到此问题,顶部的tab切换标签。设计给的标注是左右对半分,并且拥有各自的边框,然后自由伸缩和切换。像下面那样。

图片 2

一开始,你会感觉这很容易,因为无非是两个宽度为50%的div并排排列了。但是开始做的时候,你才会知道被设计师的边框坑了。因为如果你设置了width为50%,那么两个div是100%,除此之外还有两个div的左右边框的长度是没地方放置的!也就是说,当你把它们并排放置在一起的时候,实际上它们总宽度是100%
+
4px!,多出了4个px,这导致了右边的box会掉下去(如果你用的float)。如果你用box布局,在使用了flex自由延伸后属性(请见我之前的博客)不会出现这个情况,但如果你还不会box布局,而又希望简单解决此问题(尤其是在考虑padding的固定填充距离后box布局也无法完美解决),那么是时候该学习box-sizing了(只需要1000ms)。

outline-offset

相信很多开发者在写CSS的时候对下面的语句会很熟悉:

CSS

input { outline : none; } input:focus { outline : none; }

1
2
3
4
5
6
7
input {
    outline : none;
}
 
input:focus {
    outline : none;
}

这就是将input输入框去掉默认的蓝线框的方法。其实,这里还有说一个就是,CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离;像这样

CSS

input { outline-offset: 4px ; }

1
2
3
input {
    outline-offset: 4px ;
}

调节该属性值的大小你就可以看到outline的距离变化了。

18. Loaders Kit

这些是用纯CSS实现的加载样式。如果你想减小带宽的使用,基于CSS的加载样式将会非常的好用。

图片 3

1 赞 7 收藏 1
评论

图片 4

Box-sizing:小身材,大拳头!

2015/10/21 · CSS ·
Box-sizing

原文出处:
卖烧烤夫斯基   

国庆回来,很久没写博客了。一来是自己毫无时间,二是最近开发任务特别紧,三是节后综合症,脑子一片空白没有找到写作的原材料。今天,在加完班回来的22点,忙里偷闲,分享一下最近学到的一个小知识点如题。标题的灵感来自于暴雪的一款卡牌游戏:炉石传说中的一张卡牌的上场台词,觉得很契合本篇博客要表达的含义,身材小小,拳头大大呢!

border-radius

很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的:

CSS

.box { border-radius: 4px; }

1
2
3
.box {
  border-radius: 4px;
}

稍微高端一点的是这样的:

CSS

.box { border-radius: 4px 6px 6px 4px; }

1
2
3
.box {
  border-radius: 4px 6px 6px 4px;
}

然而,终极黑科技是这样用的:

CSS

.box { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }

1
2
3
.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

对,它可以赋8个值,没见过?不着急,具体的解释是这样的:

CSS

斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。

1
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。

15. Minion

这是另一个由CSS实现的可爱风格的Minion 。

图片 5

盒子模型

Box-sizing属性一直比较陌生,在楼主平时的开发过程中一直都没机会见识,以前遇到应该用它解决的问题,很无耻的用了其他偷工减料,拿驴凑马的招来完成。后来才通过网上资料查到,原来它是设置box模型的计算方式的一种属性。说到box模型,了解w3c的同学一定不会陌生,它对盒子模型的定义如下:把每一个网页中的元素都看作是一个盒子,这个盒子有边框(border),有内容(content),有和在其他外面的盒子的间距(margin),有和在其内盒子的边距(padding)。它的高度和宽度,取决于它的内容和边框以及内边距的总和。在浏览器中,通过开发者工具,我们可以很容易地看到一个元素的盒子模型:

图片 6

从上图可以看到,这个元素的宽和高分别是100px和100px。查看css代码,我们也可以看到它的width和height分别为100px和100px。到此为止,一切都很简单,没有问题。但是,如果我们接下来给它设置一个border呢?那么他的宽和高是多少呢?

图片 7

通过查看元素,我们发现,这个元素虽然设置了100px的宽度和100px的高度,但实际上,在添加了内边距和边框后,它的宽度和高度变成了104px和104px;所以,元素实际的宽度和高度是在设置的width和height属性后加上padding和border的宽度和高度的。虽然只是一个小小的知识点,但常常会给我们造成一些麻烦。

 属性区分大小写

假如我们在写html的时候有类似下面的代码:

XHTML

<div class=”box”></div> <input type=”email”>

1
2
<div class="box"></div>
<input type="email">

然后我们用属性选择器进行CSS修饰:

XHTML

div[class=”box”] { color: blue; } input[type=”email”] { border:
solid 1px red; }

1
2
3
4
5
6
7
div[class="box"] {
  color: blue;
}
 
input[type="email"] {
  border: solid 1px red;
}

这样的声明方式毫无疑问地就会生效。然而,如果我们声明成下面这个样子,结果会是怎么样的呢:

XHTML

div[class=”BOX”] { color: blue; } input[type=”EMAIL”] { border:
solid 1px red; }

1
2
3
4
5
6
7
div[class="BOX"] {
  color: blue;
}
 
input[type="EMAIL"] {
  border: solid 1px red;
}

这变成了大写之后,第一个 class=”BOX” 并不会影响到 <div class=”box”></div> ,而第二个 type=”EMAIL” 还是会正常修饰 <input type=”email”> 。所以在使用属性选择器的时候,注意大小写问题。

目前就只觉得这些CSS黑科技需要提醒自己一下,有可以补充。

Happy Hacking

1 赞 3 收藏 2
评论

图片 4

2. Minions With Pure CSS

如果你看过电影《Despicable
Me(神偷奶爸)
》,那你一定对其中的Minion(小黄人)印象深刻。Amr
Zakaria用纯CSS实现了其中的几个Minion,它们会用闪烁的眼睛和友好的手势给你打招呼。

图片 9

结束语

对于box-sizing的属性从无知到了解,最后到运用自如,得益于老大的提点,简单的属性在实际生产中解决了很多布局问题。从根本上说还是自己见识和基础知识太少了,写这篇博客放到此处提醒自己,多学一点知识就多解决一点难题。

1 赞 1 收藏
评论

图片 4

类的声明

对于下面的类的声明,可能大家都很熟悉:

CSS

.col-8 { }

1
2
3
.col-8 {
 
}

这当然没什么,但是如果你这样写呢:

CSS

.♥ { color: hotpink; } .★ { color: yellow; }

1
2
3
4
5
6
7
.♥ {
  color: hotpink;
}
 
.★ {
  color: yellow;
}

嗯,看起来怎么样,你是可以这么用的:

CSS

<div class=”♥ ★”></div>

1
<div class="♥ ★"></div>

只要是Unicode的,你都可以这么来声明你的类。

选中连续的几个元素

CSS

ol li:nth-child(n+7):nth-child(-n+14) { background: lightpink; } /**
Or Safari Way **/ ol li:nth-child(-n+14):nth-child(n+7) { background:
lightpink; }

1
2
3
4
5
6
7
ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。

4. Mmm… Cheese

这是一块奶酪还是?Hugo
Giraduel用CSS制作了这个3D的奶酪。我不知道你怎么认为,但是它看起来就像某种家居用品。

图片 11

box-sizing:

box-sizing是css3中出现的属性,它允许你设置或检索对象的盒模型组成模式,通过修改属性的值对盒子模型的概念做设置。我们知道,标准的盒子模型的宽是content+borderwidth+padding。box-sizing属性的值中有一个就是解释标准模型的值,它是默认的content-box,一般情况下,我们不使用它。我们使用的是它的其他值,比如:border-box,含义是将盒子的border和padding计算到设置的width中,而不是实际宽度中。所以,如果你设置width为100px,而border为1px的时候,盒子的实际大小仍旧是100px而不是102px。用这个属性,我们就可以完美地解决上面遇到的难题了:只需要在给两个div的css上写下box-sizing:border-box就可以了,保证两个div等宽,拥有1px长度,至于它们的框度是不是50%,你可以喊设计师自己量。除了以上两个值外,box-sizing还有一个padding-box值,顾名思义,就是把内边距计算在设置的框度内,而border是不计算的。

几个CSS的黑科技

2015/08/03 · CSS · 2
评论 ·
黑科技

原文出处:
JellyBool(@JellyBool)   

昨天由于某些原因没有写博客,之前说好的每天一篇的,这篇是为了补昨天的了。然后我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。

10. Rolling coke Can

这是另一个非常有趣的。当你向右滑动滚动条的时候,看起来就像是可乐罐在滚动一样。一个纯CSS实现的很棒的效果。

图片 12

兼容性

box-sizing 目前被大多数浏览器支持, 但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀。当然,对于需要在i8以下的浏览器中解决上面提到过的tab排列问题,你是不需要这个属性的,因为它们对盒子模型的解释默认值就是border-box。这也是IE这个逐渐失势的顽固的老古董和w3c对盒子模型解释的差异。就像下面那张图一样:

图片 13

伪类设置单标签

html中有几个常见的单标签:<br> ,<hr>等。具体可以查看这里:

下面的示例是实现对<hr>的修饰。

CSS

hr:before { content: “♪♪”; } hr:after { content: ” This is an <hr>
element”; }

1
2
3
4
5
6
7
hr:before {
    content: "♪♪";
}
 
hr:after {
    content: " This is an <hr> element";
}

没错,关键就是使用 :before 和 :after 这两个伪类。在这里,顺便说一点就是,其实你还可以用这两个伪类来修饰
<meta>  和  <link> ,不过这个前提是,你把这两个的
display 属性设置为:

CSS

display: block

1
display: block

3. Broken neon sign

这是用CSS的 text-shadow
实现破碎的霓虹灯效果的例子。把鼠标放到单词上,注意字母“c”、“n”和“i”的变化。

图片 14

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图