hancong9104的博客

Sass有什么优势

或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数?对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的。无论如何,我都要给大家分享一下,为什么我认为Sass是一个很好的东西。对于那些不熟悉web前端开发的人,Sass和CSS或许只是一些让人感觉凌乱的词语,但就是这些词语,对于幕后的开发过程是很重要的,而这些过程,形成了一个美丽的、响应式的网站。

开始了解CSS混合模式

如果你曾经广泛地使用过图片编辑应用软件(例如,Adobe Photoshop,Pixelmator,GIMP等),那么你可能对混合模式比较熟悉。如同名称中所暗示的,混合模式是指将上层的图像融入下层图像时采用的各种模式。根据您所选择的模式,你会看到不同的融合后的效果。这些混合模式,现已 Compositing and Blending Level 1说明文档被添加在CSS中。混合模式被用来指定一个特定的颜色将如何融合到背景层的颜色中。其结果可能十分有趣。

CSS混合模式

Bennett Feely一直在向人们展示CSS混合模式的特性方面做了很好的工作。过去,在Photoshop的帮助下,静态页面可以比使用动态内容的页面显示出更丰富的设计效果,不过,在CSS混合模式获得了更好的支持以后,这种状况将会得到改善。因为这并不是一件多么枯燥的事情,我很想看到不同的实现方式。

如何制作自己的网页字体图标

网页字体图标到现在来说并不是一个新话题,大家都知道是通过@font-face来实现的。虽然有很多地方介绍如何制作属于自己的网页字体图标,但大部分都还是需要收费。让你我们这等屌丝无法接受。除了这些之外,其实还有一些制作矢量图的软件可以实现自己的图标。在这篇译文中,就详细介绍了如何使用Inkscape软件制作出自己的网页字体图标。

使用SVG完成悬浮时形状样式变化的效果

在这篇教程里,我们将重新创建一个类似The Christmas Experiments网站中看到的hover样式。我们将通过SVG制作出形状,然后使用Snap.svg做出hover时的动画效果。如果你已经访问过The Christmas Experiments最新版本的网站,你可能会注意到其中Christmas calendar很酷的三角状的hover效果。那个形状其实是一个带边框的三角形。今天我会向您展示,如何使用SVG和Snap.svg做出同样的效果。我们的想法是,使用一条路径创建一个SVG,用它来表示caption的形状背景,然后在hover时改变这个路径。完成这一任务有很多种创作的可能性,今天我们将做出三个不同的示例。使用SVG的好处是,我们可以根据父容器的大小调整形状的大小,使一切都成为流动的。

返回顶部