lulux的博客

SVG画布,坐标系统,视窗

当你在屏幕上看SVG图像时,你是通过SVG视窗来看到画布的,所以其实你只看到了画布的一部分。画布和视窗是既相互独立又相互联系的概念,它们之间的关系很容易混淆,导致有时会有预料之外的结果。你只有弄明白了它们之间的关系,才知道如何去控制它们。

currentColor让CSS更简短

其实currentColor已经出现了有一段时间了,但我是几个月前在阅读Dudley Storey的文章时才听说了currentColor的。Dudley Storey指出currentColor的浏览器 (包括IE9+)支持是非常好的。这对于我把它用于生产已经是非常足够的了,而且我非常惊讶地发现这个关键字其实非常好用:它有助于让CSS代码变得更简洁和智能。

使用CSS的currentColor变量扩展颜色级联

如果你有使用Sass或LESS,你可能已经在你的样式表中使用过变量了,也知道它们确实非常有用。如果你没有使用预处理器,那么你就可能会好奇这到底是怎么一回事,为什么变量会如此受欢迎,它们为何会这么有用。在这篇文章中,我们先大概讲一下为什么变量如此有用,然后再认识一下另一个特殊的变量:currentColor

响应式网页设计的9条基本原则

响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难。没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去,因为越来越多的设备都可以打开网站。因此,我们需要弄清楚响应式网页设计的一些基本原则,接受流体网页,而不是与之相抗。为了让它保持简单,我们将着眼于布局(是的,响应式比它更复杂,如果你想了解更多,这是一个很好的开端。)

大放异彩的伪元素——可以做什么?

伪元素:before:after可以做的东西是相当惊人的。对于页面上的每一个元素,你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能,而且不会对你的语义标签产生负面影响。这里有一大堆关于这些有趣的效果的示例,你想看的话就接着往下看吧。

SVG基础——填充和描边

过去几周我讲解了可缩放矢量图形(SVG)的一些基础知识。首先,我展示了如何在HTML中嵌入SVG,接着讲解了如何创建SVG预定义的基础图形。为了让创建的图形显示出来,我在这两篇文章中都使用了填充和描边属性。今天我想要详细讲讲填充和描边以及它们的一些相关的属性。

理解Clip Path

在教学过程中的一个很重要的部分是,学生们通常都有很多非常新鲜的想法。而我们则倾向于思考要如何完成一项任务,也因此错过了很多可用的而且很酷的新技术。看看我们训练营第一个星期的项目,是一个简单的单页网站,用于演示对HTML和CSS的理解:使用语义化的标记语言和CSS来实现样式。我们的其中一个学生,Heather Banks,她曾经作为我的学生part-time参与过HTML/CSS课程,想要复制一个在Squarespace上看到的效果,周围的div元素似乎有被剪裁。

SVG基础——如何创建简单的图形和线条

上周我开始了SVG的系列探讨,并通过不同的方法将SVG嵌入到HTML页面中。因为需要让示例能够在你的屏幕上显示,所以我创建了一个绿色的矩形。创建矩形的代码并不难理解,我并不打算详细讲解,所以现在来讲一下你能够创建的其它形状吧。我之前有大概介绍了一些简单的SVG图形,但是我觉得我还是需要把它们再过一遍,因为我之前理解得也不够全面,所以再复习一遍也可以帮助我更好地理解。

SVG文件:从Illustrator导文件到Web

可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式。它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐。如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从Illustrator导出SVG文件到Web浏览器的基础知识。

SVG基础——如何使用可缩放矢量图形(SVG)

每次我讲到图像的时候,我都会提到,在可能的情况下,对于位图来说,可缩放矢量图形(SVG)都是最好的选择。上次我给别人提建议的时候,我意识到我没有自己想象中的那么了解SVG。我之前写过一两篇关于SVG的文章,但也仅是我自己实践经验的一点延伸。我打算今天开始写SVG系列的文章,接下来的几个星期我会介绍一些SVG的基础知识,还会在年尾的时候增加额外的主题来重温这一年讲解的SVG。

页面

返回顶部