CSS3创建加载动画效果
加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站。
加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站。
可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式。它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐。如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从Illustrator导出SVG文件到Web浏览器的基础知识。
上周我开始了SVG的系列探讨,并通过不同的方法将SVG嵌入到HTML页面中。因为需要让示例能够在你的屏幕上显示,所以我创建了一个绿色的矩形。创建矩形的代码并不难理解,我并不打算详细讲解,所以现在来讲一下你能够创建的其它形状吧。我之前有大概介绍了一些简单的SVG图形,但是我觉得我还是需要把它们再过一遍,因为我之前理解得也不够全面,所以再复习一遍也可以帮助我更好地理解。
Flexbox布局官方称之为CSS Flexible Box布局模块,他是CSS3中的一种新的布局模式。Flexbox可以控制未知容器元素的对齐方式,排列方向,排列顺序等,甚至是在未知大小的容器也能这样做。Flex容器的主要特点是能够修改其子元素(Flex item)的宽度或高度,使其在不同的屏幕尺寸中填补可用的空间。许多设计人员和开发人员发现使用Flexbox来布局更容易,可以使用更少的代码,更简单的方式实现更复杂的布局,也使整个开发过程更为简单。Flexbox布局算法基于水平或垂直的块或行内元素来布局。Flexbox布局常用于小的应用程序组件之中,而CSS Grid布局模块将应用于大规模的布局之中。
几天前的一个晚上,我在 Up Front Berlin 上就过去几年 Sass 的某些特性谈了谈自己的使用方法。点击这里可以查看当时的幻灯片。但就我个人而言,更乐意发表几篇笔记,深入地探讨相关的问题——本文就取材自这些笔记中的一些片段。我所探讨的焦点在 map
这种数据类型上,特别是使用 @content
,@at-root
和 unique-id()
等指令合并 maps
所实现的奇妙方法。其中之一就是混合宏的设计模式,这一设计模式通过使用 @extend
指令和占位符选择器来解决 Sass 的一些实际问题。
在 Sass 混合宏中,我们可以向其传递参数列表,便于快速地配置相关属性。如果定义的混合宏定义了参数,在实际调用就需要为每个参灵敏传递一个合理的值,否则就会出现错误提示。这往往强迫开发者为非必须的变量传值,甚至重置非必要的初始值。那么,怎么样才能避免必须为每一个变量传值 呢?这就是这篇文章要介绍的相关知识。
在教学过程中的一个很重要的部分是,学生们通常都有很多非常新鲜的想法。而我们则倾向于思考要如何完成一项任务,也因此错过了很多可用的而且很酷的新技术。看看我们训练营第一个星期的项目,是一个简单的单页网站,用于演示对HTML和CSS的理解:使用语义化的标记语言和CSS来实现样式。我们的其中一个学生,Heather Banks,她曾经作为我的学生part-time参与过HTML/CSS课程,想要复制一个在Squarespace上看到的效果,周围的div元素似乎有被剪裁。
过去几周我讲解了可缩放矢量图形(SVG)的一些基础知识。首先,我展示了如何在HTML中嵌入SVG,接着讲解了如何创建SVG预定义的基础图形。为了让创建的图形显示出来,我在这两篇文章中都使用了填充和描边属性。今天我想要详细讲讲填充和描边以及它们的一些相关的属性。
表单控件在网页设计中无疑是占有重要地位的。由于表单控件是用户频繁使用到的页面元素,所以有必要使用 Sass 来快速美化项目中的表单控件。
在阅读本文之前,你是怎样优化网页的呢?大多数开发者的焦点集中于 JavaScript、图片、服务器配置、文件压缩合并,甚至是 CSS。虽然 HTML 是前端技术的核心之一,但却一直没有得到应有的重视。HTML 的体积日渐臃肿。目前,全球访问量前 100 的网站每个页面大概有 40kB 的大小,类似亚马逊和雅虎这样的网站,甚至每个页面包含了数千行的 HTML 代码。最近,youtube 主页的 HTML 代码量甚至达到了惊人的 3.5K 行(翻译本文时已达到了 4.8K 行)。