随着时间的推移，网页设计越来越具有创新性。网站不仅仅是显示信息，而是艺术作品，具有复杂的动画，独特的布局和微互动。很多这些东西都可以通过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的精彩指南。
该指南提供了有关浏览器支持，最佳实践以及应该用于确保滚动捕捉按预期工作的属性的信息。
