网站建设之2019年最佳CSS趋势

随着时间的推移，网页设计越来越具有创新性。网站不仅仅是显示信息，而是艺术作品，具有复杂的动画，独特的布局和微互动。很多这些东西都可以通过CSS实现。

CSS为普通，枯燥的网页提供了风格，并使所有能使网站愉快的内容与之互动。2019年为网页设计带来了许多新的视野，这些是定义年份的7个CSS趋势。

CSS网格

网站建设

CSS网格生成器

基于网格的布局的主流标准是Flexbox。事实上，在2018年底的高峰期，Chrome上近83％的页面加载使用了Flexbox。但是一个新的竞争者已经进入了戒指。

这个新的竞争者是Grid。它仍然年轻，仅在大约2.25％的页面加载时使用，它仍然在人气中飙升，仅占2018年初页面加载量的0.25％。

网格被誉为比Flexbox更好。Flexbox可让您控制垂直或水平对齐，但不能同时控制两者。另一方面，网格确实如此。

CSS专家将缺乏受欢迎程度归因于大多数主要网站都没有使用它。毕竟，上面的数据基于页面视图，而不是使用Grid的原始页面数。最近才有主要网站采用Flexbox，因此他们不想进行切换是有意义的。

然而，2019肯定会看到Grid的增长，因为它释放了其他选项所不能提供的一定程度的创作自由。

CSS写作模式

网站建设

并非所有语言都是从左到右书写和阅读的。对于其他方向的语言，您可以使用写入模式CSS属性。

从上到下或从右到左流动文本并调整水平和垂直值。您甚至可以垂直侧向显示文本，旋转特定设计的文本以及混合脚本。

移动动画

作为参与工具的动画越来越受欢迎。网站将开始使用越来越多的动画加载图标，设计有限的页面加载等，以引起用户的注意。

YouTube热门网站就是一个例子。打开YouTube移动应用并滚动视频。如果您停一秒钟，视频将自动播放并关闭声音并显示字幕。

动画也可用作动作或任务的指示符。动画按钮和列表也变得普遍。阅读有关在此处使用CSS动画的所有内容。

流行框架（Bulma，Tailwind，Bootstrap 4等）

网站建设

CSS框架已经存在了一段时间，但它们近年来才越来越受欢迎。

Awwwards将框架定义为：

“框架是处理常见问题的一套标准化概念，实践和标准，可以作为参考，帮助我们处理和解决类似性质的新问​​题。”

随着我们转向更具移动性的网络，框架正在进行调整以进行补偿。样式和设计正在发生变化，动画和动作变得越来越普遍，对简单性和最终用户体验的关注比以往任何时候都更加重要！

2019年，许多精心设计的框架正在带头，帮助开发人员和设计人员以前所未有的速度发货。2019年在网络上使用的一些最着名的框架是：

• 基础 – 响应式，移动优先框架，用作企业解决方案;
• Bootstrap 4 – Bootstrap是全球最大的CSS框架之一，版本4带有颜色方案和实用程序类的新功能;
• 物化 – 流行的框架专注于材料设计风格;

单页，实验导航

随着网站变得与在社交网络上拥有自己的个人资料一样具有同义词，更多用户正在转向更简单的解决方案和单页选项，以将流量发送到其他位置。

常见例子包括：

• Linktree – 简单页面，包含社交，产品等链接;
• Carrd – 简单，免费，完全响应的单页网站，适用于任何事物;
• About.me – 更专业的投资组合网站，类似于LinkedIn，但有创造空间;
• Instapage – 面向企业和初创公司的顶级登录页面构建器;

这些单页网站正在进一步采用CSS和样式的创造性使用来增强体验。Next Web强调了“大型和实验性导航”，这是他们在2019年无法掩盖的10个激动人心的网页设计趋势之一。那么为什么人们会转向这些有趣的布局呢？

因为行动。通过聚焦的大按钮和导航，用户可以立即点击所需的位置。无论是商店，带有小时/细节的信息页面，还是只是一个新的视频/歌曲。

越来越多的网站被设置为公司，个人或团体发送流量然后分发的指示点。音乐家使用Linktree和其他服务在所有流媒体平台上分享他们的新歌，并在此期间减少联盟营收。

可变字体

由Carrie Cousins为Designmodo的“ 2019年十大网页设计和UI趋势 ”突出显示，可变字体被定义为“主要样式的集合，具有一个中央’默认’主人（通常是常规字体样式）和多个注册”轴“它将中央主人与其他主人联系起来。例如，Weight轴可能会将Light样式主文件连接到默认样式并连接到Bold样式主文件。可以沿此轴定位的各个样式称为“实例”。

这意味着字体在设备和平台之间响应更快，更无缝。您可以更轻松地缩放字体的宽度，大小和其他方面，而无需从字体粗细跳转到字体粗细或完全切换字体。

在GitHub上查看变量字体’Amstelvar’的示例。另请阅读有关可变字体的完整分析以及它们如何从Google更改网页。

滚动捕捉

最后但并非最不重要的是，滚动捕捉是一种相对较新的技术，用于将用户捕捉到某些滚动点。您可以使页面以递增方式滚动，而不是沿页面向下或从左向右移动。这种方法的流行用途是用于浏览页面上的产品或详细信息，滚动书籍/阅读体验，以及使用增量信息块向下滑动页面。

CSS Tricks提供了有关实用CSS Scroll Snapping的精彩指南。

该指南提供了有关浏览器支持，最佳实践以及应该用于确保滚动捕捉按预期工作的属性的信息。