CSS scroll snap points 实现渐进增强的滚动

2016-07-11
阅读 2 分钟
6.6k
前几天在 segmentfault 上看到有人问下面这个效果(segmentfault app 中的)怎么实现,感觉这个效果体验还不错(在移动端没有滚动条的情况能够提示有更多内容可以滚动),就用 overflow-x: auto + width: 80% 在 codepen 上写了个 demo。

CSS 无图片技术总结

2016-06-01
阅读 3 分钟
3.2k
首先我们重复135度的透明背景,可以得到下面的<div class="demo-jagged-border-half"></div>

前端常用样式总结

2016-05-15
阅读 3 分钟
4.8k
本文全部使用 scss + autoprefixerBrower support: flex box(IE 10+), :before & :after IE 8+(IE8 only supports the single-colon) Sticky footer 内容高度不够时,footer 依然显示到最下面大概有这样的 html 结构 {代码...} flex 布局 {代码...} 查看 demo -margin & padding {代码...} 查看 demo absolute c...

CSS 无图片显示加载(&失败)效果

2016-05-14
阅读 1 分钟
12.2k
lazyload 时利用 iconfont 显示加载图片和加载失败效果 0. 效果 查看demo 1. 显示加载中或者品牌图 可以是文字或者 iconfont, 并将图标显示到正中间HTML 结构如下: {代码...} {代码...} 2. 利用 lazyload 加载图片 3. 加载加粗文字失败后更改图标(或文字) 这里需要用 js 在图片 onerror 里添加 class="img-error" {代...