• 一个制作Web图案的组件:css-doodle

    Web中使用一些图案做为背景图案是一种时常可见的,早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候,会通过CSS的相关技术,比如CSS的渐变属性配合background-size之类的来做一些复杂而又美观的Web图案,运用于background-image之中。

    2018-06-22 1076 0 0
  • 结合SEM和BIO来改进CSS

    有人可能会说,CSS很简单,但是“容易”会导致代码混乱。在大家的眼里,使用像Sass或LESS这样的处理器会让事情变得更为简单。但事实上并不一定如此,如果你使用的不小心,你的CSS将变得更难处理,而不是更易处理。Sass?困难吗?Sass的嵌套就展示了这一点,使用不当,Sass的嵌套就是地狱。

    2018-06-09 831 0 0
  • CSS实现宽高等比例自适应矩形

    今天遇到一个很有趣的问题:如何实现一个宽度自适应,高度为宽度的一半的矩形。经过搜索引擎的筛选和自己的反复试验,发现使用padding-bottom是最完美的解决方案。

    2018-05-25 2097 0 0
  • 用CSS画小猪佩奇,你就是下一个社会人!

    小猪佩奇已经火了好一阵了,其实一开始我是不屑的。纵观小朋友的历届动画,无论喜洋洋、熊出没还是小兔兵兵、小熊维尼,火过一阵便迅速陨落,回想起来也没多少沉淀的东西。所以一开始让我看小猪佩奇的时候我是拒绝的,因为你不能让我看,我就马上去看,第一我要试一下。深入了解之后发现,卧槽,世间竟有如此出尘绝艳的动画片!正如某个浙江人说过:你不喜欢小猪佩奇那是因为你不了解。

    2018-05-18 2394 0 0
  • CSS Grid重构Medium的文章布局

    当人们想起CSS Grid的时候,想到的通常是图片网格布局和全屏页面。然而,CSS Grid事实上也是一项很适用于文章布局的技术,它可以做一些以前很难完成的事情

    2018-05-04 1222 0 0
  • 利用CSS变量实现令人震惊的悬浮效果

    最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

    2018-04-29 1956 0 0
  • CSS如何实现内凹角效果

    文章开头抛出了怎么实现内凹角的一个效果。首先从CSS的box-shadow着手,使用CSS的box-shadow可以轻易的实现内凹角的效果,但这个方案有一定的局限性,比如要多个内凹角时,需要通过增加元素标签来实现,特别是在面对渐变,或者有背景图像和半透明的情景之下,这个方案基本上无法来满足我们的需求。

    2018-04-22 2003 0 0
  • EM 还是 REM?这是一个问题!

    应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。

    2018-04-21 687 0 0
  • 妙用 scale 与 transfrom-origin,精准控制动画方向

    上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我讨论,感叹 CSS 的奇妙。

    2018-04-20 849 0 0
  • 不可思议的纯CSS导航栏下划线跟随效果

    这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?

    2018-03-29 986 0 0