CSS

 2017-08-30 11:14:47 |  0 Comments

实现一个菱形图片框所带来的思考

今天准备把我的博客头像CSS换成菱形的,顺便进行一次CSS练习.在更换的过程中发现了一些问题,写个总结积累一下.

原来的头像是这样的:

CSS:

  1. #blogPhoto
  2. {
  3. width: 155px;
  4. height: 160px;
  5. margin-top: 1px;
  6. }
  7. #blogPhoto img
  8. {
  9. display: block;
  10. width: 155px;
  11. height: 160px;
  12. border: 1px solid #f7f7f9;
  13. border-radius: 6px;
  14. };

嗯,要做成菱形边框,首先想到的当然是使用rotate进行裁切.

  1. #blogPhoto
  2. {
  3. width: 155px;
  4. height: 160px;
  5. margin-top: 1px;
  6. transform:rotate(45deg);
  7. overflow:hidden;
  8. }
  9. #blogPhoto img
  10. {
  11. display: block;
  12. width: 155px;
  13. height: 160px;
  14. border: 1px solid #f7f7f9;
  15. border-radius: 6px;
  16. transform:rotate(-45deg);
  17. };

但是事情并没有如同我想象中的发展...

title

这是怎么个意思?我有点懵逼.不然就裁成这个形状算了?不不不,还是搞明白到底咋回事比较好.

仔细想了一下,问题应该出在Width上.在我们的CSS中,子IMG的宽度和父元素是一样的.

但是这是我们的需求吗?不,我们的需求是菱形,此时,图片的宽度应该和图片的对角线一样.

图片的对角线长度是多少?这就要用到我可怜的高中数学勾股定理知识了:

一个正方形的对角线长度等于它边长的根号2倍

所以width应该是155px的根号2倍,也就是219.17px.
正准备写,突然发现.我不是可以直接缩放吗?缩放不就不用考虑是多少像素大小了?

  1. #blogPhoto
  2. {
  3. width: 155px;
  4. height: 160px;
 2017-08-21 10:29:47 |  0 Comments

CSS实现一个多重边框

今天已经加班到这个点了,就不总结什么要脑子的复杂东西了,稍微学一个小小的CSShack:双重边框.

地球人都知道怎么写边框:

  1. borderx,bordery,borderz...

但是如何写双重边框,就已经能难倒很多人了.为什么?
因为CSS根本就没有双重边框这个属性啊.

如果要实现双重边框又没有这个属性,当然第一反应是使用border-image了.当然当然,这个可以有.

但是在实际的Web开发过程中,我们并不希望增加一个图片的累赘.于是无数前端想了各种八竿子打不着的方法来实现双重边框.比如:

box-shadow

如果你百度搜一下,那么肯定就会使用这个方法.box-shadow实现双重边框已经是CSSHack标配了.

box-shadow的API,MDN是这样解释的:
title
title

总的说来,就是头两个是偏移量,第三个是模糊面积,第四个是扩大和收缩,第五个是颜色.

比如这样:

  1. box-shadow: 1px 1px 1px 10px #655;

title
title

那么问题来了:为什么box-shadow可以实现多重边框呢?这阴影确实像边框不错....

因为box-shadow可以用逗号分割并定义多个.

假如我们不设置偏移,不设置模糊,只设置扩大,不就相当于一个元素的外边框了?

假如我们写多个这样的box-shadow,不就相当于多重边框了?

也许你会有这样的疑问:那我占用了box-shadow属性,如何添加正常的阴影呢?是不是不行了?

不是的.

title
title

事实证明,我们依然可以使用box-shadow.

这种做法有没有缺点呢?其实不多,但是我还是想到了几点:
1.这样做会让box-sizing失效.不过我这样激进的全局boxsizing使用者也并不在乎.

2.边框无法响应鼠标事件.因为它们是假的.

 2017-08-20 04:04:50 |  0 Comments

告别搜一次忘一次的过去,彻底总结五个垂直居中的方法.

作为一个切图的页面仔,工作中总是要用到垂直居中.忙的时候一般就随便google一个复制粘贴上去,也从来没有思考过内在的联系与原因,但是今天晚上听听音乐想看看书的时候,突然心血来潮.择日不如撞日,就今天吧,夯实一下我的基础,从此让所有垂直居中都变成纸老虎!!!

那么,先谈谈简单的垂直居中吧.

在CSS中想要实现水平居中可以说是十分简单了,行内元素用text-align:center,块级元素用margin:auto,元素就会乖乖的自己跑到元素水平中间去.

但是这么多年下来,垂直居中已经成为了CSS领域的圣杯.

可以说,一个不能解决这个问题的人简直是寸步难行.不管你想做一个怎样的网页,垂直居中都有很大的可能性会用到.但是,它并不简单,甚至可以说难于登天.

为了解决这个绝世难题,前端开发者们从各个方面想出了各种不同的点子.之前也许你在百度的某个角落里找到过一些碎片,今天我尝试将这些碎片组装起来,还原一个真正的垂直居中,也将自己的基础进行一次夯实.

1.表格布局法.

第一个想到表格布局法的人已经无法考证,但是不得不说这真的是一个Excited的做法.

  1. <body>
  2. <div class="Center-Container is-Table">
  3. <div class="Table-Cell">
  4. <div class="Center-Block">
  5. <!-- CONTENT -->
  6. </div>
  7. </div>
  8. </div>
  9. </body>
  10. <style>
  11. .Center-Container.is-Table { display: table; }
  12. .is-Table .Table-Cell {
  13. display: table-cell;
  14. vertical-align: middle;
  15. }
  16. .is-Table .Center-Block {
  17. width: 50%;
  18. margin: 0 auto;
  19. }
  20. </style>

写一个表格,将需要居中显示的内容放在表格正中间.自适应,内容变方块大小也跟着变,兼容性更是不得了.

97.72%.基本没有不能兼容的.

嗯,所以应该说:
表格布局

 2017-08-14 08:02:43 |  0 Comments

实现一个半透明边框.

半透明颜色

如何给一个容器设置一层白色背景和一道半透明白色边框?
开始的尝试可能是这样的:

  1. border:10px solid hsla(0,0%,100%,.5);
  2. background:white;

title
然而结果却是:
title
这样就比较奇怪了.为什么边框会消失?
其实,我们的背景是存在的.但是默认情况下,背景会延伸到边框所在的区域下层,这个特性使得我们无法做到使用一个半透明边框.

还好,在CSS3之后,我们有了background-clip.它的初始属性是border-box,这个属性会导致背景被元素的borderbox裁掉.而在把它设置成padding-box之后,浏览器就会使用内边距的外沿把背景裁掉.

  1. border:10px solid hsla(0,0%,100%.5)
  2. background:white;
  3. background-clip:padding-box;

title

这样我们就实现了半透明的边框.
title

 2017-08-12 11:14:54 |  0 Comments

CSS 代码可维护性改进样例.

看完CSS揭秘第一章后,感觉自己确实对CSS的了解太过粗浅.谢天谢地,还好没有错过这本神书.

总结

首先,一个好的CSS编写者会提供回退样式.
然后,CSS的编写应该尽量应用DRY(Don't Repeat YourSelf)原则,避免WET(Write Everything twice).
为了检查兼容性,在有兼容性问题的场合应该尽可能的使用element.style来检测CSS兼容性.

样式应用DRY原则的实例:

原样式:

  1. padding:6px 16px;
  2. border:1px solid #446d88
  3. background:#58a linear-gradient(#77a0bb,#58a)
  4. border-radius:4px;
  5. box-shadow:0,1px,5px,gray;
  6. color:white;
  7. text-shadow:0 -1px 1px #335166;
  8. font-size:20px;
  9. line-height:30px;

当某些值相互依赖时,应该把他们的相互关系用代码表示出来.如:行高是字号的1.5倍,将

  1. font-size:20px;
  2. line-height:30px;

改为

  1. font-size:20px;
  2. line-height:1.5;

再改为父级的125%:

  1. font-size:125%
  2. line-height:1.5

改为em写法:

  1. padding:.3em .8em;
  2. border:1px solid #446d88
  3. background:#58a linear-gradient(#77a0bb,#58a)
  4. border-radius:.2em;
  5. box-shadow:0 .05em .25em gray;
  6. color:white;
  7. text-shadow:0 -.05em .05em #335166;
  8. font-size:20px;
  9. line-height:30px;

此时,大号按钮已经像是原按钮等比例放大了.但是并没有完全去掉绝对值.此时就要重新审视哪些效果是保持不变的.
进阶:相对与主色调的变动.

  1. padding:.3em .8em;
  2. border:1px solid rgba(0,0,0,.1)
  3. back
 2017-08-10 21:29:53 |  0 Comments

CSS浮动总结

写一个有关于浮动的博文,对自己最近的工作学习做一个总结。

1.什么是浮动?
浮动,CSS中用float定义,顾名思义系列。我个人理解为一个封闭的,装了水的盒子内中的一块泡沫。为什么说是泡沫?首先它可以漂浮起来,水面(非浮动元素)是无视它的。然后它有一定的体积,与水面也有接触,会把其他东西排挤出去(文字环绕等)。最后它在水面之上,所以不在文档流(水面的水流)内。

2.浮动是如何工作的?
浮动的设计初衷是用于浮动图像内的文本块(出自MDN),这一点我认为很重要。那么,所有对浮动的理解都应该不违背这个初衷,否则会造成不必要的学习成本。也许最开始设计浮动的时候根本没有想过可以用它来布局吧...
浮动的工作方式在我的理解,就是从文档流(整个Body)中取出一部分,然后把它变成泡沫,让它浮在水面(文档流)上。

3.为什么需要浮动?(浮动的作用)
html元素有两种状态:
1.块元素。2.内联元素。
块元素有物理属性,会占据一行,能设置宽高等特性,多个块元素会分行显示。比如:div,p 。而内联元素没有物理属性,不会占据一行,多个内联元素会并排显示。比如:Span,em,b,i等。
但是有些时候,我想让某些元素并排显示,但是又想设置它们的物理属性,而HTML是表结构,并不负责表现层的东西。这个时候使用块或者内联,都不能够满足我的需求。

那么,float的使用应运而生。它让块元素对外呈现了内联元素的特性,对内呈现了块元素的特性。

4.为什么要清除浮动?

因为,浮动是有副作用的。浮动会让元素脱离文档流,但是其实还是会影响不浮动元素的。因为它会让浮动元素的周围元素表现的如同浮动元素不存在一样。其中:
块状元素:钻进浮动元素之下,被浮动元素所覆盖。
行内元素:环绕在浮动元素周围,为浮动元素留出空间。
父元素:坍缩。

为了不出现这些情况,我们需要清除浮动。

5.常用的清除浮动方法有哪些?
(1)添加新的元素,并应用clear:both;
(2) 给父级元素定义overflow(一般设置为auto/hidden)
(3)重要,尽量使用这种。伪类选择器aft

 2017-08-10 21:29:53 |  0 Comments

从CSS画钟理解层叠上下文

最近新项目刚上手,自己也比较菜,挺忙。抽空在Dribble上找时钟练习CSS的时候,发现了一个令我很困扰的事情。

一个这样的钟表盘,可以明显看到ICON是图片,那就先不做,把表盘做做练习一下CSS。首先是阴影怎么来的就让我困扰了很久。我实在想不明白怎么通过Box-Shadow呈现这样的阴影效果。苦恼中向公司的老司机请教,他淡淡的说:

“你没看出来这所谓的阴影是个长方形吗。”

瞬间感觉自己智商-100.....好吧,原来所谓的阴影是渐变透明长方形,这样瞬间难度就降低N个Level了。

然后坑又来了,正常来说实现阴影部分的重叠只需要使用Z-index即可,但是我不管怎么设置Z-index,阴影部分的重叠总是无法达到我的要求。于是请教老司机,看了张鑫旭的博客,弄了半天终于弄明白了。
于是,顺便写个博客总结一下皮毛。

一.层叠上下文。
最开始我是懵逼的,没听过什么层叠上下文,但是说Z-index,我还是知道的。讲白了就是以你为平面建立一个坐标轴,上下为Y轴,左右为X轴,Z轴则是纵深了。层叠上下文可以理解为有纵深顺序排列的元素这么说应该比较好理解了。

二.层叠水平。
层叠水平决定了同一个层叠上下文元素中元素在Z轴上的显示顺序。而普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。这么说起来比较绕,可以理解为层叠上下文是一个实力很强的人,而层叠水平是他们家养的狗。狗叫的再厉害,打狗还是要看主人,层叠水平闹的再厉害,还是要看层叠上下文元素来决定位置。

三.层叠顺序。
层叠顺序,Stacking order.这就是真正表示Z轴排列顺序的因素了。层叠上下文和层叠水平是概念,而这里的层叠顺序是规则。你可以去理解层叠上下文和层叠水平是什么,而层叠顺序,只需要你遵守。
简单来说,他们之间的顺序可以看这张图(图背下来就可以)

总之,如果不是特别的需求,一般遵守这个图,而在这个图之内的内容,遵循原则:

谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个

Title - Artist
0:00