06月29, 2016

css杂篇(1)

这算是日常栏目里面,css系列的第一篇。

此css系列的文章,大多是项目中的一些积累,或者思考吧。总体来说,不会太高大上,但也不会太无聊。

这阵子,刚好快结束客户端的一个项目,于是想趁新鲜热乎,把有些东西给稍微整理一下。

自适应

自适应是一个比较大的话题,在我们切图时,也是要考虑的一个点。方式有很多:

  • 百分比
  • media query
  • 某栏或某两栏固定,另外一栏自适应
  • ...

首先我觉得在做PC页面的时候,得给页面加一个最小宽度,不然自怎么适应,缩小到一定程度,连”爹妈“都不认识了。

上面提到的,如果是两栏布局,一栏固定,一栏自适应,那么可以考虑抽象用scss/less来做一层处理。

当有边框的盒子或者图片移上去时,做一个简单的动画处理

不知道为什么,最近发现有些产品就喜欢这样的,移上去时,盒子(图片)也上去一些距离,然后有一些阴影啥的。或者移上去的时候,将图片放大。

我有时候在想,是不是移上去的时候,做一个弹跳的animate,产品会开心死?

这里简单贴一下移上去的两个效果吧:

上移效果:

.item:hover{
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

图片放大:

li:hover img{
    -webkit-transform: scale(1.5);
    -webkit-transition:all 1s;
}

如果想要实现更多的效果,可以看一下这个:Animate css

多行文本溢出

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

-webkit-line-clamp,就是表示几行溢出。发现老的webkit内核在处理的时候,并不是在第二行结束的位置用...,而是在第二行的中间位置,插入了...,然后它的后面是结束的内容。

说到了多行,那就简单扯一下单行省略的写法吧:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

需要注意的是:单行的写法,宽度不是必须的,我之前老以为宽度一定要加上的。

结语

作为一个老前端,可能和新前端相比,在兼容浏览器方面比较有优势,但到了现在,其实已经什么都不是了。对我来说,平常需要多积累一些css3的写法,才能跟得上时代的脚步。

本文链接:www.my-fe.pub/post/css-record-1.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。