• CSS Tips:段落每行渐变色文本效果

    这篇文章通过CSS的background-clip:text、color:transparent和box-decoration-break能实现每行文本渐变填充的效果,而且每行效果相同。而且不限于任何的渐变角度。

    2018-02-28 553 0 0
  • 巧用 CSS 动画实现动态气泡背景

    今天的第一个任务是写个登录页面,老大给了我一个参(chao)考(xi)案例,大家点击链接就能看到。嗯,这个登录页面确实很简洁、大方,尤其是它的气泡背景,第一反应这应该是张动态图片,打开审查元素才发现原来这是用代码写的,一下子激起了宝宝的好奇心,所以也试着写了一个带气泡背景的登录页面,效果如下:

    2018-02-26 106 0 0
  • CSS Grid和Flexbox解决实际的布局问题

    就目前为止,CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持,但对于实现布局而言,这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话,那么对于Web的布局将是一种福音。

    2018-02-14 887 0 0
  • 灵活的overflow

    说到overflow对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow。

    2018-02-13 714 0 0
  • 如何改变表单控件光标颜色

    表单大家应该不陌生,当然了,今天并不是来聊怎么做表单或者处理表单的样式网格。而是来聊聊怎么改变表单控件中光标的颜色。不知道在大家心中,表单控件的光标颜色是根据color属性来控制的。那么如果需要用CSS来改变表单控件,比如说input或者textarea元素的光标颜色,应该怎么处理呢?

    2018-02-12 1.42K 0 0
  • 写CSS的姿势

    前两天去帝都参加第三届FEDay前端开发者大会,见了很多老朋友,也认识了很多新朋友。最主要的是听了很多大神的分享,涨了不少的姿势。想写这篇文章的出发点是PostCSS作者@Andrey Sitnik分享完之后有些同学提问,让我有感而发。希望这篇文章对一些同学有所帮助。

    2018-02-11 1.54K 0 0
  • 再聊移动端页面的适配

    前端圈真乱,这话一点不假。但乱也乱的好处,乱则生变,有变化才有进步。今天还是老调重谈,聊聊移动端页面的适配。因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话,建议你花点时间阅读完下面我扯蛋的东东。

    2018-02-10 939 0 0
  • 渐进式动画解决方案

    今天聊的内容是淘宝虚拟互动实验室的@渚薰大神 在2017年06月在北京GMTC大会上分享的一个主题。未能亲临听到相关的精彩分享,但还算是有幸的,在内部听到@渚薰大神 的分享。个人对Web动画这方面的课程非常的感兴趣,而且现在和团队一直在致力于手淘互动动效相关的研究。

    2018-02-09 944 0 0
  • 如何使用CSS Grid布局实现限宽容器全屏效果

    在Web的布局设计中时常会碰到全屏的效果,而且很多时候会碰到在限制宽度的容器中实现全屏效果。比如下图的效果:

    2018-02-08 779 0 0
  • Web中如何实现纵横比

    Web发展到现在,已经有很大的变化,特别在当前这样的时代,我们面对的设备种类繁多。言外之意,这样的环境之下,Web的页面布局时常会碰到一些缩放比例的控制,特别是针对img、iframe、object、video和embed等元素的比例缩放。当然,就img元素而言,要实现纵横比例的布局已有多种方案,而且实战性也特别的强,并且在Responsive设计中已使用广泛。

    2018-02-07 709 0 0
  • CSS如何美化下划线

    2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果,@Mary Lou更疯狂的制作出了一个Demo,这个Demo展示了多种突出链接的效果,有些是使用的背景色,有些是使用不同的下划线方式。那么,接下来我们一起看看在Web中,如何更好的美化下划线的效果。

    2018-02-06 836 0 0
  • CSS Grid布局这样玩

    自从去年下半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

    2018-02-05 780 0 0