《CSS 简易速速上手小册》第10章:未来的 CSS(2024 最新版)

在这里插入图片描述

文章目录

  • 10.1 CSS 的新特性和趋势
    • 10.1.1 基础知识
    • 10.1.2 重点案例:使用 CSS Grid 创建响应式图库
    • 10.1.3 拓展案例 1:利用 CSS 变量实现主题切换
    • 10.1.4 拓展案例 2:使用 `lab()` 颜色和 `@layer` 规则优化样式
  • 10.2 CSS Houdini:魔法般的 Web 工作线
    • 10.2.1 基础知识
    • 10.2.2 重点案例:使用 Paint API 创建自定义波浪形分隔线
    • 10.2.3 拓展案例 1:利用 Properties and Values API 实现主题切换
    • 10.2.4 拓展案例 2:使用 Layout API 实现瀑布流布局
  • 10.3 构建更加动态和互动的用户界面
    • 10.3.1 基础知识
    • 10.3.2 重点案例:创建一个带有动画的加载指示器
    • 10.3.3 拓展案例 1:使用过渡实现交互式按钮
    • 10.3.4 拓展案例 2:利用滤镜和剪裁路径创建特殊效果

10.1 CSS 的新特性和趋势

随着Web技术的快速发展,CSS也在不断进化,引入了许多新特性和趋势,这些进步不仅提高了开发效率,也大大丰富了Web设计的可能性。让我们一起探索一些引人注目的CSS新特性和正在形成的趋势。

10.1.1 基础知识

  • CSS变量(Custom Properties):允许你在样式表中存储可重用的值,并在整个文档中使用它们。
  • CSS Grid布局:为Web页面提供了一种强大的布局系统,比传统的布局方法更加灵活和强大。
  • Flexbox布局:简化了复杂布局的创建过程,特别适合于一维布局。
  • Subgrid:CSS Grid的扩展,允许grid项(grid item)内部的元素参与到外部grid容器的布局中。
  • @layer规则:最近提出的提案,旨在帮助开发者管理大型和复杂的样式表。
  • 颜色级别4(CSS Color Module Level 4):引入了更多的颜色函数和新颜色空间,如lab()lch()color()函数,提供了更广泛的色彩表达能力。

10.1.2 重点案例:使用 CSS Grid 创建响应式图库

假设你要为一个摄影网站创建一个响应式图库,展示各种摄影作品。

  • HTML 结构
<div class="gallery"><div class="photo">...</div><div class="photo">...</div><!-- 更多照片 -->
</div>
  • CSS 样式
.gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 16px;
}

通过使用CSS Grid的auto-fillminmax()函数,你可以创建一个自动适应不同屏幕尺寸的图库布局,无需媒体查询。

10.1.3 拓展案例 1:利用 CSS 变量实现主题切换

为了支持深色模式和浅色模式,你可以使用CSS变量和JavaScript来动态切换网站主题。

  • CSS 样式
:root {--primary-color: #333;--background-color: #fff;
}[data-theme="dark"] {--primary-color: #ccc;--background-color: #222;
}body {color: var(--primary-color);background-color: var(--background-color);
}
  • JavaScript
const switchThemeButton = document.getElementById('theme-switcher');
switchThemeButton.addEventListener('click', function() {document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
});

10.1.4 拓展案例 2:使用 lab() 颜色和 @layer 规则优化样式

探索CSS颜色级别4和@layer规则来提升你的样式表的组织和颜色表达。

  • CSS 样式
@layer base {:root {--primary-color: lab(56% 80 -52);--secondary-color: lch(50% 70 270);}
}@layer themes {.dark-theme {--primary-color: lab(29% 20 -22);--secondary-color: lch(30% 40 290);}
}

这些案例展示了CSS新特性如何被用来创建更加动态、响应式和色彩丰富的Web界面,同时保持代码的可维护性和组织性。随着CSS的不断发展,我们期待看到更多创新的应用和实践,推动Web设计和开发进入新的时代。

在这里插入图片描述


10.2 CSS Houdini:魔法般的 Web 工作线

CSS Houdini是一组底层API的集合,旨在将CSS的强大能力暴露给开发者,允许他们更直接地访问浏览器的CSS引擎。这意味着开发者可以创建自定义的CSS属性和值,控制布局、绘制等过程,甚至实现之前只能通过JavaScript或不可能实现的视觉效果。

10.2.1 基础知识

  • 工作线概览:CSS Houdini涵盖了几个主要的工作线,包括属性与值API、布局API、绘制API(Paint API)、动画工作线(Animation Worklet)和类型对象模型(Typed OM)。
  • 属性与值API(Properties and Values API):允许开发者定义新的自定义CSS属性,这些属性可以在CSS和JavaScript之间共享。
  • 绘制API(Paint API):使开发者能够通过JavaScript来绘制图像和图形作为CSS背景、边框等。
  • 布局API(Layout API):允许开发者定义自己的布局算法,实现新的布局模式。

10.2.2 重点案例:使用 Paint API 创建自定义波浪形分隔线

假设你想在一个网页上实现一个具有动态波浪形分隔线的视觉效果。

  • 注册工作线
if ('paintWorklet' in CSS) {CSS.paintWorklet.addModule('wave-paint.js');
}
  • wave-paint.js
registerPaint('wave', class {static get inputProperties() { return ['--wave-color', '--wave-frequency']; }paint(ctx, size, properties) {const color = properties.get('--wave-color').toString();const frequency = parseInt(properties.get('--wave-frequency').toString(), 10);ctx.fillStyle = color;// 绘制波浪形状for(let x = 0; x < size.width; x++) {const y = Math.sin(x * frequency) * 10 + size.height / 2;ctx.fillRect(x, y, 1, 1);}}
});
  • CSS使用
.separator {--wave-color: #007BFF;--wave-frequency: 0.05;background-image: paint(wave);
}

通过Paint API,我们可以创建高度自定义的背景图案,不需要预加载图像,也不增加额外的网络请求。

10.2.3 拓展案例 1:利用 Properties and Values API 实现主题切换

通过定义自定义CSS属性,我们可以更灵活地实现暗模式和亮模式的主题切换。

  • 注册属性
if ('registerProperty' in CSS) {CSS.registerProperty({name: '--primary-color',syntax: '<color>',inherits: true,initialValue: '#333',});
}

10.2.4 拓展案例 2:使用 Layout API 实现瀑布流布局

瀑布流布局是一种常见的网页布局方式,但CSS本身不直接支持。利用Layout API,我们可以自定义布局算法。

  • 注册布局
if ('layoutWorklet' in CSS) {CSS.layoutWorklet.addModule('masonry-layout.js');
}
  • masonry-layout.js
registerLayout('masonry', class {// 定义布局算法
});
  • CSS使用
.container {display: layout(masonry);
}

通过CSS Houdini,开发者可以突破传统CSS的限制,创造出独一无二的布局和效果,为用户带来前所未有的体验。Houdini开启了CSS的新时代,让样式表的魔法更加强大和灵活。随着浏览器支持度的提高,未来的Web开发将更加丰富和多彩。

在这里插入图片描述


10.3 构建更加动态和互动的用户界面

随着Web技术的进步,构建动态和互动的用户界面(UI)成为了可能。CSS提供了多种工具和技术,帮助开发者和设计师创建出既美观又富有动态效果的网页,增强用户体验。

10.3.1 基础知识

  • CSS动画:通过@keyframesanimation属性,可以为元素创建复杂的动画效果。
  • CSS过渡transition属性允许元素在不同状态之间平滑过渡,适用于简单的动效。
  • 变换(Transforms)transform属性提供了旋转、缩放、移动和倾斜等效果,为元素添加动态感。
  • 滤镜(Filters)filter属性可以为元素添加视觉效果,如模糊、亮度调整和对比度调整等。
  • 剪裁和蒙版clip-pathmask属性可以创建复杂的形状和视觉效果,用于元素的剪裁和遮罩。

10.3.2 重点案例:创建一个带有动画的加载指示器

为了提升用户等待内容加载时的体验,我们将创建一个简单而优雅的加载指示器。

  • HTML 结构
<div class="loader"></div>
  • CSS样式
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}.loader {border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;width: 50px;height: 50px;animation: spin 2s linear infinite;
}

这个例子展示了如何使用CSS动画和transform属性创建一个旋转的加载指示器,增强页面的互动性和视觉吸引力。

10.3.3 拓展案例 1:使用过渡实现交互式按钮

实现一个按钮,当用户悬停或点击时,按钮有视觉反馈。

  • HTML结构
<button class="btn">悬停我</button>
  • CSS样式
.btn {background-color: #007bff;color: white;padding: 10px 20px;border: none;cursor: pointer;transition: background-color 0.3s ease;
}.btn:hover {background-color: #0056b3;
}

这个例子使用了CSS过渡,为按钮添加了简单的互动效果,使其在悬停时改变背景色。

10.3.4 拓展案例 2:利用滤镜和剪裁路径创建特殊效果

假设我们想为一个促销活动的横幅添加一些特殊的视觉效果。

  • HTML结构
<div class="promo-banner"></div>
  • CSS样式
.promo-banner {width: 100%;height: 300px;background-image: url('promo-background.jpg');filter: grayscale(50%);clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}

通过结合使用CSS滤镜和剪裁路径,我们为横幅添加了灰度滤镜和一个不规则的剪裁形状,创建出独特且吸引人的视觉效果。

通过这些案例,我们可以看到CSS提供的丰富特性如何使得构建动态和互动的用户界面成为可能。随着CSS的不断发展,我们期待未来将有更多创新的技术和方法被引入,使Web界面设计和用户体验达到新的高度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2780668.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

C++进阶(十四)智能指针

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、为什么需要智能指针&#xff1f;二、内存泄漏1、 什么是内存泄漏&#xff0c;内存泄漏的危…

STM32 7-8

目录 ADC AD单通道 AD多通道 DMA DMA转运数据 DMAAD多通道 ADC AD单通道 AD.c #include "stm32f10x.h" // Device header/*** brief 初始化AD所需要的所有设备* param 无* retval 无*/ void AD_Init(void) {RCC_APB2PeriphClockCmd(RCC_AP…

在程序中使用日志功能

在应用中&#xff0c;需要记录程序运行过程中的一些关键信息以及异常输出等。这些信息用来排查程序故障或者其他用途。 日志模块可以自己实现或者是借用第三方库&#xff0c;之前写过一个类似的使用Qt的打印重定向将打印输出到文件&#xff1a;Qt将打印信息输出到文件_qt log输…

【JavaEE】_HTML常用标签

目录 1.HTML结构 2. HTML常用标签 2.1 注释标签 2.2 标题标签&#xff1a;h1~h6 2.3 段落标签&#xff1a;p 2.4 换行标签&#xff1a;br 2.5 格式化标签 2.6 图片标签&#xff1a;img 2.7 超链接标签&#xff1a;a 2.8 表格标签 2.9 列表标签 2.10 表单标签 2.10…

C++继承(二):菱形继承、virtual菱形虚拟继承

目录 一、了解菱形继承 二、菱形继承的问题 三、虚拟继承virtual 3.1virtual 3.2虚拟继承解决数据冗余和二义性的原理 四、总结/继承和组合 一、了解菱形继承 单继承&#xff1a;一个子类只有一个直接父类时称这个继承关系为单继承 多继承&#xff1a;一个子类有两个或…

C++重新入门-C++ 函数

函数是一组一起执行一个任务的语句。每个 C 程序都至少有一个函数&#xff0c;即主函数 main() &#xff0c;所有简单的程序都可以定义其他额外的函数。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的&#xff0c;但在逻辑上&#xff0c;划分通常…

春节折腾了4天,终于用上了win11和matlab2023b

这个春节折腾了4天&#xff0c;终于与时俱进用上了win11和matlab2023b。 新购的硬盘&#xff0c;顺丰快递给力2天半到手。 先折腾硬盘&#xff0c;连线&#xff0c;没有盘符&#xff0c;使用管理&#xff0c;初始化&#xff0c;格式化&#xff0c;新建卷。下载win11&#xff0…

导数的定义【高数笔记】

【含义】可以抽象成&#xff0c;在一个极其短的时间段内&#xff0c;温度差 / 时间差 【本质】瞬间的平均值 【分类】可以分成几类&#xff1f;每类需要注意的点 【导数存在的必要条件】 【导数与极限的关系】可以参考导数的定义的式子 【题型解法】分几个题型&#xff1f;每个…

2.12作业

程序代码&#xff1a; #include<stdlib.h> #include<string.h> #include<stdio.h>//递归实现n! int n(int element) {if(0element)return 1;return element*n(element-1); }//递归实现0-n的和 int sub_sum(int element) {if(0element)return 0;return eleme…

system V——进程间通信

上一篇博客中我介绍了system V进程间通信中的内存共享&#xff0c;但是其中还有两 种通信方式&#xff1a;消息队列、和信号量&#xff0c;接下来我将简单介绍一下&#xff0c;消息队列和 信号量以及操作系统是如何看待system V进程间通信的。1. 消息队列 a. 大致介绍 消息队…

用HTML5 + JavaScript绘制花、树

用HTML5 JavaScript绘制花、树 <canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。 <canvas> 标签/元素只是图形容器&#xff0c;必须使用脚本来绘制图形。 HTML5 canvas 图形标签基础https://blog.csdn.net/cnds123/article/details/112…

腾讯云4核8G服务器性能如何?支持多少用户访问?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

{}初始化和初始化列表

C98标准中允许使用花括号对数组和自定义类型的变量进行初始化&#xff0c;C11扩展了大括号的用途&#xff0c;允许使用花括号对所有的内置类型和自定义类型进行初始化&#xff0c;使用时&#xff0c;可以加号&#xff0c;也可以不加。 对于自定义类型&#xff0c;当花括号中的常…

windows 下安装gin

go install 执行命令&#xff0c;执行不了的参考一下 https://blog.csdn.net/weixin_42592326/article/details/135946806 Golang 中没法下载第三方包解决办法-CSDN博客 go install github.com/gin-gonic/ginlatest 还是安装不了的话&#xff0c;用手机开热点&#xff0c;电…

Avaddon勒索病毒解密工具

前言 Avaddon勒索病毒被笔者称为2020年全球十大流行勒索病毒之一&#xff0c;其首次出现于2020年6月在俄罗斯某地下黑客论坛开始出售&#xff0c;该勒索病毒使用C语言进行编写&#xff0c;采用RSA-2048和AES-256加密算法对文件进行加密&#xff0c;该勒索病毒的传播方式多种多…

自动化AD域枚举和漏洞检测脚本

linWinPwn 是一个 bash 脚本&#xff0c;可自动执行许多 Active Directory 枚举和漏洞检查。该脚本基于很多现有工具实现其功能&#xff0c;其中包括&#xff1a;impacket、bloodhound、netexec、enum4linux-ng、ldapdomaindump、lsassy、smbmap、kerbrute、adidnsdump、certip…

第75讲Avatar头像FooterHome实现

Avatar头像实现 avatar&#xff1a; <template><el-dropdown><span class"el-dropdown-link"><el-avatar shape"square" :size"40" :src"squareUrl" /></span><template #dropdown><el-drop…

MySQL基本操作之数据库的操作

一.创建数据库 1.基本语法 create database 数据库名&#xff1b; 注意别忘记加分号。 2.if not exists 数据库名字是唯一的&#xff0c;所以不可以创建已存在的数据库&#xff0c;如下&#xff1a; 重复创建就会报错 所以有了if not exists这个语法&#xff0c;加上之后&…

JAVA设计模式之访问模式详解

访问者模式 1 访问者模式介绍 访问者模式在实际开发中使用的非常少,因为它比较难以实现并且应用该模式肯能会导致代码的可读性变差,可维护性变差,在没有特别必要的情况下,不建议使用访问者模式. 访问者模式(Visitor Pattern) 的原始定义是&#xff1a;允许在运行时将一个或多…

数据分析基础之《pandas(8)—综合案例》

一、需求 1、现在我们有一组从2006年到2016年1000部最流行的电影数据 数据来源&#xff1a;https://www.kaggle.com/damianpanek/sunday-eda/data 2、问题1 想知道这些电影数据中评分的平均分&#xff0c;导演的人数等信息&#xff0c;我们应该怎么获取&#xff1f; 3、问题…