微信号:WEB_wysj

介绍:平台每天更新最实用,最新颖的网页设计、网站制作技巧精品文章,分享html+css、JavaScript、jQuery,ps等直播课录像,国内知名设计师亲授!无论你身在何处,和大家一起来利用零碎的时间学习知识,涨见识、涨工资吧!

CSS 实用 Tips

2018-04-14 20:30 网页设计自学平台

作为前端,日常开发充满了各种挑战与乐趣,我们穷尽一切在奇葩的需求中提升用户体验。本文将列举一些前端开发中碰到的小众需求,并提供解决方案以供参考。

一、修改鼠标手势图标

很多童鞋可能都用过:

 
           
  1. cursor: pointer | wait | hand | text | move | not-allowed;

但是,它还支持用户自定义图片,你知道吗?

 
           
  1. cursor: url(jartto.cur), url(http://jartto.wang/jartto.gif), auto;

下图为各浏览器支持情况:

记得在定义完自定义的游标之后在末尾加上一般性的游标,以防那些url所定义的游标不能使用。

二、box-shadow 三边阴影

box-shadow 大家都不陌生,我们一般这么用:

 
           
  1. box-shadow: h-shadow v-shadow blur spread color inset;

可是三边阴影该如何设置呢?请不要忽视设计师的脑洞🙈:

 
           
  1. #shadowBox {

  2.  background-color: #ddd;

  3.  margin: 0px auto;

  4.  padding: 10px;

  5.  width: 220px;

  6.  box-shadow: 0px 8px 10px gray,

  7.        -10px 8px 15px gray, 10px 8px 15px gray;

  8. }

三、超好用的 currentColor

先来举个例子,html代码:

 
           
  1. <a href="##" class="link"><i class="icon"></i>返回</a>

css 代码:

 
           
  1. .icon {

  2.  display: inline-block;

  3.  width: 16px;

  4.  height: 20px;

  5.  background-image: url(http:jartto.wang/test.png);

  6.  background-color: currentColor; /* 该颜色控制图标的颜色 */

  7.  background-position: 0 0;

  8. }

  9. .link:hover {

  10.  color: #333; /* 虽然改变的是文字颜色,但是图标颜色也一起变化了 */

  11. }

currentColor 表示“当前的标签所继承的文字颜色”

四、png 图片如何改颜色

网页中大多使用透明图片 png 格式,可是如果有天产品经理说,这个图标颜色能不能改成红色,恰巧设计师不能支持你,你该如何办? 其一:自己重新 ps 一下图片,换个颜色; 其二:只能上 svg 喽,搞成 icon font

这里,我们来说第三种方式,妙不妙可以试试哦!

 
           
  1. .icon {

  2.  display: inline-block;

  3.  width: 20px;

  4.  height: 20px;

  5.  overflow: hidden;

  6. }

  7. .icon-del {

  8.  background: url(delete.png) no-repeat center;

  9. }

  10. .icon > .icon {

  11.  position: relative;

  12.  left: -20px;

  13.  border-right: 20px solid transparent; /*下文注意点 2 有解释*/

  14.  -webkit-filter: drop-shadow(20px 0);

  15.  filter: drop-shadow(20px 0);    

  16. }

html 代码:

 
           
  1. <p><strong>原始图标</strong></p>

  2. <i class="icon icon-del"></i>

  3. <p><strong>可以变色的图标</strong></p>

  4. <i class="icon"><i class="icon icon-del"></i></i>

需要注意几点: 1.对于背景透明的 png 小图标而言,如果我们施加一个不带模糊的投影,就等同于生成了另外一个颜色的小图标; 2.在 chrome 浏览器下,如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其 drop-shadow 是不可见的。实体部分哪怕有 1px 可见,则 drop-shadow 完全可见。

原理其实很简单,使用了 css3 滤镜 filter 中的 drop-shadow, drop-shadow 滤镜可以给元素或图片非透明区域添加投影。

五、vh 与 vw

相对于视口的宽度。视口被均分为 100 单位的 vw, vh 同理。

我一般会在强制某一个容器占一整屏的时候使用,如:

 
           
  1. .box{

  2.  height: calc(100vh - 50px);

  3. }

视口高度减去页头固定区域,剩下的高度设置给容器。当然,我们也可以用它设置大小,如下:

 
           
  1. h1 {

  2.  font-size: 8vw;

  3. }

如果视口的宽度是 200mm,那么上述代码中h1元素的字号将为 16mm,即 (8x200)/100

值得注意的是, less 中使用需要加 

 
           
  1. min-height: ~"calc(100vh - 68px)";

此外,还有一些如 ch , vmax, vmin 等属性等着你去扩展

六、如何去掉 chrome input 的背景黄色

当我们在做登陆页面的时候,在 chrome 中 input 会带上自动补全的黄色背景,大大影响美观。很多网站都没有去处理,但这并不难处理。作为高逼格的前端,这里就可以体现出你的价值,解决方案如下:

 
           
  1. input:-webkit-autofill {

  2.  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;

  3. }

当然,你也可以使用方案二,如下:

 
           
  1. input:-webkit-autofill {

  2.  -webkit-animation-name: autofill;

  3.  -webkit-animation-fill-mode: both;

  4. }

  5. @-webkit-keyframes autofill {

  6.  to {

  7.    color: #fff;

  8.    background: transparent;

  9.  }

  10. }

七、chrome 中设置小于 12px 的字体

这种改小字体,绝大部分肯定都是设计师的需求,因为小显得精致。

 
           
  1. ant-checkbox-wrapper {

  2. cursor: pointer;

  3. font-size: 10px;

  4. display: inline-block;

  5. -webkit-text-size-adjust: none; // 不支持

  6. transform: scale(0.9);

  7. }

八、0.5px border 如何操作

现行方法大致有如下几条: 1.使用渐变 linear-gradient 来操作,但需要注意浏览器兼容前缀;

 
           
  1. .div::after {

  2.  content: " ";

  3.  position: absolute;

  4.  left: 0;

  5.  top: 0;

  6.  width: 100%;

  7.  height: 1px;

  8.  background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);

  9. }

2.缩放 scale 处理:

 
           
  1. div::after{

  2.  content: "";

  3.  display: block;

  4.  position: absolute;

  5.  left: -50%;

  6.  bottom: 0;

  7.  width: 200%;

  8.  height: 1px;

  9.  background: #c3c3c3;

  10.  -webkit-transform: scale(0.5);

  11. }

3.使用 background-image 和 css3 的九宫格裁减

 
           
  1. .bd-t::after {

  2.  content: " ";

  3.  position: absolute;

  4.  left: 0;

  5.  top: 0;

  6.  width: 100%;

  7.  border-top: 1px solid transparent;

  8.  /* 下面用 stretch 和 round 都可以 */

  9.  border-image: url('pic.png') 2 1 1 1 stretch;

  10.  -webkit-border-image: url('pic.png') 2 1 1 1 stretch;

  11. }

九、border 颜色渐变

 
           
  1. border-color:red green blue pink;

“border-width” 属性如果单独使用的话是不会起作用的。请首先使用 “border-style” 属性来设置边框。

十、css3 画小箭头

这里推荐两种方式: 其一,通过 border 来实现

 
           
  1. /*箭头向上*/

  2. .arrow-up {

  3.  width:0;

  4.  height:0;

  5.  border-left:30px solid transparent;

  6.  border-right:30px solid transparent;

  7.  border-bottom:30px solid #fff;

  8. }

  9. /*箭头向下*/

  10. .arrow-down {

  11.  width:0;

  12.  height:0;

  13.  border-left:20px solid transparent;

  14.  border-right:20px solid transparent;

  15.  border-top:20px solid #0066cc;

  16. }

其二,拼凑法(伪类或元素),将 div 隐藏两边或设置 z-index,然后旋转,放到合适位置。

 
           
  1. div {

  2.  position: absolute;

  3.  bottom: -2px;

  4.  left: 7px;

  5.  width: 10px;

  6.  height: 10px;

  7.  transform: rotate(-45deg);

  8.  z-index: -1; /* 放在容器后,被遮盖住*/

  9. }

比较简单,就不赘述了。

十一、有趣的 drop-shadow

用法如下:

 
           
  1. filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

  2. filter:drop-shadow(5px 5px 10px black)

CSS3 滤镜 filter 中的 drop-shadow,drop-shadow 滤镜可以给元素或图片非透明区域添加投影。

上文中已经提到了一种使用场景,这里还想说另一种,即使用拼凑法作出的小气泡,如果气泡需要阴影的话,请用 drop-shadow 来替代 box-shadow

十二、修改浏览器默认滚动条

有时候一些不期而遇的滚动条会让页面很尴尬,这时候你还可以强行美化一下,参考代码如下:

 
           
  1. /*滚动条 start*/

  2. ::-webkit-scrollbar {

  3.  width: 1px;

  4.  height: 4px;

  5.  background-color: #F5F5F5;

  6. }

  7. /*定义滚动条轨道 内阴影+圆角*/

  8. ::-webkit-scrollbar-track {

  9.  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

  10.  background: #fff ;

  11. }

  12. /*定义滑块 内阴影+圆角*/

  13. ::-webkit-scrollbar-thumb {

  14.  border-radius: 3px;

  15.  box-shadow: inset 0 0 6px rgba(0,0,0,.3);

  16.  // background-color:rgba(7, 170, 247, 0.7);

  17.  background-color: transparent;

  18. }

  19. ::-webkit-scrollbar-thumb:hover {

  20.  border-radius: 3px;

  21.  box-shadow: inset 0 0 6px rgba(0,0,0,.3);

  22.  background-color:rgba(7, 170, 247, 1);

  23. }

十三、safari placeholder bugs

在项目中遇到 input 的 placeholder 在 safari 下设置行高失效的问题,解决思路如下: 1.使用 padding 使提示文字居中,如果 font-size:14pxUI 高度为 40px,我们可以设 height14px,padding:13px 0; 2.使用 line-height:1px; 3.使用 vertical-align: middle;

补充一条:Safari 来写 hack 即 [;line-height:1;]

十四、总结

这些都是在我日常开发中碰到的奇葩问题,回头想想其实挺有意思,遂整理总结之。如果日常开发中没有一些挑战,那开发还有什么乐趣。


原文:http://jartto.wang/2017/11/12/f2e-tips


想做网站又很懒?50套国外H5流行模板免费送
点我获取

戳“阅读原文”入群免费领取前端开发教程

 
网页设计自学平台 更多文章 《头号玩家》的中文海报竟然是这位90后画的! 为什么前端开发不会Ai被取代,反而薪资会越来越高? 民国的网页设计老司机真是多啊,随便编编就车速狂飙起来了... 腾讯微视发布新LOGO,能干过抖音么? 盘点清明节品牌借势海报文案,杜蕾斯绝了!
猜您喜欢 FEX 技术周刊 - 2016/03/14 从性能的角度谈SQL Server聚集索引键的选择 赛事直播同步解说,技术架构难点解读 App孤岛战争 为繁荣成都技术氛围做点事