使用 media query 进行 IE 的 CSS Hack

尽管现在很多大多数现代浏览器对 CSS3 的诸多特性已经开始支持了,但是有的时候我们还是避免不了对低版本的 IE 浏览器进行兼容性的样式写法。常见的思路无疑是写注释性语法: <head> <!--[if gt IE 9]><!--> <style> // your style rule 详情 »

美化 input range 控制条

平常我们使用制作进度条的时候都是想的用 div 去模拟,在 html5 后,我们可以使用 input range 来实现这样的效果。 默认的效果如图: 你可以设置它的值得范围(min, max) 以及它的步长(step)。 这里的重点是设置它的样式啦: 取消掉默认的样式 在 chrome 和 safari 下我们可以通过声明: -webkit-appearance: none; 取消掉默认的样式, 详情 »

【译】2017年值得学习的 3 个 CSS 新特性

原文地址: https://bitsofco.de/3-new-css-features-to-learn-in-2017/ @ Ire Aderinokun 新的一年笔者计划学习一些新的东西,自己对下面这三个非常感兴趣。 CSS 特性查询(Feature Queries) 不久前,我单独写过了这篇文章the one CSS feature I really want 提及到自己期期待 CSS 特性。如今它受到了大多数浏览器的支持除了 IE 详情 »

使用 line-clam 控制段落行数

在2016年3月谷歌率先支持了 line-clam 用于控制一段文字的行数显示。这个时候实现省略号的方式有多饿一种。 先查看下目前的浏览器支持的情况: 也就是说如果在移动端浏览器上支持已经非常广泛,可以在移动端的页面大胆实现在PC上我们还需要考虑降级。 我们需要在装文本内容的部分设置如下样式: overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 效果如下: See the Pen KmOzOd by Jack Pu 详情 »

实现日本网站字体模糊动画效果

如果经常浏览日本的网站,你会看到日本网站经常会实现在页面中字体添加从模糊到正常的特效。 推荐两个网站,浏览效果: koshiki-stay,是一家提供旅游的网站 houjyuen, 一家园林网站 当然还有很多网站使用了类似效果,你可以 iiiimg 查看一些比较漂亮和充满创意交互的站点。 基本实现 想到模糊,目前前端有两种基本实现 canvas canvas 你需要写一个模糊算法,你可以参考 Codepen 的想法, 关于算法,你还能自行搜索实现。底层原理就是对像素的操作。 css3 filter: 详情 »

新博客的动画效果实现

最近重新写了 Ghost-theme 的主题。其中主要是取消了Icon-font,改为了SVG Sprite 。其次非常重要的板块首屏的Slide 和导航重新设计了。先看下具体的效果吧: 视频无法播放,可以查看 gif 图片 Slide 切换 切换动画 slide 的切换主要是利用了transform 和 animation 两个重要的属性。而切换的时间函数则需要用到 cubic-bezier(关于贝塞尔曲线的效果可以参考这里)。然后利用少量的JS和手势库就可以完成了。 基本结构 详情 »

使用css 3 制作长投影Long Shadow

在flat design(扁平化的设计)中,Long Shadow (长投影)被看着屡试不爽的设计技能。比如下面这张,非常经典的长投影设计: 摄影师选择长投影通常是给图片带来戏剧效果, 在自然界中,长投影发生在黄昏的时候,太阳接近地平线时,水平地面上的物体俯瞰就会有长投影的效果。在界面设计中我们通常采用了模拟45度角的效果,模拟阳光从西北角上射来,从而与设计的主题形成鲜明的对比效果。使用photoshop制作长投影有很多种方法,你可以阅读常用的四种方法创建长投影效果,自己平时最喜欢用的也是第四种,通过图层复制和移动来达到这样的效果,比如自己在behance上传的这张图片, 大致原理就是 你复制一个当前图层,选中图层样式, 详情 »